Позиционирование элементов
Позиционирование элементов
В этом уроке мы погрузимся в тонкости CSS Grid Layout, изучая свойства grid-row-start, grid-row-end, grid-column-start и grid-column-end.
Познакомимся с гибкими методами управления размещением элементов в сетке и создадим эффективные макеты для современных веб-приложений.
В Grid Layout каждый макет представляет собой сетку, образованную пересечениями строк и столбцов. Но настройки расположения элементов в этой сетке можно делать более точными с использованием ряда свойств:
- grid-row-start: задает начальную горизонтальную grid-линию, с которой начинается элемент.
- grid-row-end: указывает, до какой горизонтальной grid-линии надо растягивать элемент.
- grid-column-start: задает начальную вертикальную grid-линию, от которой начинается элемент.
- grid-column-end: указывает, до какой вертикальной grid-линии нужно растягивать элемент.
Пример: Растяжение элемента на несколько столбцов
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid Layout в CSS3</title>
<style>
.grid-container {
border: solid 2px #000;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 5em);
}
.special-item {
grid-column-start: 2;
grid-column-end: 5;
}
.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 special-item">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 color4">Grid Item 7</div>
</div>
</body>
</html>
В этом примере, второй элемент (Grid Item 2) растягивается от второго до пятого столбца.
Пример: Использование grid-row и grid-column
.special-item {
grid-column: 3 / 5;
}
Этот код аналогичен предыдущему и более компактно записывает значения для grid-column-start и grid-column-end.
Пример: Работа с grid-row для нескольких строк
.special-item {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}
Этот пример размещает второй элемент в первой строке, начиная со второго столбца, и растягивает его до третьей строки.
Пример: Использование grid-area
.special-item {
grid-area: 1 / 2 / 3 / 4;
}
grid-area объединяет значения для grid-column-start, grid-row-start, grid-column-end, и grid-row-end.
Пример: Использование span
.special-item {
grid-row: 1 / span 2;
grid-column: 2 / span 2;
}С использованием span, элемент растягивается на две ячейки вниз и на две вправо.
Эти примеры позволяют лучше понять и применять позиционирование элементов в сетке с использованием CSS Grid Layout. Практикуйтесь с ними, чтобы лучше усвоить эти техники.
Заключение
Теперь, овладев пониманием позиционирования элементов в Grid Layout, вы
обрели мощный инструмент для создания гармоничных и адаптивных веб-макетов.
Будьте первым