Создание сайта Furniro. Main 2 часть

Grid Layout

Мощная система сеток, доступная в CSS, которая позволяет гибко управлять макетом веб-страниц, организуя элементы в строки и столбцы. Она была разработана для создания более сложных, но при этом гибких и адаптивных макетов, не прибегая к хакам с float или позиционированием.

В предыдущих уроках у нас уже была тема сеток. Там мы выстраивали сетку за счет свойства inline-block, но для практики будет полезно знать и другие возможности решения задач с сетками.

Основные концепции Grid Layout:

  • Контейнер сетки (Grid Container): Элементы, к которым применяется свойство display: grid; , становятся контейнером сетки. Все дочерние элементы внутри этого контейнера автоматически становятся элементами сетки (grid items).
CSS
Код скопирован в буфер обмена copy

.grid_container {
      display: grid;
}

  • Строки и столбцы (Grid Rows and Columns): Сетка состоит из горизонтальных строк и вертикальных столбцов. Для их настройки используется свойство grid-template-rows (для строк) и grid-template-columns (для столбцов). Например создадим три столбца по 200px и две строки по 100px.:
CSS
Код скопирован в буфер обмена copy

.grid_container {
      display: grid;
      grid-template-columns: 200px 200px 200px; /* Три столбца фиксированной ширины */
      grid-template-rows: 100px 100px; /* Две строки фиксированной высоты */
}

  • Фракции (Fraction units): Единица измерения fr — это особая единица в Grid Layout, которая позволяет делить свободное пространство. Например, если указать 1fr 2fr , первый столбец займет 1 часть пространства, а второй — 2 части.
CSS
Код скопирован в буфер обмена copy

.grid_container {
      display: grid;
      grid-template-columns: 1fr 2fr; /* Второй столбец будет в два раза шире первого */
}

  • Автоматическая расстановка строк и столбцов (auto): Вместо указания фиксированных размеров можно использовать auto , чтобы браузер сам определил размер строк и столбцов в зависимости от содержимого:
CSS
Код скопирован в буфер обмена copy

.grid_container {
      display: grid;
      grid-template-columns: 200px auto; /* Второй столбец займет оставшееся пространство */
}

  • Разрыв сетки (Grid Gap): Чтобы добавить расстояние между строками и столбцами, используется свойство gap . Например:
CSS
Код скопирован в буфер обмена copy

.grid_container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-gap: 20px; /* Пробел между строками и столбцами */
}

  • Расположение элементов (Grid Item Placement): Элементы внутри контейнера сетки можно явно размещать в нужных местах. Например, с помощью свойств grid-column и grid-row можно задать, какие ячейки сетки будут занимать элементы.
CSS
Код скопирован в буфер обмена copy

.grid_item {
      grid-column: 1 / 3; /* Элемент растянется с 1-го по 3-й столбец */
      grid-row: 2 / 4; /* Элемент будет охватывать 2-ю и 3-ю строки */
}

  • Автоматическое размещение (Auto Placement): Если не указано явное позиционирование, Grid Layout автоматически разместит элементы сетки в первой доступной ячейке.
  • Повторяющиеся строки или столбцы (repeat): Функция repeat ( )  помогает легко создавать повторяющиеся строки или столбцы:
CSS
Код скопирован в буфер обмена copy

.grid_container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* Три столбца одинаковой ширины */
}

Пример сетки Grid Layout

  1. grid-template-columns: repeat(3, 1fr); — три столбца одинаковой ширины. Единица измерения 1fr означает, что каждый столбец займет равную часть доступного пространства.
  2. grid-gap: 10px; — расстояние между элементами сетки составляет 10px.

Grid Layout значительно упрощает создание сложных макетов страниц, поддерживая гибкость и адаптивность. Это мощный инструмент для веб-разработки, особенно для построения многострочных и многоколоночных макетов.

Практика

Ссылка на макет сайта: www.figma.com/design

В этом уроке мы сделаем Каталог товаров на сайте, но сделаем мы только его визуальную часть. Интерактив будем добавлять позже.

Первым делом анализируем блок: из каких элементов он состоит, какие теги применять и как позиционировать элементы относительно друг-друга.

  • Заголовок второго уровня;
  • Группа карточек товаров и тут мы уже знаем, что повторяющиеся блоки можно оформлять списком;
  • Кнопка.

Базовая структура с контентом:

HTML
Код скопирован в буфер обмена copy

<main>
      <article>
            <h2> </h2>
            <ul>
                 li*8
            </ul>
            <button> </button>
      </article>
</main>

Сверяемся с сайтом:

Начинаем оформлять стили. Создаём классы и пишем CSS код.

HTML
Код скопирован в буфер обмена copy

<main>
      <article class="flex catalog">
            <h2 class="second_heading"> </h2>
            <ul class="list_reset catalog_list">
                 li*8
            </ul>
            <button class="btn_reset catalog_btn"> </button>
      </article>
</main>

Для начала поставим весь контент этого блока по центру. Так как свойство flex-блоков и сброс настроек списка и кнопки у нас уже определено, на сайте мы видим только два текста:

Сейчас покажу последовательность вёрстки:

  • устанавливаем ограничение по ширине блока согласно макету:
CSS
Код скопирован в буфер обмена copy

.catalog {
      max-width: 1236px;
}

  • ставим весь блок по центру относительно родительского контейнера (всей страницы) и назначаем нижний отступ:
CSS
Код скопирован в буфер обмена copy

.catalog {
      max-width: 1236px;
      margin: 0 auto;
      margin-bottom: 55px;
}

  • выставляем контент в колонну и по центру:
CSS
Код скопирован в буфер обмена copy

.catalog {
      max-width: 1236px;
      margin: 0 auto;
      margin-bottom: 55px;
      flex-direction: column;
      align-items: center;
}