Що робить repeat() у Grid?

CSSJunior~1 хв читання

repeat() скорочує запис повторюваних колонок або рядків у Grid.

Формат:

css

grid-template-columns: repeat(3, 1fr);

Еквівалентно:

css

grid-template-columns: 1fr 1fr 1fr;

Тобто repeat(N, X) означає: повторити значення X N разів.

Приклади:

css

repeat(4, 100px)         /* 4 колонки по 100px */
repeat(2, 200px 1fr)     /* повторити послідовність 200px + 1fr двічі */
repeat(auto-fill, 1fr)   /* автоматично заповнити рядок колонками по 1fr */

Призначення: робить код коротшим і зручнішим під час створення сіток з однакових колонок/рядків.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.