CSS: grid repeat() function
Repeat notation
if you have a lot columns, it's tedius to write
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
you can use repeat function, e.g.
grid-template-columns: repeat(6, 1fr);
/* example of using repeat() */ .x { grid-template-columns: repeat(3, 1fr); /* equivalent to */ grid-template-columns: 1fr 1fr 1fr; } .x { grid-template-columns: repeat(3, 200px); /* equivalent to */ grid-template-columns: 200px 200px 200px; } .x { grid-template-columns: 2fr repeat(3, auto); /* equivalent to */ grid-template-columns: 2fr auto auto auto; } .x { grid-template-columns: 2fr repeat(3, 1fr) 300px; /* equivalent to */ grid-template-columns: 2fr 1fr 1fr 1fr 300px; }
CSS grid layout
- CSS: Grid Layout
- CSS: grid-template-columns
- CSS: grid-template-rows
- CSS: grid repeat() function
- CSS: grid-row, grid-column (grid item position and span)
- CSS: grid-area
- CSS: grid-template-areas
- CSS: gap, row-gap, column-gap (flex, grid)
- CSS: justify-content
- CSS: justify-items (grid)
- CSS: justify-self (grid)
- CSS: align-items (flex cross axis)
- CSS: align-self (for flex items)