InnoMarts logo
InnoMarts
Fast websites
← Back to course

Layout з CSS Grid

Layout з CSS Grid

З поверненням.

У попередньому уроці ти вивчив Flexbox.

Flexbox чудово підходить для організації елементів в одному напрямку.

Rows.

Columns.

Centered things.

Життя стало трохи менш хаотичним.

Тепер ми знайомимося з CSS Grid.

Grid потрібен для two-dimensional layouts.

Тобто для rows і columns одночасно.

Flexbox — це ніби розставити стільці в одну лінію.

Grid — це ніби спланувати всю кімнату.

Стіни.

Столи.

Вікна.

І той один стілець, який ніхто не знає куди поставити.

Grid дає тобі серйозний контроль над layout.

І так, спочатку він може виглядати трохи страшно.

Але без паніки.

Grid — не монстр.

Це просто дуже організована таблиця з кращим почуттям стилю.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

Що Таке CSS Grid?

CSS Grid — це layout system для організації елементів у rows і columns.

Він допомагає створювати:

Flexbox найкращий для одного напрямку.

Grid найкращий для двох напрямків.

Приклад:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Це створює три рівні columns.

Кожен 1fr означає одну частину доступного простору.

CSS сам робить математику.

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

Grid vs Flexbox

Використовуй Flexbox, коли потрібен один напрямок:

Використовуй Grid, коли потрібні rows і columns:

Flexbox каже:

“Дай мені розставити ці елементи в одну лінію.”

Grid каже:

“Дай мені весь план кімнати.”

Обидва корисні.

Жоден не є магією.

Але Grid іноді виглядає як магія, коли layout нарешті перестає з тобою битися.

Створи Проєкт

Створи папку для цього уроку:

mkdir css-lesson6
cd css-lesson6
touch index.html
touch style.css

Ти маєш отримати:

css-lesson6/
  index.html
  style.css

Відкрий папку у своєму editor.

Ми побудуємо сторінку з course cards.

Вона матиме:

Проста ідея.

Дуже корисний pattern.

Ти будеш використовувати такий layout всюди.

Courses.

Blog posts.

Services.

Portfolio projects.

Навіть pizza menu, якщо піца серйозно ставиться до frontend architecture.

Напиши HTML

Відкрий index.html і додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout з CSS Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Layout з CSS Grid</h1>
    <p>Будуй чисті rows і columns без втрати душевного спокою.</p>
  </header>

  <main class="page">
    <section class="intro">
      <h2>Теми Курсу</h2>
      <p>
        CSS Grid допомагає створювати потужні two-dimensional layouts за допомогою rows і columns.
      </p>
    </section>

    <section class="course-grid">
      <article class="course-card">
        <h2>HTML Basics</h2>
        <p>Вивчи структуру веб-сторінок.</p>
      </article>

      <article class="course-card">
        <h2>CSS Styling</h2>
        <p>Зроби сторінки читабельними, чистими і красивими.</p>
      </article>

      <article class="course-card">
        <h2>Flexbox</h2>
        <p>Вирівнюй елементи в rows або columns.</p>
      </article>

      <article class="course-card">
        <h2>CSS Grid</h2>
        <p>Будуй layouts з rows і columns одночасно.</p>
      </article>

      <article class="course-card">
        <h2>Responsive Design</h2>
        <p>Зроби сайти зручними на різних screen sizes.</p>
      </article>

      <article class="course-card">
        <h2>Animations</h2>
        <p>Додай плавний рух і interactive effects.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Створено під час вивчення CSS Grid.</p>
  </footer>
</body>
</html>

Це дає нам шість cards.

Без CSS вони будуть одна під одною.

Це нормально.

HTML робить свою роботу.

Тепер CSS Grid заходить з планшетом і каже:

“Давайте це організуємо.”

Почни з Базових Стилів

Відкрий style.css і додай:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

Це створює простий header.

Тепер додай page container:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

Це центрує main content і обмежує його ширину.

Layout без max width може стати занадто широким.

А дуже широкий текст боляче читати.

Ніби речення біжить марафон через увесь monitor.

Створи Grid Container

Щоб створити grid, використовуй:

display: grid;

Додай це:

.course-grid {
  display: grid;
}

Тепер .course-grid стає grid container.

Direct children стають grid items.

У нашому випадку кожен .course-card стає grid item.

Але поки що нічого дуже драматичного не сталося.

Ми створили grid container.

Тепер треба визначити columns.

CSS чекає інструкцій.

Як дуже строгий assistant без фантазії.

Визнач Columns

Для визначення columns використовуй grid-template-columns.

Додай це:

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Це створює три columns.

Кожна column отримує однакову частину доступного простору.

fr означає fraction.

Тобто це:

grid-template-columns: 1fr 1fr 1fr;

означає:

Поділи доступний простір на три рівні частини.

Тепер у тебе є three-column grid.

CSS не поскаржився.

Рідкісний і красивий момент.

Unit fr

fr unit означає частину доступного простору.

Приклад:

grid-template-columns: 1fr 2fr;

Це створює дві columns.

Друга column удвічі ширша за першу.

Приклад:

grid-template-columns: 1fr 1fr 1fr;

Це створює три рівні columns.

fr дуже корисний, бо адаптується до доступного простору.

Тобі не потрібно писати:

width: 33.333333%;

Це число виглядає так, ніби spreadsheet отримав головний біль.

Використовуй fr.

Чистіше.

Дружніше.

Менш підозріло.

Додай Gap Між Grid Items

Зараз cards можуть бути занадто близько.

Додай gap:

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

gap створює простір між rows і columns.

Це чистіше, ніж вручну додавати margins кожній card.

Хороший spacing робить layout читабельним.

Поганий spacing робить сторінку схожою на людей, які стоять занадто близько в elevator.

Ніхто цього не хоче.

Навіть твої cards.

Стилізуй Cards

Додай це:

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Тепер cards виглядають як справжні cards.

White background.

Padding.

Border.

Rounded corners.

Спокійний організований layout.

Без криків.

Без хаосу.

Тільки organized boxes, чого CSS таємно хотів від самого початку.

Стилізуй Intro Section

Додай це:

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

Intro section тепер має:

Це common pattern.

Highlighted intro box.

Просто.

Зрозуміло.

Не намагається стати цирком.

Добре.

Використовуй repeat

Писати так нормально:

grid-template-columns: 1fr 1fr 1fr;

Але CSS дає нам чистішу версію:

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

Це означає:

Створи 3 columns, кожна шириною 1fr.

Онови .course-grid:

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Так легше читати.

Особливо коли columns більше.

Наприклад:

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

Чотири рівні columns.

Просто.

Елегантно.

CSS на мить одягнув костюм.

Fixed і Flexible Columns

Можна комбінувати fixed і flexible columns.

Приклад:

grid-template-columns: 250px 1fr;

Це створює:

Приклад:

grid-template-columns: 200px 1fr 1fr;

Це створює:

Це корисно для dashboards або layouts з sidebar.

Але для simple cards repeat(3, 1fr) ідеально.

Не ускладнюй без потреби.

CSS і так має достатньо місць, де може сховати trouble.

Grid Rows

Grid також може визначати rows.

Приклад:

grid-template-rows: auto auto;

Але часто rows створюються автоматично.

У нашому card grid ми визначаємо columns.

Browser створює rows, коли потрібно.

Six cards.

Three columns.

Result:

Дуже зручно.

Browser робить нудну частину.

Ми дозволяємо.

Cards з Однаковою Висотою

Grid items в одному row за замовчуванням природно розтягуються до однакової висоти.

Це означає: якщо одна card має більше тексту, row все одно може виглядати рівно.

Це одна з причин, чому Grid чудово підходить для cards.

Пізніше можна організувати content всередині кожної card за допомогою Flexbox.

Так, Flexbox і Grid можуть працювати разом.

Вони не вороги.

Вони coworkers.

Іноді дивні coworkers.

Але все одно coworkers.

Responsive Grid Problem

Наш grid має три columns:

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

На desktop це виглядає добре.

Але на маленькому phone screen три columns можуть стати занадто вузькими.

Cards страждають.

Text страждає.

Users страждають.

А потім усі звинувачують CSS.

Тому нам потрібен responsive design.

Ми нормально вивчимо responsive design у наступному уроці, але вже зараз можемо зробити просте покращення.

Простий Responsive Grid

Додай це в кінець CSS:

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

Це означає:

Тепер layout адаптується.

Cards можуть дихати.

Phone не плаче.

Good responsive behavior.

Дуже важливо.

Повний CSS

Твій style.css має виглядати так:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

Збережи.

Онови.

Зміни розмір browser.

Подивись, як grid змінюється.

Three columns.

Two columns.

One column.

Це CSS Grid робить серйозну роботу.

Тихо.

Як professional, якому не потрібні аплодисменти, але точно потрібна кава.

Типові Помилки

Забути display grid

Неправильно:

.course-grid {
  grid-template-columns: repeat(3, 1fr);
}

Правильно:

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Без display: grid grid properties нічого не роблять.

CSS просто проігнорує твої прекрасні плани.

Холодно.

Але передбачувано.

Робити Занадто Багато Columns

Це може виглядати нормально на величезному screen:

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

Але на менших screens стає нечитабельно.

Не змушуй layout мати занадто багато columns.

Layout має служити content.

А не стискати його, як валізу перед дешевим рейсом.

Забути gap

Grid без gap може виглядати переповнено.

Краще:

.course-grid {
  display: grid;
  gap: 24px;
}

Spacing має значення.

Твоєму content потрібен простір.

Твоєму мозку теж.

Практика

Створи сторінку з:

Використай CSS Grid, щоб створити:

Використай:

Зміни кількість cards.

Спробуй 4.

Спробуй 8.

Спробуй 10.

Подивись, як Grid автоматично створює rows.

Browser робить layout work за тебе.

Дозволь йому.

Саме для цього й існують tools.

Міні-Завдання

Створи project gallery.

Кожна card має мати:

Використай Grid, щоб показати projects у трьох columns.

Зроби одну card special через class:

<article class="project-card featured">

Потім стилізуй її інакше:

.featured {
  border-color: #2563eb;
}

Спробуй зробити grid responsive.

Це реальний portfolio pattern.

Ти можеш використати його для своїх projects.

І так, тепер твої projects можуть стояти в rows, як дисципліновані маленькі soldiers.

Frontend soldiers.

With border radius.

Підсумок

Сьогодні ти дізнався, що:

Grid потужний.

Flexbox усе ще корисний.

Вони працюють разом.

Використовуй Flexbox для одного напрямку.

Використовуй Grid для rows і columns.

Використовуй обидва, коли потрібно.

Це не cheating.

Це frontend wisdom.

Наступний Урок

У наступному уроці ми вивчимо responsive design.

Бо сторінка, яка виглядає добре тільки на твоєму laptop, ще не завершена.

Вона просто впевнена в собі в одній кімнаті.