Робочий метод вирівнювання в CSS Grid

Тема цієї публікації стосується вирівнювання контенту всередині пункту сітки CSS Grid. Як це можна вирішити простим методом і які методи центрування в CSS Grid не варто застосовувати ми також розглянемо на наочних прикладах.

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

Структура HTML контейнера grid має три рівні:

  • контейнер
  • пункт
  • контент

Кожен із цих рівнів є незалежним від інших з точки зору застосування властивостей сітки, а сфера дії контейнера сітки обмежена відносинами «батьківсько-дочірні». Це означає, що контейнер сітки завжди є батьківським, а елемент сітки завжди є дочірнім. Властивості сітки працюють лише в межах цього відношення. Нащадки контейнера сітки за межами дочірніх елементів не є частиною макета сітки та не прийматимуть властивості сітки. (Принаймні, поки не буде реалізовано функцію subgrid, яка дозволить нащадкам елементів сітки поважати лінії основного контейнера.)

Давайте розглянемо приклад структури та понять, описаних вище.

Зробимо сітку з 9 клітинок – 3 клітинки по горизонталі і 3 клітинки по вертикалі, або іншими словами 3 колонки і 3 рядки.

Для цього використаємо код HTML

 <main>
 <figure>1</figure>
 <figure>2</figure>
 <figure>3</figure>
 <figure>4</figure>
 <figure>5</figure>
 <figure>6</figure>
 <figure>7</figure>
 <figure>8</figure>
 <figure>9</figure>
</main>

Та CSS код

* { box-sizing: border-box; margin:0;}
main {
display:grid;
grid-template-columns:200px 200px 200px;
grid-template-rows:200px 200px 200px;
grid-gap: 0.2em;
}
figure {
display:grid;
border: 3px solid red;
border-radius: 5px;
font-size:4em;
background-color:yellow;
}
css grid 9x9

Сітка css grid 9×9

Ми отримали сітку, але нам потрібно, щоб цифри були в центрі кожної клітинки.

Надалі я буду використовувати лише частини коду, представленого вище, у яких буду робити зміни.

Спочатку розглянемо варіанти, які не варто випробовувати.

Отже, перше, що нам спадає на думку – це застосовати центрування на рівні контейнера:

main {
display:grid;
grid-template-columns:200px 200px 200px;
grid-template-rows:200px 200px 200px;
grid-gap: 0.2em;
justify-items: center;
}

Але через структуру та обсяг макета сітки justify-items:center в центрі контейнера розташовані елементи сітки, а не вміст (принаймні, не безпосередньо). Тому отримуємо наступний результат:

css grid 9x9 justify-items center

css grid 9×9 justify-items: center

Та сама проблема виникне з align-items:center вміст може бути відцентрованим як побічний результат (дія знову відбулася над елементами сітки), але ми повністю втратили дизайн початкового макета.

main {
display:grid;
grid-template-columns:200px 200px 200px;
grid-template-rows:200px 200px 200px;
grid-gap: 0.2em;
justify-items: center;
align-items: center;
}
css grid 9x9 align-items: center

css grid 9×9 align-items: center

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

Для простого та легкого способу центрування вмісту елементів сітки ми використаємо flexbox. Точніше, перетворимо елемент сітки на гнучкий контейнер.

З цим методом немає конфлікту, порушення специфікацій чи інших проблем. Він чистий і дійсний.

figure {
display: flex;
justify-content: center;
align-items: center;
border: 3px solid red;
border-radius: 5px;
font-size:4em;
background-color:yellow;
}
css grid 9x9 figure display flex

css grid 9×9 figure display:flex

Ось таким чином ми отримали просте та елегантне рішення, яке дозволяє вирівняти контент всередині пункту сітки CSS Grid.

Використані джерела:

Це рішення я підглянув на Stack Overflow Centering in CSS Grid.

Іллюстрації і код я змінив на власний для проведення занять з учнями з основ веб розробки. Код випробовувався за допомогою онлайн редактора коду «Practice»

Це звичайно не єдине рішення, але доволі цікаве.

Бажаю успішного кодування!

Залишити відповідь