---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Каталог — Flex и Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>Flex</h2>
  <div class="catalog catalog-flex">

    <!-- Строка 1 -->
    <div class="row">
      <div class="card">
        <h3>Товар 1</h3>
        <div class="card-image" style="background:#e0526a;"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="card">
        <h3>Товар 2</h3>
        <div class="card-image" style="background:#e08a4f;"></div>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore.</p>
      </div>
      <div class="card">
        <h3>Товар 3</h3>
        <div class="card-image" style="background:#4e9f5e;"></div>
        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
      </div>
    </div>

    <!-- Строка 2 -->
    <div class="row">
      <div class="card">
        <h3>Товар 4</h3>
        <div class="card-image" style="background:#c3d92e;"></div>
        <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
      </div>
      <div class="card">
        <h3>Товар 5</h3>
        <div class="card-image" style="background:#4bbfa7;"></div>
        <p>Excepteur sint occaecat cupidatat non proident.</p>
      </div>
      <div class="card">
        <h3>Товар 6</h3>
        <div class="card-image" style="background:#2f5fdb;"></div>
        <p>Sunt in culpa qui officia deserunt mollit anim.</p>
      </div>
    </div>

    <!-- Строка 3 -->
    <div class="row">
      <div class="card">
        <h3>Товар 7</h3>
        <div class="card-image" style="background:#7b2a8a;"></div>
        <p>Curabitur pretium tincidunt lacus, sed sagittis.</p>
      </div>
      <div class="card">
        <h3>Товар 8</h3>
        <div class="card-image"></div>
        <p>Nulla quis sem at nibh elementum imperdiet.</p>
      </div>
      <div class="card">
        <h3>Товар 9</h3>
        <div class="card-image" style="background:#4a4a4a;"></div>
        <p>Fusce nec tellus sed augue semper porta.</p>
      </div>
    </div>

  </div>

  <h2>Grid</h2>
  <div class="catalog catalog-grid">

    <!-- Строка 1: 4 товара, все на одинаковом расстоянии друг от друга -->
    <div class="card">
      <h3>Товар 1</h3>
      <div class="card-image" style="background:#e0526a;"></div>
      <p>Lorem ipsum dolor sit amet, consectetur.</p>
    </div>
    <div class="card">
      <h3>Товар 2</h3>
      <div class="card-image" style="background:#e08a4f;"></div>
      <p>Sed do eiusmod tempor incididunt.</p>
    </div>
    <div class="card">
      <h3>Товар 3</h3>
      <div class="card-image" style="background:#4e9f5e;"></div>
      <p>Ut enim ad minim veniam.</p>
    </div>
    <div class="card">
      <h3>Товар 4</h3>
      <div class="card-image" style="background:#c3d92e;"></div>
      <p>Duis aute irure dolor.</p>
    </div>

    <!-- Строка 2: слева и справа обычные, посередине длинный -->
    <div class="card">
      <h3>Товар 5</h3>
      <div class="card-image" style="background:#4bbfa7;"></div>
      <p>Excepteur sint occaecat cupidatat.</p>
    </div>
    <div class="card item-wide">
      <h3>Товар 6 (широкий)</h3>
      <div class="card-image" style="background:#2f5fdb;"></div>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum, lorem ipsum dolor sit amet.</p>
    </div>
    <div class="card">
      <h3>Товар 7</h3>
      <div class="card-image" style="background:#7b2a8a;"></div>
      <p>Curabitur pretium tincidunt lacus.</p>
    </div>

    <!-- Строка 3: произвольные размеры -->
    <div class="card item-span2">
      <h3>Товар 8 (широкий)</h3>
      <div class="card-image"></div>
      <p>Nulla quis sem at nibh elementum imperdiet, duis sagittis ipsum praesent mauris.</p>
    </div>
    <div class="card">
      <h3>Товар 9</h3>
      <div class="card-image" style="background:#4a4a4a;"></div>
      <p>Fusce nec tellus sed augue.</p>
    </div>
    <div class="card">
      <h3>Товар 10</h3>
      <div class="card-image" style="background:#e0526a;"></div>
      <p>Mauris massa vitae posuere.</p>
    </div>

  </div>

</body>
</html>

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

h2 {
  font-size: 18px;
  margin: 24px 0 12px;
}

/* ==== Общий вид карточки товара (используется и во Flex, и в Grid) ==== */
.card {
  border: 1px solid #2f4f4f;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

/* Квадрат-заглушка вместо картинки товара */
.card-image {
  width: 100%;
  height: 100px;
  background: #ddd; /* цвет по умолчанию, если не задан inline */
  margin-bottom: 8px;
  flex-shrink: 0;
}

.card p {
  margin: 0;
  font-size: 12px;
  color: #555;
  overflow: hidden;
}


/* ==================== FLEX ==================== */

.catalog-flex {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 2px solid #2f4f4f;
  padding: 16px;
  max-width: 720px;
}

/* Каждая строка — flex-контейнер по горизонтали, всегда ровно 3 карточки */
.catalog-flex .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
}

/* Карточки одинакового фиксированного размера, не зависят от текста внутри */
.catalog-flex .card {
  flex: 1 1 0;
  min-width: 0;
  width: 200px;
  height: 260px;
}


/* ==================== GRID ==================== */

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
  gap: 16px; /* одинаковое расстояние между всеми элементами */
  border: 2px solid #2f4f4f;
  padding: 16px;
  max-width: 720px;
}

.catalog-grid .card {
  height: 220px;
}

/* Строка 2: средний товар занимает 2 колонки — получается длинный по центру */
.item-wide {
  grid-column: span 2;
}

/* Строка 3: первый товар тоже занимает 2 колонки — строка выглядит "произвольно" */
.item-span2 {
  grid-column: span 2;
}