Одной из мощных возможностей является 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 позволяет не только точно контролировать внешний вид ваших страниц, но и делает ваш код более чистым и читаемым.