Позиционирование элементов

Позиционирование элементов

Coursme
8 мин.
17 янв. 2024

В этом уроке мы погрузимся в тонкости 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, вы

обрели мощный инструмент для создания гармоничных и адаптивных веб-макетов.

Назад
Следующий тест
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Курсы
Блог
Меню