Как использовать CSS Grid для создания адаптивного веб-макета
Макет CSS Grid - это двухмерная сетка, предназначенная для помощи веб-разработчикам в разделении элементов на столбцы и строки для создания согласованного и бесшовного макета для веб-приложений.
Логика CSS Grid заключается в том, что, если разработчик берет такой элемент, как div и отображает в нем сетку, он может затем разбить элемент на столбцы и строки - вместе известные как треки - где элементы можно взять и разместить в сетке. С CSS Grid, все это может произойти без дополнительной работы с использованием свойств позиционирования (top, right, left, bottom).
Есть случаи, когда можно использовать фреймворки CSS, а в других - CSS Grid, но, как и в большинстве случаев в веб-разработке, это зависит от вашего варианта использования.
В этой статье мы сосредоточимся на базовом дизайне с использованием строк, столбцов и областей для создания простого адаптивного веб-приложения с использованием CSS Grid.
CSS Grid: базовая терминология
Давайте начнем с того, что уделим несколько минут тому, чтобы понять некоторые из основных основ CSS Grid.
- Контейнер сетки - ящик, в котором находится сетка. Это основной строительный блок CSS Grid.
- Ячейка сетки - одна за другой элемент на сетке
- Область сетки - одна или несколько ячеек, которые имеют форму квадрата или прямоугольника (но не L-образной формы).
- Сетка треков – совокупность строк и столбцов, определяемых с помощью свойств
grid-template-columnsиgrid-template-rows - Grid gaps - помогают создать на сетке промежутки. Вы не можете размещать содержимое внутри промежутка сетки.
- Явная сетка - определяется вами с помощью
grid-template-columnsиgrid-template-rows - Неявная сетка - определяется для вас браузером
Начало работы с CSS Grid
Отображение контейнера сетки и элементов
Контейнер сетки является отправной точкой для отображения сетки на элементе. Чтобы начать работу с сеткой, мы должны сначала отобразить сетку в контейнере, используя свойство ниже:
display: grid;
В CSS Grid отношения между контейнером grid и его элементами (elements) являются отношениями родителя и потомков соответственно. Каждая сетка имеет контейнер, содержащий элементы, и каждый элемент, помещенный в сетку, является элементом сетки.
Когда вы делаете контейнер grid (display: grid;), все его прямые дочерние элементы автоматически становятся элементами сетки.
<style>
.container{ display: grid; }
</style>
<div class="container">
<div class ="item item1">1</div>
<div class = "item item2">2</div>
</div>
Но отображение элементов в виде сетки само по себе мало что делает. Именно здесь вступают в игру другие концепции, такие как grid-template-columns и grid-template-rows, как вы увидите в нашем демо-фрагменте кода приложения ниже.
Использование единицы измерения fr и нотации repeat()
Хотя мы всегда можем использовать фиксированные единицы измерения при определении сеток, такие как px, CSS Grid layout также вводит новую единицу измерения, называемую fr.
Блок fr представляет собой часть доступного пространства в сеточном контейнере и может быть использован для создания гибких дорожек сетки.
Вот вам пример:
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
Приведенный выше фрагмент кода разделит доступное пространство на четыре части: две части будут назначены первой дорожке, в то время как оставшиеся две части будут назначены по одной дорожке каждая в соответствии с оставшимся доступным пространством. Это помогает обеспечить согласованность при построении вашей сетки.
Функция repeat() также помогает обеспечить согласованность и может быть использована для повторения всего или части трек листа например так:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Демо-версия: создание веб-приложения с CSS-Grid
Я включил полный набор кодов здесь, но ниже я разобью фрагменты кода с некоторыми внутренними комментариями, чтобы показать, как построить веб-приложение с помощью CSS Grid.
HTML
Сначала мы создадим простой HTML шаблон и заполним его фиктивным текстом, чтобы помочь установить некоторую структуру:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Demo Responsive CSS Grid Site</title>
<link rel="stylesheet" href="/main.css">
</head>
<!-- Main body of the site where we have the container -->
<!-- this div contain all elements that will be visible on the screen -->
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main><h2>A Demo Site showcasing CSS Grid</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque pariatur possimus alias quod ratione incidunt dicta assumenda repudiandae optio eveniet, quisquam fuga! Nam eaque fuga similique quia, esse non libero?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo libero doloremque, eum quis laudantium hic iste ab sed ipsum veniam, quam dolor rem cupiditate corrupti aliquam repudiandae officia soluta impedit!</p>
</main>
<div class="sidebar img"><h2>Find Me on Social Media</h2>
<p><a href="https://twitter.com/charliecodes">Twitter</a></p>
<p><a href="https://www.linkedin.com/in/charleseteure/">LinkedIn</a></p>
</div>
<div class="about"><h2>About </h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt voluptatem reprehenderit non. Magni sit alias quia, vel quidem autem quos optio quam at porro aliquid necessitatibus aut et eos nulla.</p>
</div>
<div class="contact"><h2>Contact</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi consequuntur magnam ipsum, commodi quam, non dolorem numquam veritatis, qui nam voluptas asperiores neque magni. Placeat, natus reprehenderit. Fugit, voluptatum commodi.</p>
</div>
<footer>Built with <3 by <a href="https://twitter.com/charliecodes">Charles Freeborn</a></footer>
</div>
</html>CSS
Здесь мы свяжем таблицу стилей (CSS) с нашим шаблоном HTML и реализуем макет с помощью CSS Grid. Мы добавили несколько комментариев к фрагментам кода для большей ясности.
body{
background: #F1F0EE;
margin: 0;
}
.container {
/* first, create a grid container */
display: grid;
/* define the amount and size of each column. Here we define 4 columns with equal fractions */
grid-template-columns: repeat(4, 1fr);
/* create horizontal tracks as rows and here we create 4 rows with different sizes */
grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
/* define where each element will be in the grid. We achieve this with grid-template-areas */
grid-template-areas:
"nav nav nav nav"
"main main main main"
"about about about sidebar"
"contact contact contact sidebar"
"footer footer footer footer";
/* we can set gaps - gutters between the rows and columns*/
gap: 0.5rem;
height: 100vh;
font-weight: 800;
font-size: 12px;
color: #004d40;
text-align: center;
}
/* Styling the Nav starts here */
nav{
background-color: #3770F6;
grid-area: nav;
}
nav ul{
list-style: none;
font-size: 16px;
font-weight: bolder;
float: left;
}
li{
display: inline-block;
}
li a{
color: #ffffff;
}
/* Styling the Nav ends here */
a:hover{
color: #FF7F50;
}
main {
grid-area: main;
}
main h2 {
font-weight: bolder;
}
main p{
text-align: left;
}
.sidebar {
background: #D3D4D7;
grid-area: sidebar;
}
.about {
background: #D7D6D3;
grid-area: about;
}
.contact {
background: #BDBCBB;
grid-area: contact;
}
footer {
background-color: #3770F6;
grid-area: footer;
color: #ffffff;
}
footer a {
color: #ffffff;
}
a {
text-align: center;
display: block;
font-family: inherit;
text-decoration: none;
font-weight: bold;
margin: 1rem;
}
/* For */
@media only screen and (max-width: 550px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
grid-template-areas:
"nav"
"sidebar"
"main"
"about"
"contact"
"footer";
}
}
CSS Grid: основные выводы
Есть много способов достичь схожих целей в CSS. Использование CSS Grid - это всего лишь один из способов размещения элементов в строках и столбцах для разработки согласованных, бесшовных веб-приложений с удобными интерфейсами.
Для получения дополнительной информации о CSS Grid я рекомендую W3 CSS Grid Layout Module и MDN CSS Grid.
