Достижение вертикального выравнивания с помощью Subgrid

Вертикальное выравнивание элементов в CSS всегда было задачей, требующей особого внимания. С появлением CSS Grid эта задача упростилась, а введение свойства subgrid открыло новые возможности для разработчиков. В этой статье мы подробно рассмотрим, как с помощью subgrid можно достичь вертикального выравнивания в веб-дизайне.

Что такое CSS Grid и Subgrid?

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

Основные свойства

• display: grid — преобразует контейнер в грид-контейнер.
• grid-template-rows и grid-template-columns — задают количество и размеры строк и столбцов.
• grid-template-areas — позволяет именовать области внутри грид-контейнера.

Свойство subgrid — это новое дополнение к CSS Grid, которое позволяет вложенным грид-элементам использовать шаблон строк и столбцов родительского грид-контейнера.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

Как работает Subgrid?

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

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

.parent {

display: grid;

grid-template-columns: 1fr 2fr;

grid-template-rows: auto;

}

.child {

display: grid;

grid-template-rows: subgrid;

}

В данном примере child наследует строки от parent, что позволяет сохранить консистентное выравнивание по вертикали.

Достижение вертикального выравнивания

Основные подходы к вертикальному выравниванию

1. Использование свойства align-items:
   • align-items: start — по верхнему краю.
   • align-items: center — по центру.
   • align-items: end — по нижнему краю.
2. Использование свойства justify-items:
   • Аналогично align-items, но для горизонтали.

Примеры Subgrid

Рассмотрим несколько примеров, как можно использовать его для достижения вертикального выравнивания.

Пример 1: по центру

.parent {

display: grid;

grid-template-rows: 100px 200px;

}

.child {

display: grid;

grid-template-rows: subgrid;

align-items: center;

}

В этом примере дочерние элементы будут по центру относительно строк родительской сетки.

Пример 2: по нижнему краю

.parent {

display: grid;

grid-template-rows: 150px 250px;

}

.child {

display: grid;

grid-template-rows: subgrid;

align-items: end;

}

Здесь дочерние элементы расположены по нижнему краю строк родительской сетки.

Преимущества

• Консистентность: позволяет дочерним элементам следовать тому же шаблону, что и родительский контейнер, обеспечивая визуальную согласованность.
• Гибкость: возможность легкого изменения макета без необходимости изменения структуры дочерних элементов.
• Простота: упрощение кода и снижение сложности разметки.

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

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

Таблица поддержки браузеров:

Практическое применение

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

HTML:

<div class="parent">

<header class="header">Header</header>

<main class="content">

<div class="content-item">Item 1</div>

<div class="content-item">Item 2</div>

<div class="content-item">Item 3</div>

</main>

<footer class="footer">Footer</footer>

</div>

CSS:

.parent {

display: grid;

grid-template-rows: auto 1fr auto;

height: 100vh;

}

.header, .footer {

grid-column: 1 / -1;

}

.content {

display: grid;

grid-template-rows: subgrid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

}

.content-item {

display: flex;

align-items: center;

justify-content: center;

background-color: #f0f0f0;

}

Адаптивность макета

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

@media (max-width: 600px) {

.content {

grid-template-columns: 1fr;

}

}

Таблица сравнения методов выравнивания

Заключение

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