CSS Grid — это лучшая адаптивная верстка HTML-макетов. По крайней мере, она реально претендует на это звание, так как позволяет довольно легко и быстро построить адаптивный макет сайта. Основная идея, которую несет в себе адаптивная верстка при помощи CSS Grid, — это разделить веб-страницу на столбики и строки в виде сетки, образуя ячейки. А в образовавшиеся ячейки можно вставлять любые элементы страницы. При этом самими ячейками можно очень легко управлять:
изменять их размеры;
управлять их количеством;
располагать в любом нужном месте.
На сегодняшний день CSS Grid поддерживается почти всеми популярными браузерами, поэтому смело можно брать на вооружение эту технологию и изучать ее.
CSS Grid — адаптивная верстка
Еще раз для закрепления: CSS Grid — это сетка с какими-то компонентами внутри. Чтобы проще это понять, представьте шахматную доску с фигурами. Вся доска — это большой контейнер Grid, фигурки — это компоненты страницы, и вы расставляете их так, как вам нравится, но строго по клеткам. При этом вы можете занять сразу несколько клеток. А можете занять весь ряд или весь столбец.
Как разбивается макет при помощи CSS Grid, показано на рисунке ниже. Основные элементы, которые содержит данная разбивка:
Красный цвет на рисунке — это Grid-контейнер, который содержит внутри себя сетку с ячейками.
Коричневый цвет на рисунке — это Grid-ячейки, которые образуют строки и столбцы Grid-сетки. В ячейках размещаются нужные HTML-элементы.
Зеленый цвет — это линии, разделяющие ячейки между собой. Сами по себе линии существуют только в воображении, на макете их видно не будет. Но они нужны для понимания, что это все-таки сетка, а также они помогают нумеровать ряды и колонки для дальнейшего взаимодействия с ними при помощи CSS.
Кстати, если ячейки отдалить друг от друга и увеличить своего рода margin, то образуется «разрыв» и «зеленые линии» станут пустотой.
Как создать CSS Grid?
Чтобы создать сетку CSS, нужно необходимому контейнеру задать CSS-свойство:
«display: grid» — создает сетку в режиме блока, растягивается во всю ширину и занимает свое пространство; все, что было до него и после него, переносится на новые строки;
«display: inline-grid» — создает сетку в режиме строки, остальные элементы обтекают такой контейнер, а он сам получается «встроенным».
Таким grid-контейнером может быть весь body, а может быть лишь один отдельный какой-нибудь элемент. Все дочерние элементы, которые будут располагаться внутри этого контейнера, форматируются в CSS Grid.
Пример кода HTML:
<body>
<div class=“grid“>
<div class=“header“>
<h1>Хедер</h1>
</div>
<div class=“nav“>
<h2>Меню</h2>
</div>
<div class=“temp“>
<h3>Тело сайта<h3>
</div>
</div>
</body>
CSS код будет следующим:
.grid {
display:grid;
grid-template-rows: 4em 190px 190px; /* 3 строчки */
grid-template-columns: 190px 4em 50%; /* 3 колонки */
}
Таким кодом CSS мы задали контейнеру .grid макет сетки. При этом мы указали, что он будет состоять из 3-х строк и 3-х колонок. Задать количество строк и колонок и этим самым определить количество ячеек можно при помощи:
grid-template-rows: размер размер размер …;
grid-template-columns: размер размер размер …;
То есть этими свойствами вы указываете ширину и высоту каждой строчки или колонки. Подбирая размер, нужно отталкиваться от общего размера всего грид-контейнера: если он на всю ширину экрана — это одно, если нет — это другое. Указывать можно разный размер, тем самым вы можете сделать и ячейки абсолютно разными. Либо можно поставить auto, и тогда размер будет подбираться автоматически, отталкиваясь от контента, который будет внутри ячейки. Часто режим auto используется, когда создают галерею изображений при помощи CSS Grid. При таком варианте изображения будут располагаться не в порядке добавления, а отталкиваясь от своего размера, чтобы заполнить всю сетку.
Grid CSS: пример адаптивной верстки
Для понимания, что можно сделать, используя CSS Grid, предлагаем вам пример макета сайта, который будет выглядеть, как на представленном ниже рисунке. Такие макеты очень распространены в сети. Как они делаются — описано ниже рисунка.
Код HTML:
<body>
<header>Заголовок</header>
<nav>Меню</nav>
<section>Основной контент</section>
<aside>Блок виджетов</aside>
<footer>Подвал</footer>
</body>
Код CSS Grid:
body {
display: grid;
grid: "header header header" 80px
"nav section aside" 1fr
"footer footer footer" 50px
/ 15% 1fr 18%;
min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
section { grid-area: section; }
aside { grid-area: aside; }
footer { grid-area: footer; }
Это просто пример, как разбить CSS сетку без дополнительных стилей. Обычно еще нужно указывать какие-нибудь личные стили для каждого элемента, хотя бы:
background,
padding,
margin,
font-family,
и др.
Заключение
Наша статья — это лишь небольшая вершина айсберга под названием CSS Grid: адаптивная верстка, чтобы просто показать вам, что возможности у сетки CSS просто колоссальные и делается все очень просто.
Понятно, что создавать подобные сетки на своих сайтах можно и другими инструментами:
VueJS;
React;
Bootstrap;
и др.
Но Grid использовать проще, особенно новичкам, так как изучить CSS не так сложно, как предложенные фреймворки. Технология CSS Grid пришла к нам относительно недавно, но уже точно можно сказать, что сделала она это надолго!
Другое
