Грид-разметка CSS: как работает нотация repeat
Development | Комментировать запись
Repeat() — это нотация, которую можно использовать со свойствами grid-template-columns и grid-template-rows при создании большого количества столбцов или строк, чтобы упростить правила и сделать их короче и понятнее.
Давайте предположим, что у нас есть такое определение контейнера сетки:
.container { display: grid; grid-gap: 10px 15px; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: 100px auto 20% 100px auto 20px; }
Нотация repeat() может ее упростить:
.container { display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(3, 1fr 2fr); grid-template-rows: repeat(2, 100px auto 20%); }
Первое значение, переданное в repeat(), — это количество повторений, а второе значение — количество повторяющихся дорожек сетки.
Repeat() и именованные строки
Также эту нотацию можно использовать с именованными строками:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: repeat(4, [col] 1fr); grid-template-rows: repeat(5, [row] 150px); }
Без нотации такое определение выглядело бы вот так:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: [col] 1fr [col] 1fr [col] 1fr [col] 1fr; grid-template-rows: [row] 150px [row] 150px [row] 150px [row] 150px [row] 150px; }
Именованные строки сетки в нотации repeat используют одно и то же имя для начала и конца:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: repeat(4, [col-start] 1fr [col-end]); grid-template-rows: repeat(5, [row-start] 150px [row-end]); }
Без сокращений эта запись имела бы такой вид:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; grid-template-rows: [row-start] 150px [row-end row-start] 150px [row-end row-start] 150px [row-end row-start] 150px [row-end row-start] 150px [row-end]; }
Читайте также: Грид-разметка CSS: макет Holy Grail
Tags: CSS