Введение
Сетка CSS — это новый способ создания веб-макетов. Он выпущен в 2017 году. В настоящее время он поддерживает 83% всех браузеров по сравнению с 95% на flexbox. 2018 год должен стать годом прорыва для сетки CSS. Некоторые крупные компании уже используют сетку CSS на своих веб-сайтах, например, NY Times.
Вы можете ознакомиться с другими сетками CSS, которые в настоящее время находятся в разработке. ("ссылка на сайт")
Зачем использовать сетку?
Потому что это имеет смысл. С тех пор, как была изобретена веб-разработка, мы решали проблемы веб-верстки с помощью хаков.
Сначала мы используем таблицы, затем числа с плавающей запятой, которые должны использоваться, чтобы наша сеть выглядела как журналы. Далее у нас есть flexbox. Это отлично подходит для одномерного макета, но для двухмерного макета это все еще странно и не интуитивно понятно.
Наконец, в 2017 году у нас появилась сетка CSS, и мы можем с легкостью создавать сложную кладку или любой 2D-макет, как показано ниже.
Основы
Здесь я научу вас основам использования свойства сетки, все, что нам нужно сделать, это изменить свойство отображения на сетку.
.container {
display: grid;
grid-template-columns: <track-size>;
grid-template-rows: <track-size>;
grid-gap: <gap-size.;
}
Чтобы сделать макет выше
//HTML
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</div>
//CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 15px;
}
.col {
width: 100%;
height: 150px;
background: #fff;
}
После того, как мы установили для нашего отображения сетку, мы устанавливаем количество столбцов с помощью grid-template-columns. Ставим три столбца с приданием ему 3 фрс (дробная единица).
fr — это новая гибкая единица измерения, которая работает только с сеткой CSS. Это действительно похоже на flex-grow из flexbox. В любом случае 1fr означает 1 часть доступного свободного места. Итак, в этом случае есть 3 frs, что означает 100%, деленное на 3, то есть 33,33%.
Наконец, grid-gap — это просто пространство между каждым элементом сетки (столбцом и элементом).
БУМ! Вот и все ! ТАК ЛЕГКО.
Следует ли использовать сетку?
Если вы считаете, что большинство ваших посетителей разбираются в технологиях и являются более молодой аудиторией, я рекомендую вам использовать сетку CSS. Потому что они будут использовать современные браузеры. Если ваша аудитория старшего поколения и до сих пор использует старый браузер, то сетка CSS вам не подходит.
В любом случае, я все равно рекомендую вам изучить CSS Grid, потому что за CSS Grid будущее!! Кроме того, его легче писать и поддерживать.
Ресурсы:
Вот несколько ресурсов, которые я рекомендую для изучения сетки CSS.
