Отступы между столбцами и строками
Отступы между столбцами и строками
Одним из мощных инструментов, который обеспечивает точное распределение пространства на веб-странице, является CSS Grid Layout.
В предыдущих уроках мы изучили основы создания сеток с помощью этого инструмента. В данном уроке мы рассмотрим, как легко и эффективно управлять отступами между столбцами и строками с использованием свойств grid-column-gap и grid-row-gap.
Отступы между столбцами и строками
Для эффективного управления отступами между столбцами и строками в CSS Grid Layout используются свойства grid-column-gap и grid-row-gap соответственно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid Layout в CSS3</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.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; }
</style>
</head>
<body>
<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 color1">Grid Item 5</div>
<div class="grid-item color4">Grid Item 6</div>
<div class="grid-item color5">Grid Item 7</div>
</div>
</body>
</html>
В данном примере мы применяем grid-column-gap и grid-row-gap для установки отступов между столбцами и строками в сетке. Это придает макету визуальное пространство и структуру.
Сокращенная запись с grid-gap
Если значения отступов между столбцами и строками одинаковы, можно воспользоваться сокращенной записью с использованием свойства grid-gap:
.grid-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}Это позволяет более компактно определить оба отступа и улучшить читаемость кода.
Заключение
Использование отступов между столбцами и строками в Grid Layout не только придает вашим макетам визуальную структуру, но также обеспечивает легкость адаптации и управления пространством. От установки фиксированных значений до применения относительных и пропорциональных размеров, вы теперь владеете инструментами для создания современных и отзывчивых макетов. И помните, эти техники предоставляют дополнительные возможности для креативного проектирования ваших веб-приложений.
Будьте первым