0Pricing
CSS Academy · Урок

Неявная сетка и Grid-Auto-Flow

Узнайте, как CSS Grid обрабатывает элементы за пределами явно заданных дорожек с помощью неявных строк и столбцов.

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

Явная и неявная сетка

Явная сетка задаётся с помощью grid-template-columns и grid-template-rows. Когда элементы выходят за пределы определённых треков, браузер автоматически создаёт неявные треки.

grid-auto-rows

Задаёт размер неявно созданных треков строк. Без этого свойства неявные строки получают размер по содержимому (auto).

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

grid-auto-rows с minmax

Задайте неявным строкам минимальную высоту, которую можно увеличивать:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Задаёт размеры неявных треков столбцов, когда элементы размещаются за пределами диапазона явных столбцов:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Управляет тем, как алгоритм автоматического размещения распределяет элементы:

  • row (по умолчанию) — размещать по строкам, добавляя новые строки при необходимости
  • column — размещать по столбцам, добавляя новые столбцы
  • row dense — активно заполнять пропуски, возвращаясь к предыдущим позициям
  • column dense — плотно заполнять сетку в направлении столбцов

grid-auto-flow: dense

dense заставляет алгоритм пытаться заполнить пустоты, оставленные элементами, охватывающими несколько треков. Из-за этого элементы могут отображаться не по порядку.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Шаблон автоматического размещения по столбцам

Горизонтальная лента карточек с прокруткой, в которой столбцы добавляются по мере необходимости:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Плотная упаковка для галереи

Фотогалерея со смешанными размерами элементов, заполняющая пропуски:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Неявная сетка и именованные области

Именованные области применяются только к явной сетке. Элементы, размещённые в неявной сетке, не могут напрямую использовать размещение по именованной области — для них требуется размещение по номеру линии или с помощью span.

Визуализация неявной сетки

В DevTools Chrome наложение раскладки показывает как явные (сплошные), так и неявные (пунктирные) линии сетки. Это помогает понять, где оказываются элементы, размещённые автоматически.

Управление размером неявной сетки для каждого элемента

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

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

Что делает grid-auto-flow: row dense?

Повторение

Неявная сетка расширяет явную сетку автоматически созданными треками. Свойства grid-auto-rows/columns управляют их размером, а minmax() делает их гибкими. Свойство grid-auto-flow задаёт направление размещения. Плотная упаковка с dense активно заполняет пропуски — это полезно для раскладок в стиле каменной кладки, но может нарушить визуальный порядок.

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

Урок «Неявная сетка и Grid-Auto-Flow» бесплатный?

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

Чему я научусь в уроке «Неявная сетка и Grid-Auto-Flow»?

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

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

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

Сколько времени занимает урок «Неявная сетка и Grid-Auto-Flow»?

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

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

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

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

  1. Именованные линии и области сетки
  2. Auto-fit и auto-fill с minmax
  3. Неявная сетка и Grid-Auto-Flow
  4. Subgrid для выравнивания вложенного содержимого
← Назад к CSS Academy