CSS: grid repeat() function

By Xah Lee. Date: .

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