0Pricing
CSS Academy · Урок

Display Grid и шаблоны столбцов и строк

Включайте CSS Grid и определяйте дорожки столбцов и строк с помощью grid-template-columns и grid-template-rows.

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

Включение CSS Grid

CSS Grid активируется заданием display: grid для контейнера. Его непосредственные дочерние элементы автоматически становятся элементами сетки и размещаются в ячейках.

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>

grid-template-columns

grid-template-columns определяет количество и размеры столбцов. Каждое значение создаёт одну дорожку столбца.

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

grid-template-rows

grid-template-rows определяет явные дорожки строк. Элементы, выходящие за пределы заданных строк, создают неявные строки.

<div class="layout" style="min-height:220px;">
  <div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
  <div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>

Дорожки столбцов и строк

Каждое значение в grid-template-columns или grid-template-rows создаёт одну дорожку. Для дорожек можно использовать любую единицу размера:

  • Фиксированные: 200px, 10rem
  • Гибкие: 1fr
  • Зависящие от содержимого: auto, min-content, max-content

Единица fr

fr (дробная единица) распределяет доступное пространство после вычитания фиксированных размеров. 1fr 2fr создаёт столбцы в соотношении 1:2.

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>

auto в треках

auto для трека подбирает размер по содержимому. В качестве столбца он занимает минимальную ширину, необходимую для самой широкой ячейки; в качестве строки — высоту, достаточную для самой высокой ячейки.

<div class="sidebar-layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>

Пример макета страницы

Распространённый макет страницы с тремя строками — шапкой, основным содержимым и подвалом:

<div class="page">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
  <footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>

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

grid-template объединяет строки и столбцы:

<div class="grid" style="display:grid;min-height:180px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>

Проверка сетки в DevTools

DevTools в Chrome и Firefox могут накладывать линии треков сетки на страницу. Нажмите значок сетки на панели Elements, чтобы визуализировать столбцы, строки, интервалы и именованные области.

Выбор между сеткой и флексбоксом

Используйте сетку, когда нужно одновременно управлять строками и столбцами. Используйте флексбокс для одномерных макетов — строки элементов или столбца элементов. Во многих макетах применяются оба подхода.

Номера линий

Сетка автоматически нумерует свои линии, начиная с 1. На эти номера можно ссылаться, чтобы вручную размещать элементы. Линии столбцов нумеруются от 1 до n+1, где n — количество столбцов.

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

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

Что создаёт grid-template-columns: 200px 1fr 2fr?

Итоги

display: grid создаёт контейнер сетки. grid-template-columns и grid-template-rows определяют треки. Единица fr пропорционально распределяет оставшееся пространство. auto подбирает размер по содержимому. Сетка идеально подходит для управления двумерными макетами.

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

Урок «Display Grid и шаблоны столбцов и строк» бесплатный?

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

Чему я научусь в уроке «Display Grid и шаблоны столбцов и строк»?

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

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

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

Сколько времени занимает урок «Display Grid и шаблоны столбцов и строк»?

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

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

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

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

  1. Display Grid и шаблоны столбцов и строк
  2. Единица fr и Repeat
  3. Промежутки и размещение в сетке
  4. Области шаблона сетки
← Назад к CSS Academy