12-колоночная grid-раскладка CSS
Среди способов организации содержимого веб-страницы 12-колоночная сетка выделяется тем, что она одновременно распространённая и гибкая, особенно для адаптивного дизайна.
Она разбивает доступное горизонтальное пространство на 12 колонок равной ширины, что даёт вам точную структуру для размещения элементов и задания их размеров.
Преимущества 12-колоночной сетки
- Гибкость: Число 12 легко делится, поэтому возможны половины (2 колонки по 6), трети (3 колонки по 4) и четверти (4 колонки по 3).
- Адаптивность: С медиазапросами эта сетка подходит для адаптивных сайтов, позволяя им подстраиваться под размеры экранов настольных компьютеров, планшетов или мобильных устройств.
- Эффективность: Работа над дизайном идёт быстрее, когда структура сетки уже определена.
Шаги ниже создают базовую CSS Grid-раскладку на 12 колонок:
Определите Grid-контейнер
Grid-контейнеру нужно display: grid;.
Создайте 12 колонок
12 колонок определяются через свойство grid-template-columns.
Запись repeat(12, [col-start] 1fr); даёт 12 колонок равной ширины, а начальная линия каждого трека колонки получает имя col-start. По частям:
repeat(12, ..)— выполняет определение трека 12 раз, создавая 12 колонок.[col-start]— задаёт имя линии сетки. Повторение даёт 12 линий с именемcol-start, что помогает, когда grid-элементы должны начинаться в конкретных точках.1fr— дробная единица, равная одной доле всего доступного пространства. Поэтому все 12 колонок получают равную, гибкую ширину.
Разместите Grid-элементы
Размещайте grid-элементы по 12 колонкам и задавайте их размер с помощью grid-column.
- Для элемента, занимающего определённое количество колонок, напишите
grid-column: span <number>;илиgrid-column: <start-line> / span <number>;. - Чтобы точно указать, на каких линиях сетки элемент начинается и заканчивается, напишите
grid-column: <start-line> / <end-line>;.
Используйте медиазапросы для добавления точек перелома
Всегда начинайте с мобильных устройств: при ширине менее 576 пикселей секции идут в порядке исходного кода, друг над другом, первая сверху.
При ширине от 576 до 767 пикселей раскладка состоит из двух колонок.
При ширине более 767 пикселей — из трёх.
Пример
Вот вся адаптивная 12-колоночная grid-раскладка с секциями заголовка, навигации, содержимого, боковой панели, рекламы и футера.
repeat(12, [col-start] 1fr). Примените дизайн "сначала мобильные": по умолчанию все секции располагаются вертикально друг под другом, переключение на двухколоночную раскладку при 576px и на трёхколоночную раскладку при 768px. Оформите каждую секцию зелёной рамкой и бежевым фоном.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 12-Column Grid Layout</title>
<style>
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Mobile first */
.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;
grid-column: col-start / span 12;
}
@media (min-width: 576px) {
.sidebar {
grid-column: col-start / span 3;
grid-row: 3;
}
.ads {
grid-column: col-start / span 3;
}
.content, .footer {
grid-column: col-start 4 / span 9;
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.sidebar {
grid-column: col-start 11 / span 2;
}
.ads {
grid-column: col-start 11 / span 2;
}
.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h2>Header</h2>
</header>
<nav class="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<main class="content">
<h2>Content</h2>
<p>This is the main content area. It spans different numbers of columns depending on the screen size.</p>
<p>On mobile, all sections stack vertically. On medium screens, content takes 9 columns. On large screens, content takes 8 columns with navigation and sidebar on either side.</p>
</main>
<aside class="sidebar">
<h3>Sidebar</h3>
<p>Sidebar content goes here.</p>
</aside>
<aside class="ads">
<h3>Ads</h3>
<p>Advertisement area.</p>
</aside>
<footer class="footer">
<p>Footer - spans all 12 columns</p>
</footer>
</div>
</body>
</html>