От автора: Рассмотрим создание сетки CSS Grid 3х3 с небольшим зазором между треками сетки.
Мы создадим базовую сетку, которая выглядит следующим образом:
Базовая сетка 3х3 (3 ряда и 3 колонки).
Вот код:
<!doctype html>
<title>Example</title>
<style>
#grid { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw; }
#grid > div { font-size: 5vw; padding: .5em; background: gold; text-align: center;
}
</style>
<div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div>
</div>
Давайте внимательнее рассмотрим этот код. HTML-разметка для сетки выглядит следующим образом:
<div id="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
Так что это обычный фрагмент HTML, состоящий из элементов, вложенных во внешний элемент. Но для наших целей внешний div является контейнером сетки. Все элементы, вложенные в него, являются элементами сетки. Но это не сетка, пока мы не применим к ней CSS. Итак, вот код CSS, который создает сетку:
#grid { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw; }
Это правило применяется к внешнему div (потому что ему был присвоен идентификатор #grid). Вот объяснение каждого объявления в этом правиле:
display: grid. Превращает элемент в контейнер сетки. Это все, что требуется для создания сетки. Теперь у нас есть контейнер сетки и элементы сетки. Значение grid генерирует блочный контейнер сетки. Вы также можете использовать display: inline-grid для создания встроенного контейнера сетки, display: subgrid для создания подсетки (это значение предназначено для использования с самими элементами сетки).
grid-template-rows: 1fr 1fr 1fr. Явно устанавливает строки сетки. Каждое значение представляет размер строки. В этом случае все значения 1fr (что означает , что они занимают свободное пространство), но их также можно задать с использованием других единиц, например 100px, 7em, 30% и т.д. Вы можете также указать имена строк вместе с размерами треков (т.е. размеры строк и столбцов). Смотрите grid-template-rows для получения дополнительной информации.
grid-template-columns: 1fr 1fr 1fr. То же, что и значение выше, за исключением того, что определяет столбцы сетки. Смотрите grid-template-columns для получения дополнительной информации.
grid-gap: 2vw. Устанавливает зазор. Зазор — это разрыв между элементами сетки. Здесь мы используем единицы длины vw (они соотносятся с шириной окна просмотра), но мы могли бы так же легко использоваться 10px, 1em и т.д. Свойство grid-gap на самом деле является сокращенным свойством для свойств grid-row-gap и grid-column-gap. Смотрите grid-gap для получения дополнительной информации.
Другая часть кода просто применяет различные стили к элементам сетки:
#grid > div { font-size: 5vw; padding: .5em; background: gold; text-align: center;
}
Функция repeat()
Вы можете использовать функцию repeat(), чтобы повторить определение трека указанное количество раз. Например, вместо этого:
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
Вы можете сделать это:
grid-template-rows: repeat(5, 1fr);
Это может уменьшить объем кода, который вам нужно написать.
Источник: https://www.quackit.com/
Редакция: Команда webformyself.
