CSS Grid для компоновки
Определяйте строки и столбцы с помощью CSS Grid, точно размещайте элементы и создавайте распространённые компоновки страниц с минимальным объёмом кода.
«CSS Grid для компоновки» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое CSS Grid
CSS Grid — это двумерная система раскладки, в которой вы управляете и строками, и столбцами. Это лучший инструмент для общей структуры страницы и явного размещения элементов в заданной сетке.
Определение столбцов сетки
grid-template-columns определяет структуру столбцов. Используйте фиксированные размеры (px), гибкие доли (fr) или auto. repeat(n, size) повторяет определение дорожки.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}Единица fr
fr (доля пространства) пропорционально распределяет оставшееся место. Запись 1fr 2fr даёт второму столбцу вдвое больше места, чем первому. Это необходимо для гибких дорожек сетки.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Определение строк сетки
Строки тоже можно определить явно. Если этого не сделать, браузер автоматически создаст неявные строки. Размер неявных строк задаётся с помощью grid-auto-rows: minmax(200px, auto).
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}Промежутки в сетке
Как и во флексбоксе, gap добавляет пространство между дорожками сетки, не затрагивая внешние края. row-gap и column-gap управляют осями раздельно.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}Именованные области сетки
Назовите области сетки с помощью строк и назначьте элементы этим областям через grid-area. Так код раскладки становится наглядным и понятным.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Размещение элементов с помощью столбцов и строк сетки
Точно управляйте расположением элемента с помощью grid-column: start / end и grid-row: start / end. Используйте -1, чтобы обратиться к последней линии. Запись span N охватывает N дорожек.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit и minmax() — адаптивные столбцы
Самая мощная однострочная запись для адаптивной сетки: repeat(auto-fit, minmax(280px, 1fr)). Она создаёт столько столбцов, сколько помещается, каждый шириной не менее 280 пикселей, и заполняет оставшееся пространство с помощью 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill и auto-fit
auto-fill создаёт дорожки, даже если они пусты, сохраняя фиксированную сетку. auto-fit сворачивает пустые дорожки, поэтому элементы расширяются и заполняют строку. Используйте auto-fit для содержимого, которое должно растягиваться.
Неявная и явная сетка
Дорожки, которые вы определяете, образуют явную сетку. Когда элементов становится больше, чем заданных дорожек, браузер создаёт неявные дорожки. Управляйте их размером с помощью grid-auto-rows и grid-auto-columns.
Grid и флексбокс — когда что использовать
Grid подходит для двумерных макетов, структуры страниц, галерей и панелей управления. Флексбокс — для одномерных строк или стопок, центрирования и распределения элементов в строке. Они дополняют друг друга: используйте Grid для каркаса страницы, а флексбокс — для внутреннего устройства компонентов.
Быстрая проверка
Какое значение CSS создаёт столбцы шириной не менее 250 пикселей и равномерно распределяет оставшееся пространство?
Повторение: CSS Grid
Свойство grid-template-columns определяет столбцы. Единица fr распределяет пространство. repeat() упрощает повторение. gap добавляет промежутки. grid-template-areas делает раскладки понятными. Сочетание auto-fit и minmax создаёт адаптивные сетки без медиазапросов. Grid — основной инструмент для двумерных макетов страниц.
Часто задаваемые вопросы
Урок «CSS Grid для компоновки» бесплатный?
Да — полный текст урока «CSS Grid для компоновки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «CSS Grid для компоновки»?
Определяйте строки и столбцы с помощью CSS Grid, точно размещайте элементы и создавайте распространённые компоновки страниц с минимальным объёмом кода. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «CSS Grid для компоновки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Мета-тег viewport
- Flexbox для компоновки
- CSS Grid для компоновки
- Медиазапросы и разработка с приоритетом мобильных устройств