| Kosten | Пятница, 01 Июня 2018, 11:37 | Сообщение 1 |
| Сетки CSS быстро получил сцепление между фронтальными разработчиками. Это новый веб стандарт, который позволяет нам создавать двумерные макеты с чистым CSS. Представьте себе систему сетки, подобную Bootstrap или Foundation, которая позволяет размещать страницы без использования дополнительных библиотек или внешних систем сетки. С помощью CSS Grid мы можем выкладывать элементы на странице вдоль двух осей - горизонтально и вертикально. В этой статье мы рассмотрим, как создать CSS сетку шаг за шагом.
1. Настройка элемента «Сетка» в контейнере
Не забываем, что сетка CSS состоит как в горизонтальном и также вертикальном веде дорожек, также имеем виду строки и столбцы. Треки сетки определяют элементы сетки и также ячейки сетки, что легко идентифицируются по строке и столбцу, которому они принадлежат.
Чтобы сделать элемент в контейнер сетки, нам нужно использовать либо display: grid; или дисплей: встроенная сетка; имущество. Первая приводит к сетке уровня блока, в то время как последняя приводит к сетке встроенного уровня.
Базовая сетка CSS с тремя строками и тремя столбцами может быть помечена следующим кодом HTML:
Код <div class="container"> <div class="cell cell-1">1.</div> <div class="cell cell-2">2.</div> <div class="cell cell-3">3.</div> <div class="cell cell-4">4.</div> <div class="cell cell-5">5.</div> <div class="cell cell-6">6.</div> <div class="cell cell-7">7.</div> <div class="cell cell-8">8.</div> <div class="cell cell-9">9.</div> </div>
В CSS мы используем display: grid; свойство в элементе .container для создания CSS-уровня на уровне блока. В сетке шаблонные-строка и сетка-шаблоны-столбцы свойство определяет количество и размер строк и столбцов в сетке.
В приведенном ниже коде fr обозначает новую фракцию, что представляет собой долю доступного пространства в контейнере сетки. В нашем примере обе строки и столбцы делятся на 3 равные доли.
Код .container {
height: 90vh;
margin: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.cell {
color: white;
font-size: 3rem;
text-align: center;
padding: 4rem;
}
.cell-1 {
background: deepskyblue;
}
.cell-2 {
background: orangered;
}
.cell-3 {
background: royalblue;
}
.cell-4 {
background: gold;
}
.cell-5 {
background: blueviolet;
}
.cell-6 {
background: limegreen;
}
.cell-7 {
background: coral;
}
.cell-8 {
background: lightseagreen;
}
.cell-9 {
background: maroon;
}
Вот как выглядит наша CSS-таблица в браузере:
Мы можем легко изменить размер и расположение дорожек сетки, добавив новые значения в свойства grid-template-columns и grid-template-rows.
Например:
Код .container {
grid-template-columns: 2fr 1fr 1fr 200px;
grid-template-rows: 1fr 1fr 1fr;
}
Поскольку в модифицированной сетке есть 4 столбца вместо 3, div-cell-9 можно найти один в третьей строке:
2. Создание отступов между таблицами
Свойство grid-gap является сокращением для разрыва в сетке и ширины столбца. Мы можем использовать его для быстрого добавления промежутков между дорожками сетки.
Вернемся к предыдущей сетке 3 * 3 и добавим 10px-промежуток между ячейками сетки. Мы можем добавить сетки разрыв свойство контейнера сетки следующим образом:
Код .container {
grid-gap: 10px 10px;
}
В браузере мы видим, что теперь между ячейками сетки существует аккуратный промежуток:
3. позиционные сетки
Мы можем указать размер и расположение отдельных ячеек сетки, используя свойства сетки-строки и сетки-столбца . Нам нужно добавить эти два свойства в ячейки сетки, которые мы хотим разместить.
Во-первых, давайте посмотрим простой случай. Предположим, мы хотим переместить ячейку 1 во второй и третий столбцы в сетке, где в текущее место ячейки 6. Для этого нам просто нужно добавить следующие два правила CSS в .cell-1:
Код .cell-1 {
grid-row: 2;
grid-column: 3;
}
Как вы можете видеть ниже, Cell 1 был перемещен в место, куда мы нацелились, а остальные ячейки продолжают следовать порядку по умолчанию:
4. Элементы размера сетки
Мы можем не только использовать свойства grid-row и grid-column для изменения порядка ячеек, но также позволяют изменять их размер. На самом деле, оба они являются сокращенными. Свойство grid-row является сокращением для начала сетки-строки и сетки-строки-конца, в то время как grid-column состоит из свойств grid-column-start и grid-column-end.
Здесь хотим, чтобы ячейка 1 охватывала первую строку, где можем реализовать макет, добавив следующие правила стиля:
Код .cell-1 {
grid-row: 1;
grid-column: 1/4;
}
Ниже вы можете видеть, что ячейка 1 охватывает всю первую строку и толкает все следующие ячейки:
Свойство grid-row работает так же, как grid-column. Предположим, мы хотим реализовать более сложный макет и иметь основную область содержимого рядом с заголовком. Например: можем охватить ячейку 2 по первому и второму столбцам, второй и третьей строки, используя следующий код:
Код .cell-2 {
grid-row: 2/4;
grid-column: 1/3;
}
И расширенная область основного контента уже готова в браузере:
Демонстрация
5. Отображение названных областей сетки
Фактически, можно реализовать любые сложные макеты с помощью CSS Grid. Однако, если наша сетка становится слишком сложной, может быть сложно отслеживать все строки и столбцы, просто передавая их по их номерам. Чтобы помочь разработчикам преодолеть эту трудность, CSS Grid также позволяет определить предварительно названные области сетки, которые легко запомнить.
Предположим, мы хотим реализовать простой макет страницы блога с заголовком, нижним колонтитулом, основной областью содержимого и двумя боковыми панелями (один слева и один справа). Хотя это не очень сложный макет, может быть еще удобнее обращаться к ячейкам сетки по их имени.
HTML очень похож на предыдущий пример. Мы просто складываем ячейки друг на друга. Однако для удобства доступа здесь используются семантические теги HTML: header, main, aside, footer.
Код <div class="container"> <header class="cell cell-1">Заголовок</header> <aside class="cell cell-2">Левая боковая панель</aside> <main class="cell cell-3">Основной контент</main> <aside class="cell cell-4">Правая боковая панель</aside> <footer class="cell cell-5">Нижний колонтитул</footer> </div>
В CSS нам нужно отдельно использовать два новых свойства: grid-template-areas на контейнере сетки и области сетки в каждой отдельной области сетки.
Во-первых, давайте использовать свойство grid-area на ячейках сетки и дать каждому отдельное имя. В этом примере мы используем имена «header», «left», «main», «right» и «footer», но вы можете использовать что-нибудь еще.
Затем мы можем добавить свойство grid-template-areas в контейнер сетки. Это действительно удобная собственность, так как позволяет нам визуально отображать ячейки сетки. В нашем примере мы хотим, чтобы основная область содержимого была в два раза шире одной боковой панели. Таким образом, мы указываем один столбец на левой Боковой панели, один столбец в основной области и один на правую боковую панель.
Поскольку мы хотим, чтобы и заголовок, и нижний колонтитул охватывали весь экран, мы указываем три столбца сетки для каждого. Мы устанавливаем ширину и высоту строк и столбцов с параметрами grid-template-rows и grid-template-columns, как и раньше:
Код .container {
height: 90vh;
width: 90vw;
margin: 2rem auto;
display: grid;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
grid-template-rows: 1fr 3fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
}
.cell-1 {
background: deepskyblue;
grid-area: header;
}
.cell-2 {
background: orangered;
grid-area: left;
}
.cell-3 {
background: limegreen;
grid-area: main;
}
.cell-4 {
background: gold;
grid-area: right;
}
.cell-5 {
background: blueviolet;
grid-area: footer;
}
.cell {
color: white;
font-size: 2.5rem;
text-align: center;
padding: 4rem;
}
Как вы можете видеть на скриншоте ниже, то сетка-шаблон-зоны и сетки-зоны свойства автоматически сетки мы хотели создать:
Демонстрация
6. Вариант метода вложенных сеток
Поскольку макет сетки применяется только к прямым дочерним элементам сетчатого контейнера, потомки нижнего уровня не будут элементами сетки. Однако во многих случаях мы можем захотеть, чтобы эти элементы также были ячейками сетки. К счастью, модуль модуля компоновки CSS Grid позволяет сетчатым элементам также быть контейнерами сетки. Вложенные сетки работают по тем же правилам, что и автономные.
Например, допустим мы хотим разделить нижний колонтитул на четыре равных столбца. В HTML мы просто добавляем четыре div в нижний колонтитул следующим образом:
Код <div class="container"> <header class="cell cell-1">Заголовок</header> <aside class="cell cell-2">Левая боковая панель</aside> <main class="cell cell-3">Основной контент</main> <aside class="cell cell-4">Правая боковая панель</aside> <footer class="cell cell-5"> <div class="cell cell-6">Нижний колонтитул 1</div> <div class="cell cell-7">Нижний колонтитул 2</div> <div class="cell cell-8">Нижний колонтитул 3</div> <div class="cell cell-9">Нижний колонтитул 4</div> </footer> </div>
В CSS мы добавляем отображение: grid; свойство для .cell-5 и установить ширину столбцов и разрывов столбцов, используя свойства grid-template-columns и grid-column-gap :
Код .cell-5 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 1rem;
}
.cell-5 .cell {
background-color: coral;
}
Если вы посмотрите пример в браузере, вы увидите, что нижний колонтитул разделен на четыре равных столбца:
Демонстрация
Функция вложенности позволяет веб-разработчикам использовать CSS-сетку в реальных макетах, где вложенность часто происходит на нескольких разных уровнях.
Вывод:
Поскольку поддержка браузера CSS Grid значительно улучшилась за последний год, вы можете начать безопасно использовать его в веб-разработке. Чтобы узнать больше о разработке CSS, ознакомьтесь с нашим недавним руководством по лучшим интерфейсным ресурсам разработки, многие из которых связаны с сеткой CSS. И, если вы все еще предпочитаете использовать интерфейсные фреймворки вместо CSS Grid, у нас также есть отличная коллекция лучших на рынке.
| | Страна: (RU) |
| |
