( 2026-09-23 )

# grid

```
display: grid;
```

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout



# template

## fixed column/row count

```
grid-template-columns : 1fr 1fr 1fr ;
grid-template-rows    : 1fr 1fr 1fr ;
grid-template-columns : repeat( 12, 1fr ); /* 12 even columns */
```

```
grid-template-columns: repeat( auto-fill, calc( 100vw / 12 ) ); /* 12? columns */
/* XXX 100vw - margin,border,padding,gap,scrollbar ... */
```

## fixed column/row size

```
grid-auto-columns     : 1fr ;
grid-auto-rows        : 100px ;
grid-template-columns : repeat( auto-fill, 96px ); /* 96px columns */
```

## justified

```
grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) );
```

```
grid-template-columns: repeat( auto-fill, 96px );
justify-content: space-around;
justify-content: space-between;
```

`XXX grid-template-columns: repeat( auto-fill, 1fr ) XXX ;`
`repeat()` with `auto-fill` and `fr` units does not work..

see also, `align-content`

## flow

```
grid-auto-flow: row           ;
grid-auto-flow: column        ;
grid-auto-flow: row     dense ;
grid-auto-flow: column  dense ;
grid-auto-flow:         dense ;
```

"dense" - fill holes with smaller elements

probably need to specify the corresponding `grid-template-*` property

see also, `order`

## placement

```
grid-columns: 1 / -1;     /* span all columns */
grid-rows: 1 / -1;        /* span all rows */
grid-columns: span 2;     /* span 2 columns */
grid-columns: 2 span 3;   /* 1 column from the left, 3 columns wide */
grid-columns: 2 / 5;      /* same; 1 column from the left, 3 columns wide */
grid-area: mymain;        /* see grid-template-areas */
```

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Line-based_placement
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Auto-placement

## subgrid

```
display: grid;                   /* on subgrid */
grid-template-columns: subgrid;  /* on subgrid */
grid-columns: 1 / -1;            /* on subgrid */
```

https://mdn.github.io/css-examples/grid/subgrid/both.html
https://github.com/mdn/css-examples/tree/main/grid/subgrid

( see also, display:contents; )



# areas

```
grid-template-area: /* on grid */
	" r1c1 r1c2 r1c3 "
	" r2c1 r2c2 r2c3 "
	" r3c1 r3c2 r3c3 "
;
grid-area: r2c2; /* on element */
```

```
grid-template-area: /* on grid */
	" header header header header "
	" ......  nav    main  ...... "
	" footer footer footer footer "
;
grid-template-area: /* on grid */
	" header header header "
	" ...... mynav  ...... "
	" ...... mymain ...... "
	" footer footer footer "
;
grid-area: mymain; /* on element */
```

areas must be rectangles
'.' is a null cell, not a recognized name

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas



# gap

```
gap: 10px;
gap: 0.5lh 1ch;
column-gap: 1ch;
row-gap: 0.5lh;
```

like consistent padding or margin..



# named tracks

? TODO

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Named_grid_lines

`-start` and `-end` prefixes are *special* and pairs create a *named area*

via mdn:
```
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
.thing {
  grid-area: content;
}
.box1 {
  grid-column-start : main-start ;
  grid-column-end   : main-end   ;
  grid-row-start    : main-start ;
  grid-row-end      : main-end   ;
}
.box2 { grid-area: main; }
```



# units

*length* ( px, in, em, ch, lh, vw, vh, .. )
*percentage* ( % )
*flex* ( fr )

`min-content`
`max-content`
`minmax( _, _ )`

`fit-content`
`fit-content( _ )`

`auto`

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/flex_value
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/fit-content
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/fit-content_function
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/minmax



# reference

https://drafts.csswg.org/css-grid/
https://drafts.csswg.org/css-grid-1/
https://drafts.csswg.org/css-grid-2/
https://drafts.csswg.org/css-grid-3/

https://www.w3.org/TR/css-grid/
https://www.w3.org/TR/css-grid-1/
https://www.w3.org/TR/css-grid-2/
https://www.w3.org/TR/css-grid-3/

https://github.com/mdn/css-examples/
https://github.com/mdn/css-examples/tree/main/grid



----

misc

```
aspect-ratio: _w_ / _h_ ;
```

```
// https://pokemondb.net/sprites#gen1
var id = "gen1";
var bcr = document.getElementById( id ).getBoundingClientRect();
window.scrollTo( {
	"top": bcr.top,
	"behavior": "smooth", // "instant",
} );
```