CSS Subgrid: Розкриття потужності вкладених макетів

CSS Grid здійснив революцію у веб-верстці, запропонувавши неперевершену гнучкість і контроль. Однак керування вкладеними сітками іноді може стати громіздким. Саме тут на допомогу приходить CSS Subgrid. Subgrid дозволяє елементу сітки успадковувати розміри треків від батьківської сітки, спрощуючи складні макети та роблячи ваш код більш зручним у підтримці. Ця стаття надає вичерпний посібник з розуміння та впровадження CSS Subgrid, доповнений практичними прикладами та порадами для розробників усіх рівнів.

Що таке CSS Subgrid?

Subgrid — це функція CSS Grid, яка дозволяє елементу сітки самому стати сіткою, успадковуючи треки рядків і стовпців, визначені батьківською сіткою. Це означає, що ви можете вирівнювати контент у кількох вкладених сітках, не визначаючи явно розміри треків у кожній вкладеній сітці. Уявляйте це як спосіб розширити структуру батьківської сітки на її дочірні елементи, створюючи більш цілісний та послідовний макет.

Навіщо використовувати Subgrid?

Спрощені макети: Subgrid зменшує складність вкладених сіток, роблячи ваш CSS-код чистішим і зрозумілішим.
Послідовне вирівнювання: Легко вирівнюйте контент на кількох рівнях вкладеності, забезпечуючи візуально привабливий та професійний дизайн.
Покращена підтримка: Зміни в батьківській сітці автоматично поширюються на підсітки, зменшуючи потребу в ручних коригуваннях у кількох місцях.
Покращена адаптивність: Subgrid бездоганно працює з принципами адаптивного дизайну, пристосовуючи макети до різних розмірів екрана без порушення верстки.

Сумісність з браузерами

Перш ніж занурюватися у впровадження, важливо перевірити сумісність з браузерами. Станом на кінець 2023 року, Subgrid має хорошу підтримку в сучасних браузерах, включаючи Chrome, Firefox, Safari та Edge. Однак, завжди корисно використовувати Can I use для перевірки останнього статусу підтримки.

Базове впровадження Subgrid

Почнемо з простого прикладу, щоб проілюструвати фундаментальні концепції Subgrid.

HTML-структура

Спочатку визначимо базову HTML-структуру для нашої сітки.


<div class="container">
  <div class="header">Верхній колонтитул</div>
  <div class="sidebar">Бічна панель</div>
  <div class="content">
    <div class="item-1">Елемент 1</div>
    <div class="item-2">Елемент 2</div>
    <div class="item-3">Елемент 3</div>
    <div class="item-4">Елемент 4</div>
  </div>
  <div class="footer">Нижній колонтитул</div>
</div>

CSS-стилі

Тепер визначимо CSS для створення батьківської сітки та підсітки всередині елемента .content.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Визначення розміщення елементів усередині підсітки .content */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

У цьому прикладі елемент .content визначено як підсітку. Властивості grid-template-columns: subgrid; та grid-template-rows: subgrid; вказують підсітці успадковувати розміри треків від батьківської сітки. Область контенту тепер відповідає розмірам треків, визначеним у головній сітці-контейнері, без потреби в явних налаштуваннях для самої підсітки. Це забезпечує ідеальне вирівнювання між бічною панеллю та елементами всередині області контенту.

Просунуті техніки Subgrid

Охоплення треків

Subgrid також дозволяє елементам усередині підсітки охоплювати кілька треків, так само як у звичайній сітці. Це надає ще більшу гнучкість у створенні складних макетів.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Цей код змусить .item-1 охопити перші два стовпці підсітки.

Іменовані лінії сітки

Ви можете використовувати іменовані лінії сітки з Subgrid для ще більшої ясності та контролю. Припустимо, у вашій батьківській сітці є іменовані лінії:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

Тоді ви можете посилатися на ці іменовані лінії у вашій підсітці:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

Обробка неявних треків

Якщо кількість елементів сітки перевищує кількість визначених треків у батьківській сітці, Subgrid створить неявні треки. Ви можете контролювати розмір цих неявних треків за допомогою властивостей grid-auto-rows та grid-auto-columns, аналогічно до звичайного CSS Grid.

Практичні приклади та сценарії використання

Розгляньмо кілька практичних прикладів того, як Subgrid можна використовувати для створення складних макетів.

Складний список товарів

Уявіть собі список товарів, де ви хочете відобразити кілька деталей продукту (зображення, назву, опис, ціну) послідовно та вирівняно. Subgrid може легко допомогти досягти цього.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Товар 1">
    <h3>Назва товару 1</h3>
    <p>Опис товару 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Товар 2">
    <h3>Назва товару 2</h3>
    <p>Опис товару 2.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

У цьому прикладі елементи .product використовують Subgrid для послідовного вирівнювання зображення, назви, опису та ціни для всіх товарів, навіть якщо довжина їхнього контенту різна. Це забезпечує чистий та професійний вигляд.

Журнальна верстка

Створення макетів у журнальному стилі з різними блоками контенту може бути складним завданням. Subgrid спрощує цей процес, дозволяючи вирівнювати елементи в різних секціях макета.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Заголовок головної статті</h2>
    <p>Контент головної статті...</p>
  </div>
  <div class="sidebar-article">
    <h3>Заголовок статті в бічній панелі</h3>
    <p>Контент статті в бічній панелі...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Рекомендоване зображення">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

У цьому прикладі головна стаття, стаття в бічній панелі та рекомендоване зображення мають спільну структуру сітки, що забезпечує послідовне вирівнювання заголовків та контенту в різних секціях. Використання Subgrid спрощує CSS і робить макет більш зручним у підтримці.

Макети форм

Створення складних макетів форм з вирівняними мітками та полями введення може бути непростим. Subgrid пропонує просте рішення.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Ім'я:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Повідомлення:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Визначення розмірів треків у батьківській сітці */
    gap: 10px;
}

Тут елементи .form-row використовують Subgrid для послідовного вирівнювання міток і полів введення у всіх рядках. Розміри треків визначаються в батьківській сітці (.form-grid), що забезпечує однаковий вигляд.

Найкращі практики та рекомендації

Почніть з міцної основи Grid: Перед впровадженням Subgrid переконайтеся, що ваша батьківська сітка добре визначена та адаптивна.
Використовуйте іменовані лінії сітки: Іменовані лінії сітки покращують читабельність та зручність підтримки, особливо у складних макетах.
Ретельно тестуйте: Тестуйте ваші макети з Subgrid у різних браузерах та на різних пристроях, щоб забезпечити послідовне відображення.
Враховуйте доступність: Переконайтеся, що ваші макети з Subgrid доступні для користувачів з обмеженими можливостями, використовуючи семантичний HTML та надаючи відповідні ARIA-атрибути.
Не зловживайте Subgrid: Хоча Subgrid є потужним інструментом, він не завжди є найкращим рішенням. Розгляньте простіші альтернативи, такі як Flexbox або звичайний Grid, для менш складних макетів.

Subgrid проти звичайного CSS Grid

Хоча і Subgrid, і CSS Grid є потужними інструментами для верстки, вони служать різним цілям. Звичайний CSS Grid ідеально підходить для створення загальних макетів сторінок та визначення базової структури вашого контенту. Subgrid, з іншого боку, найкраще підходить для керування вкладеними макетами та вирівнювання контенту на кількох рівнях вкладеності. Вважайте Subgrid розширенням CSS Grid, яке спрощує складні сценарії верстки.

Вирішення поширених проблем

Subgrid не працює: Перевірте сумісність з браузером і переконайтеся, що ви увімкнули Subgrid, встановивши grid-template-columns: subgrid; та/або grid-template-rows: subgrid; на елементі підсітки.
Проблеми з вирівнюванням: Переконайтеся, що розміри треків у вашій батьківській сітці визначені правильно, і що елементи підсітки коректно розташовані за допомогою grid-column та grid-row.
Неочікувані збої макета: Тестуйте ваш макет на різних розмірах екрана, щоб виявити та виправити будь-які проблеми з адаптивним дизайном.

Висновок

CSS Subgrid — це цінне доповнення до інструментарію CSS Grid, що пропонує потужний спосіб керування складними вкладеними макетами та створення візуально привабливих, зручних у підтримці та адаптивних веб-дизайнів. Розуміючи фундаментальні концепції та вивчаючи практичні приклади, ви можете використовувати Subgrid для створення складних макетів, які раніше було важко або неможливо досягти за допомогою традиційних технік CSS. Використовуйте Subgrid і відкривайте нові можливості у своїх проектах веб-розробки. Subgrid дозволяє вам по-справжньому розширити можливості CSS grid на вкладені елементи, забезпечуючи більший контроль та зручність підтримки коду. Експериментуйте з ним і досліджуйте переваги у спрощенні складних CSS-макетів.

MLOG