Урок Grid layout практика – Курс Основы фронтенд разработки

Давайте сверстаем для нашего сайта блок с использованием grid.

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

Описание блока

Блок должен представлять собой grid-сетку из карточек.

В сетке:

одна большая карточка (главная достопримечательность);
несколько стандартных карточек;
одна широкая карточка, расположенная внизу.

Каждая карточка содержит:

изображение;
заголовок;
краткое описание.

Требования к реализации

Для блока использовать display: grid и задать явное количество колонок.

Использовать gap для расстояний между карточками.

Для позиционирования использовать grid-column,grid-row или grid-template-areas

Не использовать flexbox для построения сетки.

Подсказка по структуре HTML

Если не знаете с чего начать возьмите следующую структуру за основу:

<section class="attractions">
  <div class="grid">
    <div class="card">
      <h3>Эрмитаж</h3>
      <p>Один из крупнейших музеев мира.</p>
    </div>

    <div class="card">
      <h3>Исаакиевский собор</h3>
      <p>Величественный символ города.</p>
    </div>

    <div class="card">
      <h3>Петергоф</h3>
      <p>Знаменитый дворцово-парковый ансамбль.</p>
    </div>
    ...
  </div>
</section>
html

Для того чтобы задать особенное расположение карточки, отличное от остальных, можно использовать дополнительный класс с указанием grid-свойств. Например для карточки, которая будет занимать всю ширину можно использовать <div class="card wide">, где wide - дополнительный класс, со стилями grid-rows и другими, необходимыми для настройки поведения элемента.

Визуальный пример

В результате у вас может получиться примерно такой блок с карточками разных размеров: