Краткое руководство по CSS Grid и Flexbox

Автор: Мухаммед Арслан Сарвар

Введение

Flexbox помогает в создании одномерных макетов благодаря возможностям распределения пространства и выравнивания. Flexbox облегчает разработку отзывчивых макетов без использования float или позиционирования. Он значительно облегчил жизнь людям, использующим CSS.

Grid — это двухмерная модель макета, которая помогает создавать макет и выравнивать элементы в нем. Она предлагает систему компоновки с рядами и колонками, облегчая разработку веб-страниц без использования плавающих элементов и позиционирования.

Создание макетов с помощью CSS может быть непростым делом, и оно осложняется тем, что для проектирования макетов страниц используются и flexbox, и grid. Это руководство включает в себя некоторые различия между flexbox и grid. Мы рассмотрим, как решить, какой из них использовать при разработке макета.

В этом руководстве мы рассмотрим:

• Управление дочерними элементами
• Внутреннее и внешнее изменение размеров
• Выравнивание блоков
• Поведение Flexbox и Grid
• Примеры использования
• Поддержка браузеров

Предварительные условия

• Основы верстки CSS
• Базовое понимание CSS flexbox
• Базовое понимание CSS grid

Управление дочерними элементами

Flexbox дает дочерним элементам большой контроль. В следующем примере у вас есть три дочерних элемента.

Если вы установите display: flex, это создаст гибкий макет. Вы заметите, что у вас нет трех одинаковых колонок. Это происходит по умолчанию при использовании flexbox, когда все рассчитывается для размера.

<div class="parent">
  <div class="child">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit.</p>
  </div>
  <div class="child">
    <h3>Lorem ipsum</h3>
    <p>Aestiae voluptatum expedita minima doloribus nemo ipsa vel. Ducimus nam, vel rerum quisquam illum maxime cumque.</p>
  </div>
  <div class="child">
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae molestiae voluptatum expedita minima doloribus nemo ipsa vel. Ducimus nam, </p>
  </div>
</div>

.parent {
  display: flex;
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1rem;
  border: 3px solid lime;
}

.child {
  padding: 1rem;
  border: 3px dashed red;
  background: white;
}

Если вы хотите сделать три одинаковые колонки, вы не можете сделать это в родительском элементе. Вы должны сделать это в дочернем элементе как width:100% или flex:1. Это создаст три одинаковых дочерних элемента по ширине.

По сути, дочерние элементы имеют контроль, потому что родительский элемент делегирует его дочерним элементам в flexbox. Если дочерние элементы имеют одинаковое содержимое, они будут равны по размеру без применения width:100% или flex:1.

Поэтому нужно быть осторожным при использовании flexbox.

В отличие от flexbox, родитель полностью контролирует сетку. Давайте создадим приведенный выше макет с помощью сетки:

.parent {
  display: grid;
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 1rem;
  border: 3px solid lime;
}

Ничего не произойдет, если мы изменим display: flex на display: grid Нужно сделать что-то еще, чтобы все встало на свои места.

Итак, добавьте эту строку grid-template-columns: 1fr 1fr 1fr 1fr в родительский элемент. Тогда содержимое будет помещаться в созданные колонки. Когда вы создаете сетку, дочерние элементы сетки помещаются в эти ячейки.

Внутренние и внешние размеры

В CSS есть внутренние и внешние размеры, например:

.intrinsic-size {
    width: auto;
}
.extrinsic-size {
    width: 500px;
}

Это действительно важная часть того, как работают макеты в CSS. При внутреннем определении размера браузер сам определяет размер элемента.

При внешнем определении размера вы объявляете конкретную ширину. Flexbox в значительной степени полагается на внутренний размер элементов при увеличении и уменьшении.

<div class="product">
  <img src="https://assets.codepen.io/308367/betteroutreach-logo.avif">
  <div class="product__info">
    <h2>Product One</h2>
    <p>A collection of the best cold email templates ever sent</p>
    <div class="product__meta">
      <div>Free Options</div>
      <div>Email</div>
    </div>
  </div>
</div>

<div class="product">
  <img src="https://assets.codepen.io/308367/sliderule-logo.avif">
  <div class="product__info">
    <h2>Product two</h2>
    <p>The no-code rules engine for risk & fraud</p>
    <div class="product__meta">
      <div>Free</div>
      <div>Social Network</div>
    </div>
  </div>
</div>

<div class="product">
  <img src="https://assets.codepen.io/308367/warmy-logo.avif">
  <div class="product__info">
    <h2>Product three</h2>
    <p>Auto all-in-one tool to make your email channel reliable</p>
    <div class="product__meta">
      <div>Free Options</div>
      <div>Email</div>
    </div>
  </div>
</div>

.product__meta {
  font-size: 12px;
  outline: 3px solid red;
  display: flex;
  gap: 1rem;
}

.product__meta > * {
  border: 3px solid lime;
}

body {
  display: grid;
  padding: var(--size-9);
  align-content: start;
  gap: var(--size-9);
  background: white;
}

.product {
  display: grid;
  gap: var(--size-5);
  grid-template-columns: 5rem 1fr;
}

.product__info {
  display: grid;
  grid-template-rows: min-content;
}

Flexbox в первую очередь определяет размер содержимого. Когда вы делаете display:flex, размер элемента полностью основывается на размере содержимого.

Если вы отобразите flex в метафайле продукта, две колонки займут ширину в соответствии с размером содержимого. Это поможет в создании желаемого макета. Таким образом, динамические колонки могут вписаться в этот макет.

В отличие от сетки, где каждая колонка занимает всю ширину, или вам нужно указать размер в родительском элементе.

.product__meta {
  font-size: 12px;
  outline: 3px solid red;
 // ====>
  display: grid;
 // <====
  gap: 1rem;
}

Следовательно, flexbox обеспечивает большую гибкость в этом случае. Сетка помогает создать более контролируемый макет.

Выравнивание полей

Давайте не будем забывать о выравнивании по ячейкам. Ведь flexbox позволяет очень легко выравнивать элементы. До появления flexbox было очень сложно правильно выровнять элементы. Для выравнивания элементов в нужном макете использовались различные хитрости и уловки.

Flexbox можно использовать и в макете сетки. Если вам нужно создать макет с определенным выравниванием или распределением пространства, лучше использовать flexbox.

Поведение Flexbox и Grid

Сетка полезна при создании более сложных и организованных макетов. Когда вы разрабатываете макет страницы, вы можете использовать сетку для комбинированного макета. В то время как flexbox помогает в создании отдельных элементов.

Поскольку flexbox основан на внутреннем размере, вы можете использовать flexbox, когда макет зависит от содержимого. С другой стороны, сетка полезна, когда содержимое зависит от макета.

Примеры использования

Flexbox может быть отличным средством для выравнивания содержимого и перемещения блоков, а также отличным вариантом для компонентов приложений и небольших макетов, в то время как сетка может быть более уместна при макетах больших площадей.

Flex-направления позволяют выравнивать содержимое по вертикали или горизонтали, что полезно при разработке обратных рядов или столбцов.

Используйте flexbox:

• Если у вас есть элементы в одном измерении либо в строке, либо в колонке.
• Если содержимое формирует макет, используется подход content-first.
• Если вы хотите, чтобы элементы контейнера были независимы друг от друга.

Используйте сетку:

• Когда элементы должны располагаться в строках и столбцах.
• Если макет формирует содержимое, используется подход «макет в первую очередь».
• Когда вы хотите разработать комбинированный макет страницы.

Поддержка браузеров

Заключение

Сетки могут стать вашим лучшим другом, когда вам нужно создать внешний макет веб-страницы. С ними сложный дизайн не будет недосягаемым, а также отзывчивым!

Подведем итог: когда следует использовать flexbox, а когда — сетку. Хотя вы можете разработать любой макет с использованием как flexbox, так и grid, вам нужно идти по пути наименьшего сопротивления.

Создавайте CRUD-приложения на основе React без ограничений

Создание CRUD-приложений включает в себя множество повторяющихся задач, отнимающих ваше драгоценное время разработки. Если вы начинаете с нуля, вам также придется внедрять собственные решения для критически важных частей приложения, таких как аутентификация, авторизация, управление состоянием и сетевое взаимодействие.

Ознакомьтесь с refine, если вы заинтересованы в безголовом фреймворке с надежной архитектурой и полным набором лучших отраслевых практик для вашего следующего CRUD-проекта.

refine — это фреймворк на базе React с открытым исходным кодом для создания CRUD-приложений без ограничений.
Он может ускорить время разработки до 3 раз без ущерба для свободы стиля, кастомизации и рабочего процесса проекта.

refine является безголовым по своей конструкции и подключает 30+ бэкенд-сервисов «из коробки», включая пользовательские REST и GraphQL API.

Посетите GitHub-репозиторий refine для получения дополнительной информации, демонстраций, учебников и примеров проектов.