Создание сетки CSS Grid

Создание сетки CSS Grid

От автора: Рассмотрим создание сетки CSS Grid 3х3 с небольшим зазором между треками сетки.

Мы создадим базовую сетку, которая выглядит следующим образом:

Базовая сетка 3х3 (3 ряда и 3 колонки).

Вот код:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте внимательнее рассмотрим этот код. HTML-разметка для сетки выглядит следующим образом:

Так что это обычный фрагмент HTML, состоящий из элементов, вложенных во внешний элемент. Но для наших целей внешний div является контейнером сетки. Все элементы, вложенные в него, являются элементами сетки. Но это не сетка, пока мы не применим к ней CSS. Итак, вот код CSS, который создает сетку:

Это правило применяется к внешнему div (потому что ему был присвоен идентификатор #grid). Вот объяснение каждого объявления в этом правиле:

display: grid. Превращает элемент в контейнер сетки. Это все, что требуется для создания сетки. Теперь у нас есть контейнер сетки и элементы сетки. Значение grid генерирует блочный контейнер сетки. Вы также можете использовать display: inline-grid для создания встроенного контейнера сетки, display: subgrid для создания подсетки (это значение предназначено для использования с самими элементами сетки).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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 для получения дополнительной информации.

Другая часть кода просто применяет различные стили к элементам сетки:

Функция repeat()

Вы можете использовать функцию repeat(), чтобы повторить определение трека указанное количество раз. Например, вместо этого:

Вы можете сделать это:

Это может уменьшить объем кода, который вам нужно написать.

Источник: https://www.quackit.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Flexbox

Изучите работу с Flexbox

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий