Одной из мощных возможностей является CSS Grid Layout, предоставляющий гибкость и контроль над размещением элементов. В этом уроке мы погрузимся в управление размерами строк и столбцов с использованием CSS Grid, рассмотрим различные единицы измерения и приемы, которые делают макеты более динамичными и адаптивными.
Однако помимо точных размеров, мы можем использовать автоматические размеры, указывая ключевое слово auto. В этом случае ширина столбцов и высота строк вычисляются исходя из размеров их содержимого:
HTML
<div class="grid-container">
<div class="grid-item color1">Grid Item 1</div>
<div class="grid-item color2">Grid Item 2</div>
<div class="grid-item color3">Grid Item 3</div>
<div class="grid-item color4">Grid Item 4</div>
<div class="grid-item color5">Grid Item 5</div>
<div class="grid-item color1">Grid Item 6</div>
<div class="grid-item color2">Grid Item 7</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(3, 4.5em);
}
.grid-item {
text-align: center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 {
background-color: #675ba7;
}
.color2 {
background-color: #9bc850;
}
.color3 {
background-color: #a62e5c;
}
.color4 {
background-color: #2a9fbc;
}
.color5 {
background-color: #4e342e;
}
В CSS устанавливаются стили для контейнера и его элементов. Контейнер использует CSS Grid с тремя столбцами шириной 200px каждый и тремя строками высотой 4.5em каждая. Стили для элементов устанавливают выравнивание текста по центру, размер шрифта, отступы и цвет текста. Каждый класс цвета (color1, color2 и так далее) устанавливает фон для соответствующего элемента.
Таким образом, результатом будет сетка из семи элементов с определенными размерами и стилями, каждый с уникальным цветовым фоном.
Для создания пропорциональных размеров используется единица измерения fr (flex factor), которая представляет часть пространства, выделенного для столбца или строки. Например:
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
border: 2px solid #000;
display: grid;
grid-template-columns: 8em 2fr 1fr;
grid-template-rows: 1fr 4.5em 1fr;
}
.grid-item {
text-align: center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 { background-color: #675ba7; }
.color2 { background-color: #9bc850; }
.color3 { background-color: #a62e5c; }
.color4 { background-color: #2a9fbc; }
.color5 { background-color: #4e342e; }
HTML
<div class="grid-container">
<div class="grid-item color1">Grid Item 1</div>
<div class="grid-item color2">Grid Item 2</div>
<div class="grid-item color3">Grid Item 3</div>
<div class="grid-item color4">Grid Item 4</div>
<div class="grid-item color5">Grid Item 5</div>
<div class="grid-item color1">Grid Item 6</div>
<div class="grid-item color2">Grid Item 7</div>
</div>
В данном примере мы используем единицу измерения fr для создания пропорциональных размеров столбцов в сетке.
Первый столбец имеет фиксированную ширину в 8em.Второй столбец занимает 2/3 (2fr) доступного пространства.Третий столбец занимает 1/3 (1fr) доступного пространства.Это позволяет создать динамическую сетку, где ширина столбцов автоматически адаптируется к размерам контейнера, обеспечивая гармоничное распределение пространства.
Важный момент: использование fr позволяет гибко распределять пространство, делая столбцы и строки зависимыми от размеров контейнера. Это особенно полезно при создании адаптивных макетов, где размеры элементов могут меняться в зависимости от ширины или высоты экрана.
На этом уроке мы углубились в тонкости управления размерами строк и столбцов в Grid Layout. От фиксированных размеров до автоматических и пропорциональных, каждый подход предоставляет уникальные возможности для создания эффективных и адаптивных веб-макетов. Помните, что правильное использование размеров в CSS Grid позволяет не только точно контролировать внешний вид ваших страниц, но и делает ваш код более чистым и читаемым.
Будьте первым