Полный гайд по CSS Grid: адаптивная верстка сайтов
В этой статье вы найдете полный курс по сеткам CSS. Мы разберем что это такое, какие отличая с FlexBox и как с можно работать с CSS Grid.
Сетки CSS это новый подход к созданию адаптивных сайтов с множеством блоков, расположенных в любых местах сайта. Помимо CSS Grid существует также технология , которая очень схожа с сетками. Разбираться в мельчайших различиях между ними мы не будем, так как на это понадобиться отдельная статья, но вкратце опишем основные отличия.
CSS Grid можно назвать более крутой и улучшенной версией FlexBox, ведь FlexBox позволяет работать лишь в одной плоскости: либо создавать столбцы, либо создавать ряды.
Сетки CSS позволяют делать больше, так как они работают в обеих плоскостях одновременно. Таким образом, создание адаптивных блоков сайта происходит намного проще, а возможности для расстановки объектов как вам вздумается - просто безграничны.
Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid:
Полезные ссылки из видео:
- Урок по ;
- .
В ходе урока было создано три страницы, код каждой страницы вы можете скопировать ниже.
Первый файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Grid</title>
<style>
* {padding: 0; margin: 0}
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
/* grid-column-gap: 1em;
grid-row-gap: 1em; */
grid-gap: 1em;
}
.wrapper > div{
padding: 1em;
background-color: #ee6375;
}
.wrapper > div.light {
padding: 1em;
background-color: #ecc6cb;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima animi, tempore. Vitae consectetur voluptate inventore soluta totam iste dicta neque nesciunt a! Incidunt aliquid quae eveniet blanditiis, laudantium assumenda natus doloribus, fuga mollitia debitis dolorem, soluta asperiores accusamus. Qui, necessitatibus autem doloremque corporis eligendi dolorum natus, eius aperiam consequatur aliquid, quaerat excepturi sequi repellendus, tempora cum sed velit. A voluptates laboriosam quibusdam consequatur quas harum unde sint minus, molestiae quo?
</div>
<div class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, nostrum animi, aliquid consequuntur iusto esse nulla accusamus commodi perferendis deserunt ipsa quidem, illo quam minima aspernatur vero natus?
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima animi, tempore. Vitae consectetur voluptate inventore soluta totam iste dicta neque nesciunt a! Incidunt aliquid quae eveniet blanditiis, laudantium assumenda natus doloribus, fuga mollitia debitis dolorem, soluta asperiores accusamus. Qui, necessitatibus autem doloremque corporis eligendi dolorum natus, eius aperiam consequatur aliquid, quaerat excepturi sequi repellendus, tempora cum sed velit. A voluptates laboriosam quibusdam consequatur quas harum unde sint minus, molestiae quo?
</div>
<div class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, nostrum animi, aliquid consequuntur iusto esse nulla accusamus commodi perferendis deserunt ipsa quidem, illo quam minima aspernatur vero natus?
</div>
</div>
</body>
</html>Второй файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Grid</title>
<style>
* {padding: 0; margin: 0}
.wrapper {
display: grid;
grid-template-columns:repeat(3, 1fr);
grid-gap: 1em;
/* grid-auto-rows: 150px; */
grid-auto-rows: minmax(100px, auto);
}
.included {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1em;
grid-auto-rows: 80px;
}
.wrapper > div{
padding: 1em;
background-color: #e7a158;
}
.wrapper > div.light {
padding: 1em;
background-color: #f4c3a0;
}
.included > div {
background-color: #d07a09;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div>
<div class="included">
<div>Lorem ipsum.</div>
<div>Lorem ipsum.</div>
<div>Lorem ipsum.</div>
<div>Lorem ipsum.</div>
</div>
</div>
<div class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus magni atque nostrum deleniti magnam unde ad, expedita perferendis laborum aut, pariatur delectus. Deleniti dolores consequuntur sed iure ratione, laudantium exercitationem perferendis reprehenderit delectus aperiam fugiat rerum earum quidem facere aspernatur ipsam harum. Minus alias sequi inventore aspernatur expedita, odio nemo corporis consectetur labore, voluptas quasi.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="light">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</body>
</html>Третий файл
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Grid</title>
<style>
* {padding: 0; margin: 0}
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-gap: 1em;
justify-items: stretch;
align-items: stretch;
}
.wrapper > div{
padding: 1em;
background-color: #e7a158;
}
.wrapper > div.light {
padding: 1em;
background-color: #f4c3a0;
}
.box1 {
align-self: start;
justify-self: end;
grid-column: 1/3;
grid-row: 1/3;
}
.box2 {
align-self: end;
grid-column: 3;
grid-row: 1/3;
}
.box3 {
justify-self: center;
grid-column: 2/4;
grid-row: 3;
}
.box4 {
grid-column: 1;
grid-row: 2/4;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2 light">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4 light">Box 4</div>
<div class="box box5">Box 5</div>
<div class="box box6 light">Box 6</div>
</div>
</body>
</html>Принцип работы
Работа с сетками очень проста. Алгоритм действий здесь следующий:
- Создаем один основной блок и помещаем в него другие блоки (секции);
- Добавляем к основному блоку свойство
display: grid; - Ко всем элементам основного блока теперь можно применять свойства сеток CSS;
- Добавляем различные свойства. Документацию по всем возможным свойствам вы можете ;
Каждому блоку можно устанавливать ширину, высоту, его расположение. Блоки, которые создаются на основе сеток сразу имеют адаптивный дизайн, который подстраивает блоки под различные разрешения экранов.
Таким образом, вы можете писать меньше, а получать больше. Что еще может быть круче? Делитесь своим опытом использования сеток в своих проектах в комментариях к этой статье ⇣
Больше интересных новостей
Метод Франклина: начните изучать программирование как гений!
Необходимые знания для получения должности разработчик Java
Игры, которые должен создать каждый программист
Разбираемся в топовых IT-терминах: просто о сложном
