Как начать работать с CSS Grid

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

При таком подходе я не чувствовал, что хорошо понимаю, как ведет себя мой CSS-код в фоновом режиме.

Я решил глубже погрузиться в CSS. В этой статье я покажу вам, как построить простой макет, используя свойства CSS-сетки. Мы увидим, как CSS grid является отличной системой верстки для расположения контента и отзывчивости приложений.

Сетка VS Flexbox

Прежде чем я перейду к коду примера CSS grid, давайте рассмотрим высокоуровневое сравнение между flexbox и grid макетами.

Flex-макет

Разметка сетки

Как вы видите на изображении выше, Flexbox ведет себя одномерно при расположении содержимого. Строки не зависят от других.

С другой стороны, Grid является двухмерным, строки и столбцы влияют друг на друга, формируя весь макет.

Предыдущая отраслевая рекомендация заключалась в использовании Flexbox для элементов пользовательского интерфейса, а Grid — для основных макетов. Нынешняя отраслевая рекомендация — использовать Flexbox и Grid там, где они имеют наибольший смысл.

Чему мы учимся

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

Чтобы следовать строкам кода ниже, вам понадобится лишь базовый опыт работы с Javascript, React и CSS.

Вот как должен выглядеть окончательный макет:

Посмотрев на требуемый макет, я начал думать о том, как перевести его в двухмерный макет сетки. Вот рисунок того, как выглядит макет в моей голове, прежде чем я начну писать первую строчку кода:

Чтобы не отвлекаться и помочь вам сосредоточиться на коде CSS, я перенес все содержимое, такое как изображения, стили и текст, в соответствующие компоненты

<Image />, <DeviceDescription />, и <DeviceDeductible/>.

Вот как выглядит наш макет без CSS-сетки на данный момент:

Обратите внимание, как я разместил каждый из этих компонентов внутри элемента div и назначил device-image, device-description и device-deductible-container в качестве их свойств className соответственно.

отображение: сетка

Давайте применим display: grid к replacement-container. Это позволит нам рассматривать все элементы div внутри этого div как сетку.

Поскольку никакие другие свойства не назначены нашей сетке, система CSS grid делает все возможное, размещая каждый div в строке по умолчанию. В результате у нас остается один столбец и три строки.

CSS Grid считает строки и столбцы, начиная с цифры 1. Обратите внимание, как первый ряд переходит от 1 к 2. Второй ряд переходит от 2 к 3. Третий ряд переходит от 3 к 4. Это важно понимать, когда мы хотим, чтобы содержимое было разнесено по всей сетке.

grid-template-columns

Мы хотим, чтобы наш окончательный макет имел две колонки. Мы можем указать CSS grid, сколько колонок мы хотим иметь в нашем макете, назначив значение размера колонки для каждой колонки, разделенной пробелом, используя grid-template-columns.

В данном случае ключевое слово auto (строка 3) определяет размер для первого столбца, который будет автоматически назначен на основе содержимого внутри ячейки сетки.

Мы назначили 1fr для второго столбца. Это означает, что колонка занимает одну целую часть пространства между двумя колонками.

grid-column-gap

Давайте включим grid-column-gap, чтобы добавить пространство 20px между двумя колонками:

grid-row

Пока что наш макет имеет две колонки. Но наше изображение должно пересечь первую и вторую строку, чтобы переместить секцию вычитания во вторую колонку.

Для этого нам нужно свойство grid-row. Синтаксис для выделения ячейки сетки изображения — 1/3 . Благодаря этому CSS grid понимает, что мы охватываем ячейку сетки device-image через первую строку (от 1 до 2) и вторую строку (от 2 до 3).

Наш макет почти готов. Осталось оформить только один раздел — описание вычета. И для этого мы будем использовать сетку внутри сетки. 

Элемент div внутри компонента DeviceDeductible с className device-deductible содержит описание вычета. Мы сделаем этот элемент сеткой и разместим его содержимое в одной строке и трех колонках.

Обратите внимание, что мы применили те же свойства Grid в replacement-container с разницей в синтаксисе для grid-template-columns

Синтаксис repeat(3, 1fr) эквивалентен 1fr 1fr 1fr. Это равномерно распределяет одну долю доступного пространства на каждый столбец.

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

Продолжайте кодить, продолжайте учиться и никогда не сдавайтесь.

Оцените статью
devanswers.ru
Добавить комментарий