Модні гнучкі макети з CSS Grid

Sep 16, 2025

Як

A woman sits at a laptop tweaking a CSS Grid layout

CSS Grid ідеально підходить для створення двох осі макетів рядків та стовпців. Синтаксис простий і робить макет сторінки вітерцем. Макети, які мали б, потрібно кілька вкладених контейнерів, тепер можуть бути просто описані в CSS.

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

Дістатися до рукояток з сіткою

Сітка приносить ряд нових функцій:

Сітка розрив

Замість того, щоб використовувати маржі, сітка має власну властивість для визначення проміжків між елементами сітки, що дозволяє визначити макет сітки та не підлягають будь-яким прогалин. Системи сітки (наприклад, ті, що знаходяться в інуїті та Twitter Bootstrap), зазвичай покладаються на встановлення негативних маржі, щоб вирівнювати все правильно.

Одиниця FR

Коротша для фракції ця нова одиниця виміру використовується для розщеплення макета в фракції, з розривом або без нього.

Розміщення сітки

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

Сітки та шаблони

Визначені підзначені ділянки на сітці, які потім можуть бути посилання на визначення макета в майже аскізі.

Мінмакс ()

Значення властивості "MinMax" () дозволяє застосувати мінімальний та максимальний розмір для елементів сітки, стовпчиків та рядків. Ця функція, на жаль, відсутня у FlexBox та будь-який інший модуль макета в CSS.

Побудуйте свої сітки

Потужні ділянки CSS Grid та шаблони дозволяють легко досягти складних макетів. Ви починаєте, застосувати назву елементам у вашій мережі за допомогою властивості "Grid-reare" - наприклад, заголовок "Grid-reare: заголовок"; } '. Після того, як ви назвали всі області у вашій мережі, ви можете використовувати властивість "Grid-шаблону" для опису макета.

 Грид-шаблон-області:
  "Заголовок заголовка заголовка"
  "Ліва бічна панель" Права бічна панель "
  "Нижній колонтитул нижнього колонтитула"

Приклад вище коду описує три-три-три сітці, ви просто повторіть назву елемента сітки, якщо ви хочете, щоб він збільшив кілька стовпців або рядків. Ви також можете використовувати Media-Queries, щоб змінити макет сітки для різних екранів різних розмірів.

Потім ви можете використовувати новий пристрій "FR", щоб визначити, як ширина розщеплена серед різних стовпчиків:

 Сітки-шаблони-стовпці: 1FR 3FR 1FR;

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

Для того, щоб розмістити рядки, ви можете використовувати нове значення властивості "Minmax", щоб розмістити верхню та нижню стовпці до їх вмісту, а потім дозволити середньому ряду, щоб охопити залишок місця в сітці.

 Грід-шаблон-ряди:
  minmax (min-content, max-content)
  автоматичний
minmax (min-content, max-content);

Ця стаття спочатку була опублікована у випуску 271 журналу Web Design Web Design. Купувати Випуск 271 або Підписатися на веб-дизайнер .

Хочете зміцнити свої навички CSS?

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — Brenda Storer дає їй розмову за допомогою CSS Grid в реальному світі на генерації Нью-Йорк з 25 - 27 квітня 2018 року

Як дизайнерський та фронт-розробник у агентстві з розробки програмного забезпечення Brenda Storer використовує CSS Grid у виробництві для веб-сайтів з моменту свого первинного випуску до браузерів у березні 2017 року та є великим вентилятором.

У її розмові Створіть Нью-Йорк з 25-27 квітня 2018 року , Brenda покаже крок-поступовим способом поступово покращити свій сайт з CSS Grid і написати куленепробивне загублення для старих браузерів (або навіть продовжувати використовувати поточну структуру сітки як загибель), всі з чистими CSS: не потрібно JavaScript .

Створити Нью-Йорк відбувається з 25-27 квітня 2018 року. Отримайте квиток зараз .

Пов'язані статті:

Розкрито секрети макету CSS Grid
Створіть реактивний макет з CSS Grid
Отримайте до швидкості з CSS Grid

Модні гнучкі макети з CSS Grid

Дістатися до рукояток з сіткою

Побудуйте свої сітки

Хочете зміцнити свої навички CSS?

Як - Найпопулярніші статті

Створіть ефект паралакса керування миші

Affinity Designer: Як використовувати ефекти та стилі

Створіть власний ботометр

Створити сторінку цільової сторінки WebGL

Як створити 3D перевертень у нереальному двигуні

Як малювати ніс

Як створити інтерфейс ChatBot

Як малювати яскравий квітковий натюрморт

Категорії