CSS Academy · Урок

Промежутки и размещение в сетке

Добавляйте расстояние между ячейками сетки с помощью gap и размещайте элементы через grid-column и grid-row.

«Промежутки и размещение в сетке» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Интервалы в CSS Grid

Свойство gap задаёт пространство между строками и столбцами сетки. Оно заменяет устаревшее свойство grid-gap и также работает во флексбоксе.

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

row-gap и column-gap

Задавайте интервалы между строками и столбцами независимо:

<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

Номера линий сетки

CSS Grid нумерует свои линии, начиная с 1. В сетке из 3 столбцов линии столбцов имеют номера 1, 2, 3 и 4. Отрицательные номера отсчитываются с конца: -1 — последняя линия, -2 — предпоследняя.

grid-column и grid-row

Размещайте элементы вручную, используя номера линий и свойства grid-column и grid-row:

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
  <div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
  <div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>

Ключевое слово span

Используйте span, чтобы указать, сколько треков должен занимать элемент, вместо абсолютных номеров линий:

<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

Отрицательные номера линий

Отрицательные индексы отсчитываются с конца. 1 / -1 всегда растягивает элемент на всю ширину сетки независимо от количества столбцов:

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>

Сокращённая запись grid-area

grid-area задаёт все четыре значения размещения в сетке одним свойством: row-start / column-start / row-end / column-end.

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
  <div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

Автоматическое размещение

Элементы, которые не были размещены явно, автоматически помещаются в следующую доступную ячейку согласно алгоритму grid-auto-flow. По умолчанию браузер заполняет ячейки слева направо, сверху вниз.

justify-items и align-items в сетке

В контейнере сетки justify-items выравнивает содержимое ячеек по горизонтали, а align-items — по вертикали. По умолчанию оба свойства имеют значение stretch.

<div class="grid" style="min-height:120px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>

justify-self и align-self

Отдельные элементы сетки могут переопределить выравнивание контейнера с помощью свойств justify-self и align-self:

<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
  <div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>

Перекрывающиеся элементы сетки

Несколько элементов могут занимать одну и ту же ячейку сетки. Используйте z-index, чтобы управлять тем, какой элемент отображается поверх остальных. Это позволяет создавать многослойные дизайны, например изображение с текстом поверх него.

<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
  <div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
  <div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>

Быстрая проверка

Элемент имеет свойство grid-column: 2 / span 3. Какие столбцы он занимает в сетке из 5 столбцов?

Итоги

gap добавляет промежутки между ячейками сетки. Элементы размещаются с помощью номеров линий и свойств grid-column и grid-row. Ключевое слово span указывает, сколько треков нужно занять. Используйте 1 / -1, чтобы всегда растянуть элемент на все столбцы. Элементы сетки могут перекрываться с помощью z-index.

Часто задаваемые вопросы

Урок «Промежутки и размещение в сетке» бесплатный?

Да — полный текст урока «Промежутки и размещение в сетке» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Промежутки и размещение в сетке»?

Добавляйте расстояние между ячейками сетки с помощью gap и размещайте элементы через grid-column и grid-row. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Промежутки и размещение в сетке»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy