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="ru">
<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, ещё не закончена.

Она просто уверена в себе в одной комнате.