Створіть чутливий макет з CSS Grid

Sep 13, 2025

Як

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

Перед тим, як ми отримаємо реагування портфеля сайту з CSS Grid, давайте очистимо пару речей: CSS Grid не є заміною для Флекс . Це навіть не замість поплавців. Фактично, ви можете зрозуміти, що ми використовуємо FLEXBOX, щоб робити речі, які CSS Grid набагато краще. Але замість того, щоб мислити з точки зору заміни, ми можемо подумати з точки зору комбінації.

15 Дійсно корисний підручники веб-дизайну

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

Це те, що наше Макет веб-сайту Інструменти подібні. Вони чудові за речами, які вони роблять індивідуально, але коли вони поєднуються, магія трапляється, і ми можемо створювати нові та захоплюючі макети. У цьому випадку ми зробимо веб-розробку PB & amp; j з нашого власного з CSS Grid та Flexbox. Хочете ще більше спростити свій процес? Вибрати пристойний Веб-будівельник .

01. Налаштуйте свою розмітку

case study title repeated — Наш макет не виглядає як багато, але скелет з нашими шести пунктами на місці

У цьому підручнику ми збираємося використовувати CSS Grid та Flexbox разом, щоб створити чудовий портфельний макет. Кожен з цих ящиків - інший розмір, деякі з них проходять через рядки, і кожна коробка має назву, яка сидить у нижній частині. Ми будемо використовувати деякі з великих інструментів вирівнювання, які поставляються з FlexBox, щоб зробити це.

Почнемо з налаштування нашої розмітки.

 & lt; ul class = "boxes" & gt;
  & lt; li & gt;
    & lt; div class = "boxes__text-wrapper" & gt;
      & lt; h2 & gt; заголовок дослідження & lt; / h2 & gt;
      & lt; p & gt; помітний опис для нашого дослідження. Ми наполегливо працювали. & Lt; / p & gt;
    & lt; / div & gt;
  & lt; / li & gt;
& lt; / ul & gt;

Ми будемо дублюємо, що список списку і все в ньому шість разів, тому ми маємо елементи, з якими можна грати. У випадку, якщо вам цікаво, ми вирішили використовувати уль Елемент тут, тому що це список записів. Не соромтеся використовувати все, що відчуває себе.

Всередині елемента списку у нас є ділити з класом .XBoxes__Text-wrapper Це буде містити назву справи та його супровідний опис.

02. Напишіть базові стилі

case study title with different styling — Ми встановили наш шрифт до чогось трохи краще і видаляли маржу за замовчуванням від заголовків та абзаців

Тепер давайте встановимо деякі базові стилі для роботи.

 Тіло {
  Шрифт-Сім'я: Avenir, Sans-Serif;
  маржа: 2REM AUTO;
  Ширина: 95%;
}
H2,
р {
  маржа: 0;
}
ul {
  Стиль списку: немає;
  підкладка: 0;
  маржа: 0;
}
.boxes & gt; * {
  Підкладка: .5REM;
  Колір фону: # 333;
  Колір: білий;
}

Ми змінили шрифт, щоб бути Avenir. Ми вилучимо маржу з нашого заголовка та абзацу та скидання списку незареєстрованого. Ми також дамо кожному списку елемента Деякі стилі за замовчуванням, щоб допомогти нам побачити, де кожен є.

03. Налаштуйте свою сітку

case study title with gaps between them — З лише трьома лініями, ми додали жолоб між нашими елементами сітки і зробили їх трохи вище

Ми хочемо спочатку побудувати наш макет. Налаштування нашої сітки на невеликих екранах настільки ж легко, як це:

 .boxes {
  Дисплей: сітка;
  Grid-Auto-Rows: Minmax (125px, авто);
  GRID-GAP: .5REM;
}

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

Забудьте додати маржу до стовпців лише для потрібного складного утриманий селектори; Жюти з'являються лише між колонами або рядками, ніколи після або перед стовпцем або row.grid-gap є скороченням сітка-колонка-розрив і сітка-рядок-розрив . Зазвичай ми будемо використовувати Longhand, але ми збираємося перезаписати як браузер, тому ми будемо використовувати скорочення.

Далі ми будемо використовувати сітки-авто-ряди Щоб розповісти нашу сітку контейнеру висоту нових рядків. Grid створить нові рядки, щоб розмістити весь наш вміст. Ми можемо контролювати розмір цих автоматично створених рядків з сітки-авто-ряди майно. Ми використовуємо нову функцію, доступну для нас: Мінмакс () . З Мінмакс () Ми можемо вказати мінімальний розмір і максимальний розмір.

З нашим кодом ми кажемо, що ми хочемо, щоб наші ряди мали мінімум 120px і максимум автоматичного. Ми використовуємо Auto тут, тому що ми хочемо, щоб наші рядки ростуть, якщо вміст його гарантує.

04. Налаштуйте велику сумісність браузера

case study title in a row — Наша сітка сформувала! У нас є шість стовпчиків, щоб працювати з та менш жолобом між нашими елементами сітки

Давайте створимо нашу сторінку, щоб коли наш браузер 40EM або більший, наш сітковий контейнер має шість стовпців однієї фракції.

 Екран @Media та (Min-ширина: 40EM) {
  .boxes {
    Грид-шаблони-стовпці: повторити (6, 1FR);
    Grid-gap: 2px;
  }
}

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

Точний пл Нова одиниця, яку ми отримуємо з макетом CSS Grid. З ним ми можемо сказати браузер, щоб зробити математику замість нас - відмінно.

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

05. Стиль окремих предметів

case study title with an image behind — Кава робить все, що виглядає краще? Також тонкий градієнт робить наше назву та опис виділяються

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

 .boxes li {
  фонове зображення:
    Лінійно-градієнт (RGBA (0,0,0,0), RGBA (0,0,0,0,8)),
    URL (шлях / до / зображення);
  Розмір фон: обкладинка;
  Дисплей: Flex;
  Вирівнювання-елементи: гнучкий кінець;
}

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

06. Помістіть елементи на сітку

case study title with one image above and five below — Сітка дозволяє легко розміщувати наші елементи сітки, однак ми хотіли б. Але це лише початок

На жаль, Grid не має способу автоматичного розміщення елементів у макеті сітки, яку ми бачили на початку. На щастя, для нас, однак, сітка дає нам інструменти, щоб зробити це вручну досить легко. У цьому підручнику ми будемо використовувати Nth-Child, щоб розмістити кожен список списку. На веб-сайті виробництва ми радимо використовувати клас, який, з огляду на правильне планування, може дозволити вам автоматизувати макети, такі як у контенту-важкого сайту.

Давайте почнемо з нашим першим елементом.

 Екран @Media та (Min-ширина: 40EM) {
  .Boxes Li: Nth-Child (1) {
    сітка-колонка: 1 / -1;
    сітка-рядок: Span 3;
  }
}

Ми будемо поставити всі наші стилі розміщення всередині цього медіа-запиту, яку ми писали раніше, тому що ми хочемо, щоб цей макет стався після того, як наш браузер - це 40EM або більший. З утриманий Ми орієнтуємо елемент першого списку. CSS Grid дозволяє нам легко розміщувати наші предмети з сіткою-колоною та сіткою-рядом. Існує багато різних способів вказати, де предмети повинні бути, але тут ми говоримо наш елемент, щоб почати з лінії стовпця один і охоплює весь контейнер з -1.

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

Давайте розмістимо решту наших предметів.

Екран @Media і (Min-ширина: 40EM) {
  .Boxes Li: Nth-Child (2) {
    сітка-колонка: проміжок 2;
    сітка-рядок: Span 7;
  }

  .boxes Li: Nth-Child (3) {
    Grid-колонка: SPAN 4;
    сітка-рядок: Span 3;
  }

  .boxes li: nth-child (4) {
    сітка-колонка: проміжок 2;
    сітка-рядок: span 4;
  }

  .Boxes Li: Nth-Child (5),
  .Boxes Li: Nth-Child (6) {
    сітка-колонка: проміжок 2;
    Grid-Row: SPAN 2;
  }
}

Хіба це не дивовижна, скільки керує сіткою макета дає нам? Завдяки лише декількома рядках коду, ми можемо об'єднати абсолютно реагування макета, який не буде розірвати, якщо додаються більше елементів.

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

finished layout with different images in different places — Наш готовий макет! Хіба це не дивно? Grid дозволяє легко розміщувати наші елементи у двох вимірах

Швидкий бік про старі браузери

Добре, прийшов час звернутися до слона в кімнаті. "А як щодо старих браузерів?" Відповідь на це питання така ж, як і для будь-якої нової функції в CSS: використовувати функціональні запити та обійми каскаду. Особливі запити є дуже добре підтримується , і де вони не ми можемо покласти наш попадання. Наприклад, ми пишемо щось по лініях:

 .your-selector {
  Дисплей: Flex;
}

/ * Ваш код сітки * /
@Supports (дисплей: сітка) {
  Дисплей: сітка;
  Грид-шаблони-стовпці: повторити (3, 1FR);
  GRID-GAP: 1REM 2REM;
}

Написання нашого коду таким способом означає, що якщо браузер розуміє макет сітки, він буде використовувати це замість FlexBox. Крім того, тому що ми обіймаємо каскад, браузери, які не розуміють, що функціональні запити будуть ігнорувати їх, і вже мають необхідну їм інформацію. Нам, можливо, доведеться планувати, як ми пишемо наші стилі трохи більше, ніж зазвичай, але, виконавши це, ми можемо створювати чудові макети з розумними зниженнями. Якщо ви хочете зберегти старі сторінки, експортуйте їх як PDF-файли і зберегти їх хмара зберігання .

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

Ця стаття спочатку з'явилася чистий журнал , провідний журнал у світі для розробників та веб-дизайнерів. Підписатися тут .

Читати далі:

Розкрито секрети макету CSS Grid
30 веб-дизайну інструментів для прискорення вашого робочого процесу
Модні гнучкі макети з CSS Grid

Створіть чутливий макет з CSS Grid

01. Налаштуйте свою розмітку

02. Напишіть базові стилі

03. Налаштуйте свою сітку

04. Налаштуйте велику сумісність браузера

05. Стиль окремих предметів

06. Помістіть елементи на сітку

Швидкий бік про старі браузери

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

7 Найкращі поради для початку власного бізнесу

Використовуйте негативний простір, щоб зробити кращі руки

Як створити значок програми в Illustrator

Як малювати, як майстер 19-го століття

5 Речі, які вам потрібно для масляного живопису

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

Як створити барвисті світи, які розповідають історію

Що нового в кутових 4?

Категорії