CSS Grid: шпаргалка для начинающих

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

Для самостоятельных примеров используйте контейнер из листинга и его стили целиком. Фрагменты с пометкой «добавьте к примеру» меняют только указанное правило.

css display grid: создаем контейнер

Добавьте display: grid родительскому элементу. Его непосредственные дочерние элементы станут grid-элементами.

<div class="grid">
    <div>Элемент A</div>
    <div>Элемент B</div>
    <div>Элемент C</div>
    <div>Элемент D</div>
    <div>Элемент E</div>
</div>

.grid {
    display: grid;
}

.grid > div {
    padding: 1rem;
    border: 1px solid #555;
    background: #eef3ff;
}

Без заданных треков браузер разместит элементы в одном столбце. Запрос «css display grid» обычно начинается с этого правила.

Значение display: grid создает блочный grid-контейнер.

Значение inline-grid создает строчный grid-контейнер. Внешнее поведение напоминает строчный блок, а дочерние элементы внутри раскладываются по правилам Grid.

Значение inline-grid меняет внешнее поведение контейнера.

Столбцы, строки и явная сетка

Свойство grid-template-columns задает столбцы, а grid-template-rows задает строки. Трек – это строка или столбец между соседними линиями сетки.

.grid {
    display: grid;
    grid-template-columns: 25rem 25rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Правило создает три столбца по 25rem и две строки по 10rem. Пять элементов займут первые пять ячеек, шестая останется пустой.

Сетка с тремя столбцами и двумя строками.

Треки могут иметь разные размеры. Замените правило столбцов в самостоятельном примере и сравните ширину ячеек.

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Столбцы сетки могут иметь разную ширину.

Явный и неявный Grid

Треки из grid-template-columns и grid-template-rows образуют явную сетку. В примере выше заданы шесть ячеек.

Добавьте еще два дочерних элемента. Седьмой элемент перейдет в новую строку. Браузер создаст ее за пределами явно заданных треков, поэтому строка станет неявной.

Браузер добавляет неявный трек, когда явных ячеек не хватает.

Третья строка не задана через grid-template-rows. Ее размер по умолчанию равен auto и зависит от содержимого.

.grid {
    display: grid;
    height: 50rem;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Две явные строки занимают 20rem. Если содержимое не требует большей высоты, неявный трек может занять оставшиеся 30rem.

Неявная строка с размером auto заполняет свободное место.

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

Несколько неявных строк делят доступную высоту.

Размер неявных треков через grid-auto

Свойство grid-auto-rows задает размер неявных строк. Свойство grid-auto-columns работает с неявными столбцами.

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: 30rem;
}

Третья и следующие неявные строки получат высоту 30rem. Длинное содержимое может выйти за границы фиксированного трека.

Свойство grid-auto-rows задает высоту новых строк.

Фиксированная высота строки может вызвать переполнение.

Надежный способ сохранить минимум и разрешить рост – функция minmax().

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: minmax(30rem, auto);
}

Функция задает минимальный и максимальный размер трека. Здесь строка начинается с 30rem и может вырасти по содержимому. В контейнере шириной 70rem столбцы 25rem, 15rem и 25rem занимают 65rem, то есть около 93% ширины.

Для гибкой ширины применяйте доли fr, проценты или автоматическое повторение треков.

Гибкая единица fr

Единица fr распределяет оставшееся место между гибкими треками Grid. К flex-контейнерам она отношения не имеет.

.grid {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr;
}

При ширине контейнера 1000px столбцы получат 500px, 333,33px и 166,67px. Браузер делит доступную ширину на шесть долей.

Единица fr задает пропорции гибких треков.

Списки 2fr 2fr 2fr и 1fr 1fr 1fr дают одинаковое соотношение. Единицу fr можно сочетать с длинами в одном списке.

.grid {
    display: grid;
    grid-template-columns: 200px 1fr 2fr;
    gap: 1rem;
}

Первый столбец займет 200px. После вычета промежутков остаток разделится между двумя гибкими треками в отношении 1:2.

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

Минимум 0 позволяет столбцам сжиматься. Свойство overflow-wrap переносит длинные слова и адреса.

Сокращенное свойство grid-template

Свойство grid-template объединяет списки строк и столбцов. Сначала записывают строки, затем ставят косую черту и указывают столбцы.

/* grid-template: список-строк / список-столбцов; */
.grid {
    display: grid;
    grid-template: 10rem 10rem / 25rem 25rem 25rem;
}

Эта запись объединяет декларации grid-template-rows и grid-template-columns. Она задает сетку одной строкой кода.

Промежутки через gap, row-gap и column-gap

Свойство gap задает расстояние между строками и столбцами. Два значения идут в порядке «строки, столбцы».

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
}

Между строками будет 1rem, между столбцами – 2rem. Те же значения можно записать отдельно.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1rem;
    column-gap: 2rem;
}

gap не создает расстояние между ячейками и внешним краем контейнера. Для этого добавьте контейнеру padding.

Повторяющиеся строки и столбцы

Функция repeat() сокращает повторяющиеся треки. Первый аргумент задает число повторений, второй – повторяемый шаблон.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Браузер создаст три одинаковых гибких столбца.

Функция repeat(3, 1fr) повторяет размер трижды.

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr 3fr);
}

Так браузер создаст четыре столбца с пропорциями 1:3:1:3. Для строк функция работает так же: grid-template-rows: repeat(2, 10rem).

Функция repeat(2, 1fr 3fr) дважды повторяет пару.

Адаптивные столбцы с auto-fit и auto-fill

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

• auto-fill сохраняет пустые треки, поэтому свободное место остается за занятыми элементами.
• auto-fit схлопывает пустые треки до нуля, а занятые треки растягиваются.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
}

Такой шаблон меняет число карточек в строке без медиазапросов. Минимум min(100%, 14rem) не дает единственному столбцу выйти за узкий экран.

Выберите auto-fill, если хотите сохранить пустые места. Выберите auto-fit, если занятые карточки должны растянуться на свободную ширину.

Размещение элементов через grid-column и grid-row

Свойства grid-column и grid-row задают начало и конец элемента по линиям сетки. У трех столбцов четыре вертикальные линии.

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(6rem, auto);
    gap: 1rem;
}

.grid > div:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

Первый элемент займет два столбца и две строки. Остальные элементы разместятся автоматически.

Ключевое слово span задает количество занимаемых треков.

.grid > div:first-child {
    grid-column: 1 / span 2;
    grid-row: span 2;
}

Отрицательная линия -1 обозначает последнюю линию явной сетки.

.grid > div:first-child {
    grid-column: 1 / -1;
}

Элемент растянется на всю ширину явно заданных столбцов. Если два элемента попадут в одну область, они могут перекрыться.

Разметка страницы через grid-template-areas

Именованные области подходят для макета с шапкой, боковой панелью, контентом и подвалом. Контейнер описывает схему, а дочерние элементы получают имена через grid-area.

<div class="page">
    <header class="page-header">Шапка</header>
    <aside class="page-sidebar">Боковая панель</aside>
    <main class="page-content">Основной контент</main>
    <footer class="page-footer">Подвал</footer>
</div>

.page {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-content { grid-area: content; }
.page-footer  { grid-area: footer; }

Шапка и подвал займут оба столбца. Боковая панель встанет слева, контент – справа. Каждая строка шаблона должна содержать одинаковое число областей.

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

Выравнивание элементов и сетки

Свойства justify-* работают по горизонтальной оси, а align-* – по вертикальной в обычном горизонтальном письме. Они выравнивают содержимое ячеек или всю сетку.

Выравнивание внутри ячеек

Свойства justify-items и align-items действуют на все элементы контейнера. Для одного элемента используйте justify-self и align-self.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 8rem;
    justify-items: center;
    align-items: center;
}

.grid > div:first-child {
    justify-self: end;
    align-self: start;
}

Все элементы окажутся в центре ячеек, кроме первого. Первый элемент прижмется к правому верхнему углу своей ячейки.

Выравнивание всей сетки

Свойства justify-content и align-content распределяют свободное место вокруг треков. Эффект виден, когда сетка меньше контейнера.

.grid {
    display: grid;
    min-height: 24rem;
    grid-template-columns: repeat(3, 5rem);
    grid-template-rows: repeat(2, 5rem);
    gap: 1rem;
    justify-content: center;
    align-content: center;
}

Сетка окажется в центре контейнера. Значение space-between распределит свободное место между треками.

Сокращенные свойства place-*

Свойства place-items, place-content и place-self объединяют пары выравниваний.

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 24rem;
    place-items: center start;
    place-content: center;
}

.grid > div:first-child {
    place-self: start end;
}

В place-items первым идет значение align-items, вторым – justify-items. Одно значение применяется к обеим осям.

Автоматическое размещение через grid-auto-flow

Свойство grid-auto-flow управляет элементами без заданной позиции. Значение row заполняет строки, а column – столбцы.

.grid {
    display: grid;
    grid-template-rows: repeat(2, 6rem);
    grid-auto-columns: 10rem;
    grid-auto-flow: column;
    gap: 1rem;
}

Первые два элемента займут первый столбец, следующие два – второй. Пятый элемент начнет третий столбец.

Ключевое слово dense разрешает браузеру заполнять оставленные отверстия.

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 1rem;
}

.grid > div:nth-child(-n+2) {
    grid-column: span 2;
}

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

Вложенные сетки с subgrid

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

<div class="cards">
    <article class="card">
        <h3>Карточка A</h3>
        <p>Описание A</p>
        <a href="#a">Подробнее</a>
    </article>
    <article class="card">
        <h3>Карточка B</h3>
        <p>Описание B</p>
        <a href="#b">Подробнее</a>
    </article>
</div>

.cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 1rem;
}

.card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    padding: 1rem;
    border: 1px solid #555;
}

.card > * {
    margin: 0;
}

Каждая карточка займет три строки родительской сетки. Заголовки, описания и ссылки соседних карточек получат согласованные размеры.

Принцип subgrid описывает документация MDN по subgrid. Правила технологии приведены в спецификации CSS Grid Layout Level 2.

css grid шпаргалка по свойствам контейнера и элементов

Контейнер задает структуру, промежутки, автоматическое размещение и выравнивание. Элемент управляет собственным положением и выравниванием.

Как выбрать прием для своего макета

Для страницы с шапкой и боковой панелью задайте именованные области. Для карточек используйте repeat(auto-fit, minmax()), чтобы сетка меняла число столбцов без медиазапросов.

Для широкого блока задайте grid-column: 1 / -1. Для согласованных строк соседних карточек примените subgrid. Перед публикацией проверьте длинный заголовок, узкое окно и переполнение содержимого.

Совет от нашей редакции: сначала собирайте сетку на независимом минимальном примере, а потом переносите рабочие правила в настоящий макет. Так старые селекторы не меняют результат незаметно.