1display: grid;
2grid-template-columns: repeat(12, 1fr); /* repeat this pattern 12 times, i.e. 12 columns of 1fr width */
3grid-gap: 1rem;
grid-gap has been renamed to gap in the spec1grid-template-columns: 10% 2fr 3fr; /* first column is 10%, second and third are 2fr and 3fr of the remaining width */
1.col-4 {
2 grid-column: span 4; /* span 4 columns of the grid */
3}
You can set defaults for when your grid overflows, i.e. when there needs to be more rows than what you originally defined
1.grid {
2 grid-auto-rows: 200px; /* all extra rows should be 200px */
3 grid-auto-columns: 100px; /* all extra columns should be 100px */
4
5/* the values could be em, px, whatever as well as `min-content` and `max-content` */
6}