diff --git a/index.css b/index.css index 0532956..50b19c3 100644 --- a/index.css +++ b/index.css @@ -337,7 +337,9 @@ label input { gap: 1ch; width: calc(round(down, 100%, (1ch * var(--grid-cells)) - (1ch * var(--grid-cells) - 1))); } -.grid > * { + +.grid > *, +.grid > input { flex: 0 0 calc(round(down, (100% - (1ch * (var(--grid-cells) - 1))) / var(--grid-cells), 1ch)); } .grid:has(> :last-child:nth-child(1)) { --grid-cells: 1; } diff --git a/index.md b/index.md index 6f78054..c4ac49d 100644 --- a/index.md +++ b/index.md @@ -111,6 +111,23 @@ And inputs: +## Grids + +Add the `grid` class to a container to divide up the horizontal space evenly for the cells. +Not that it maintains the grid, so the total width might not be 100%. +Here are six grids with increasing cell count: + +
+ + + + + + +If you want one cell to fill the remainder, set `flex-grow: 1;` for that particular cell. + + + ## ASCII Drawings We can draw in `` tags using [box-drawing characters](https://en.wikipedia.org/wiki/Box-drawing_characters):