eric/the-monospace-web-pandoc
1
0
Fork 0
mirror of https://github.com/frainfreeze/the-monospace-web-pandoc synced 2025-12-29 18:49:50 -08:00
Code Issues Packages Projects Releases Wiki Activity

example grids

Browse Source
This commit is contained in:
Oskar Wickström
2024-08-25 18:17:09 +02:00
parent 34162c1689
commit 5619d3cab1
2 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.css
View File

@@ -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; }

17
index.md
View File

@@ -111,6 +111,23 @@ And inputs:
<label>Age <input type="text" value="30" /></label>
</form>
## 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:
<div class="grid"><input readonly value="1" /></div>
<div class="grid"><input readonly value="1" /><input readonly value="2" /></div>
<div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3" /></div>
<div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /></div>
<div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" /></div>
<div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" /></div>
If you want one cell to fill the remainder, set `flex-grow: 1;` for that particular cell.
<div class="grid"><input readonly value="1" /><input readonly value="2" /><input readonly value="3!" style="flex-grow: 1;" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" /></div>
## ASCII Drawings
We can draw in `<pre>` tags using [box-drawing characters](https://en.wikipedia.org/wiki/Box-drawing_characters):