diff options
| author | Deniz Akşimşek <deniz@denizaksimsek.com> | 2022-05-17 01:10:40 +0300 |
|---|---|---|
| committer | Deniz Akşimşek <deniz@denizaksimsek.com> | 2022-05-17 01:10:40 +0300 |
| commit | 3584c8dd5ab6f42bb10b7d64769d05157fd9b625 (patch) | |
| tree | 3469bb585dc89120596e9030fe372487d13948c9 | |
| parent | 3b3868e4769c48d101da4f8fc89bd7f03ecdd091 (diff) | |
| download | missing-3584c8dd5ab6f42bb10b7d64769d05157fd9b625.tar.gz missing-3584c8dd5ab6f42bb10b7d64769d05157fd9b625.zip | |
add more column values
| -rw-r--r-- | src/util/layout.css | 4 | ||||
| -rw-r--r-- | www/docs/layout.md | 5 |
2 files changed, 8 insertions, 1 deletions
diff --git a/src/util/layout.css b/src/util/layout.css index 9aaf32f..ff66a4f 100644 --- a/src/util/layout.css +++ b/src/util/layout.css @@ -7,7 +7,7 @@ gap: var(--gap); & > * { - flex-basis: var(--col-width); + flex: 1 0 var(--col-width); margin: 0; min-width: 1px; } @@ -19,6 +19,8 @@ .colwidth-m { --col-width: 24ch } .colwidth-s { --col-width: 15ch } +.col-0 { flex-grow: 0 } +.col-1 { flex-grow: 1 } .col-2 { flex-grow: 2 } .col-3 { flex-grow: 3 } .col-4 { flex-grow: 4 } diff --git a/www/docs/layout.md b/www/docs/layout.md index 50a6a7f..faad9a3 100644 --- a/www/docs/layout.md +++ b/www/docs/layout.md @@ -31,6 +31,11 @@ If you want an element to take up multiple columns, use the `col-*` classes: * <dfn>`.col-11`</dfn> * <dfn>`.col-12`</dfn> +There's also <dfn>`.col-0`</dfn>, which makes an element take on its intrinsic +size without regard for the column grid, and <dfn>`.col-1`</dfn>, just for +completeness' sake. + + ## Full Bleed Add the <dfn>`.full-bleed`</dfn> class to make an element go outside its |