Изучите различия между этими современными методами компоновки CSS с помощью практической задачи: выравнивания столбцов.
Когда дело доходит до макетов CSS, в вашем распоряжении есть два основных инструмента — Grid и Flexbox. Хотя оба они превосходны в создании макетов, они служат разным целям и имеют разные сильные и слабые стороны.
Узнайте, как ведут себя оба метода макета и когда использовать один вместо другого.
Различное поведение CSS Flexbox и Grid
Чтобы облегчить визуализацию вещей, создайте index.html файл в предпочитаемой вами папке и вставьте следующую разметку:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Оба элемента div содержат одни и те же дочерние элементы, поэтому к каждому из них можно применить разную систему и сравнить их.
Вы также можете видеть, что HTML импортирует файл таблицы стилей с именем стиль.css. Создайте этот файл в той же папке, что и index.html и вставьте в него следующие стили:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Ваша страница должна выглядеть так:
Теперь, чтобы включить первый в гибкий столбец, просто добавьте следующий код в свою таблицу стилей:
.flex-container {
display: flex;
}
Вот результат:
гибкий контейнер div теперь размещает свои дочерние элементы в столбцах. Эти столбцы являются гибкими и отзывчивыми — они адаптируют свою ширину в зависимости от доступного пространства в области просмотра. Такое поведение является одним из основных основные концепции Flexbox.
Чтобы предотвратить переполнение столбцов в гибкий контейнер, вы можете использовать гибкая упаковка свойство:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Если дочерним элементам недостаточно места для размещения в одной строке, они теперь перейдут на следующую строку.
Теперь примените макет Grid ко второму используя этот CSS:
.grid-container {
display: grid;
}
С приведенным выше объявлением ничего не произойдет, поскольку поведение Grid по умолчанию создает строки, которые располагаются друг над другом.
Чтобы переключиться на отображение столбцов, необходимо изменить сетка-автопоток имущество (которое ряд по умолчанию):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Теперь вот результат:
Чтобы указать точное количество столбцов в каждой строке, используйте столбцы-шаблона сетки:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Это значение создает пять столбцов одинаковой ширины. Чтобы получить поведение упаковки, подобное Flexbox, вы можете использовать адаптивные свойства, такие как автоподбор и мин Макс:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Вы часто будете слышать, как Flexbox и Grid называют одномерными и двумерными соответственно. Однако это не вся правда, потому что и Flexbox, и Grid могут сделать двухмерная система компоновки. Просто они делают это по-разному, с разными ограничениями.
Что наиболее важно, так это то, как вы можете контролировать одномерный аспект макета. Рассмотрим, например, следующее изображение:
Обратите внимание, насколько единообразен столбец сетки и насколько неровен каждый столбец во Flexbox. Каждая строка/столбец в гибком контейнере не зависит от другой. Поэтому некоторые из них могут быть больше других, в зависимости от размера их контента. Они меньше похожи на столбцы и больше похожи на независимые блоки.
Сетка работает по-другому: создается двумерная сетка с заблокированными по умолчанию столбцами. Столбец с коротким текстом будет того же размера, что и столбец с гораздо более длинным текстом, как показано на изображении выше.
Подводя итог, CSS Grid немного более структурирован, а Flexbox — более гибкая и отзывчивая система макетов. Эти альтернативные системы компоновки имеют удачное название!
Когда использовать Flexbox
Хотите ли вы полагаться на внутренний размер каждого столбца/строки, определенный их содержимым? Или вы хотите иметь структурированный контроль с точки зрения родителей? Если ваш ответ первый, то Flexbox — идеальное решение для вас.
Чтобы продемонстрировать это, рассмотрим горизонтальное меню навигации. Замените разметку внутри теги с этим:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Замените разметку в файле CSS следующим:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Вот результат:
Теперь преобразуйте первую навигацию в гибкий макет, а вторую — в сетку, добавив следующий CSS:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Сравните результаты, чтобы увидеть, какой из них больше подходит:
Из изображения выше видно, что Flexbox — идеальное решение в этом случае. У вас есть элементы, которые вы хотите располагать рядом друг с другом и сохранять их внутренний размер (большой или маленький, в зависимости от длины текста). В Grid каждая ячейка имеет фиксированную ширину, и это выглядит не так хорошо — по крайней мере, с обычными текстовыми ссылками.
Когда использовать CSS Grid
Единственное, в чем Grid действительно превосходен, — это когда вы хотите создать жесткую систему из родительского элемента. Примером может служить набор элементов карточки, которые должны быть одинаковой ширины, даже если они содержат разное количество контента.
Замените разметку внутри теги с этим:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Добавьте этот CSS:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Вы начинаете с отображения Flexbox, чтобы увидеть, как оно выглядит, и сравнить его с отображением в виде сетки. Вот результат:
Обратите внимание, что последний столбец больше остальных из-за его внутреннего размера, с чем Flexbox хорошо справляется. Но чтобы сделать их одинаковой ширины с помощью Flexbox, вам придется пойти против этого внутреннего размера, добавив следующее:
.columns > * {
flex: 1;
}
Это помогает. Но Grid лучше подходит для подобных случаев. Вы просто указываете количество столбцов, и все готово:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Вот результат:
Еще одним преимуществом использования Grid является то, что родительский элемент контролирует расположение дочерних элементов. Таким образом, вы можете добавлять и удалять дочерние элементы, не беспокоясь о нарушении макета.
Итак, когда следует использовать Grid или Flexbox?
Подводя итог, CSS Grid отлично подходит, когда вам нужен структурированный элемент управления с точки зрения родителя, с одинаковым размером столбцов независимо от размера его отдельного содержимого.
Flexbox, с другой стороны, идеален, если вам нужна более гибкая система, основанная на внутреннем размере элементов.
