От автора: подходы к разработке макетов в Интернете меняются, и на переднем крае этих изменений находится CSS Grid Layout. В этом обновленном руководство мы не будет фокусироваться на деталях и нюансах, вместо этого поможет вам начать работу с CSS Grid Layout прямо сейчас.
Ваш браузер
CSS Grid Layout (который друзья называют просто «Grid») в прошлом году получил новый толчок в развитии, и, таким образом, на данный момент поддержка браузерами достигла вполне солидного уровня.
Настройка Grid
Grid позволяет нам размещать элементы на странице в соответствии с областями, созданными направляющими.
Терминология
Если упрощенно, направляющие или линии сетки — это горизонтальные и вертикальные границы сетки. Линии сетки ограничивают строки и столбцы, между ними расположены зазоры. Там, где пересекаются горизонтальные и вертикальные линии сетки, размещаются ячейки — как в таблице. Это важные для понимания термины. На изображении ниже вы можете видеть демонстрационную сетку, на которой обозначены:
линии сетки
столбцы
строки
ячейки
Базовая сетка, в которой выделены линии сетки, столбцы, строки и ячейки
В графическом виде будет более привычно, если мы используем точно такую же сетку, но с помощью части линий мы зададим зазоры между областями контента.
зазоры
Такая же сетка, но на этот раз поразительно похожая на финский флаг
Есть один последний термин, который нам нужно понять, прежде чем двигаться дальше:
область сетки
Одна из многих возможных областей сетки в нашей демонстрационной сетке
Площадь сетки — это любая часть сетки, ограниченная четырьмя линиями сетки; она может содержать любое количество ячеек сетки. Пора создать такую сетку в браузере! Начнем с определенной разметки.
Разметка сетки
Чтобы воссоздать приведенную выше сетку, нам нужен элемент контейнера; любой на ваш вкус:
<section class="grid-1"> </section>
В нем мы размещаем девять дочерних элементов.
<section class="grid-1"> <div class="item-1">1</div> <div class="item-2">2</div> <div class="item-3">3</div> <div class="item-4">4</div> <div class="item-5">5</div> <div class="item-6">6</div> <div class="item-7">7</div> <div class="item-8">8</div> <div class="item-9">9</div> </section>
В этой демо-версии, вы можете видеть, как это выглядит на практике. Я добавил несколько общих стилей, чтобы визуально выделить каждый элемент сетки.
Правила сетки
Во-первых, нам нужно объявить, что наш элемент контейнера является сеткой, для этого мы используем новое значение для свойства display:
.grid-1 { display: grid;
}
Да, вот так просто. Затем нам нужно определить сетку, указав, сколько полос будет иметь сетка, как по горизонтали, так и по вертикали. Мы делаем это с помощью свойств grid-template-columns и grid-template-rows:
display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; }
Вы видите три значения для каждого свойства. Значения grid-template-columns указывают, что «все три столбца должны иметь ширину 150 пикселей». Три значения grid-template-rows содержат нечто похожее. Каждая строка фактически будет вести себя по умолчанию — принимать высоту контента — но мы объявили это явно, чтобы четко указать, что должно происходить. Итак, что у нас есть сейчас?
Каждому из наших элементов автоматически присваивается область сетки в хронологическом порядке. Это неплохо, но нам не хватает зазоров. Пора исправить это.
Зазоры
Grid поставляется со специальным решением для объявления размеров зазоров. Мы можем использовать свойства grid-column-gap и grid-row-gap, или одно свойство short-grid-gap. Давайте добавим фиксированный зазор в 20px к элементу .grid-1.
.grid-1 { display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; grid-gap: 20px;
}
И теперь у нас получилась красивая, аккуратная сетка:
Заключение
Вот и все, мы начали работу с сеткой! Повторим четыре основных шага:
Создайте элемент контейнера и задайте для него display: grid;.
Используйте тот же контейнер для определения линий сетки, используя свойства grid-template-columns и grid-template-rows.
Поместите дочерние элементы в контейнер.
Укажите размеры зазоров, используя свойства grid-gap.
В следующей части этой серии мы рассмотрим синтаксис Grid, гибкие макеты, блок fr, функцию repeat() и сделаем нашу простую сетку намного круче. До встречи!
Автор: Ian Yates
Источник: https://webdesign.tutsplus.com/
Редакция: Команда webformyself.
