Сложные макеты на Grid

.container {
  display: grid;
  grid-template-columns: 3fr 1fr; /* Определяем 2 колонки */
  grid-template-rows: auto 1fr auto; /* Определяем 3 строки */
  gap: 10px;
  height: 300px; /* Для наглядности */
  border: 1px solid #ccc;
  padding: 10px;
  /* Определите именованные области для макета */
  input1: 
    "header header"
    "main sidebar"
    "footer footer";
}

.header { input2: header; background-color: #a7c5eb; padding: 10px; }
.main { input3: main; background-color: #f0f0f0; padding: 10px; }
.sidebar { input4: sidebar; background-color: #e0e0e0; padding: 10px; }
.footer { input5: footer; background-color: #a7c5eb; padding: 10px; }

.grid-container {
  display: grid;
  input1: repeat(3, 1fr); /* 3 колонки */
  grid-template-rows: repeat(2, 100px); /* 2 строки */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  background-color: #bde0fe;
  border: 1px solid #a2d2ff;
  padding: 20px;
  text-align: center;
}

.item1 {
  /* Заставьте этот элемент занимать 2 колонки */
  input2: 1 / input3 input4;
  background-color: #ffafcc; /* Выделяем цветом */
}

.dense-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 60px; /* Автоматическая высота строк */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Добавьте свойство для плотного размещения */
  input1: input2;
}

.dense-item {
  background-color: #fec89a;
  border: 1px solid #fdaa7a;
  padding: 10px;
  text-align: center;
}

.item-tall {
  grid-row: span 2; /* Занимает 2 строки */
  background-color: #d8e2dc; 
}

.align-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.align-item {
  background-color: #e9d8a6;
  border: 1px solid #e7c58d;
  padding: 10px;
}

.item3 {
  background-color: #ee9b00; /* Выделяем цветом */
  /* Выровняйте этот элемент по правому краю */
  input1: input2;
  /* Выровняйте этот элемент по нижнему краю */
  input3: input4;
}

.minmax-container {
  display: grid;
  /* Определите две колонки: гибкую с минимумом и фиксированную */
  input1: input2(150px, input3) 80px;
  gap: 10px;
  height: 250px;
  border: 1px solid #ccc;
  padding: 10px;
}

.minmax-main {
  background-color: #f1faee;
  padding: 10px;
  border: 1px solid #a8dadc;
}

.minmax-sidebar {
  background-color: #a8dadc;
  padding: 10px;
  border: 1px solid #457b9d;
}

.gallery-container {
  display: grid;
  /* Используйте repeat и auto-fit для создания адаптивных колонок */
  input1: input2(input3, minmax(100px, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* Делаем изображения квадратными */
  object-fit: cover; /* Масштабируем изображение с сохранением пропорций */
  border: 1px solid #ddd;
}

.overlap-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки для span 2 */
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  position: relative; /* Для z-index */
}

.overlap-item {
  padding: 20px;
  border: 1px solid #555;
}

.item-back {
  background-color: #caf0f8;
  /* Разместите в первой ячейке */
  input1: 1;
  input2: 1;
  z-index: 1;
}

.item-front {
  background-color: rgba(255, 190, 11, 0.7); /* Полупрозрачный для наглядности */
  /* Разместите со второй колонки, занимая 2 колонки, в первой строке */
  input3: 2 / span 2;
  input4: 1;
  z-index: 2; /* Должен быть поверх */
}

.main-container {
  display: grid;
  input1: 1fr 1fr; /* Две равные колонки */
  gap: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  height: 200px;
}

.grid-item {
  padding: 10px;
  border: 1px solid #aaa;
}

.left-item {
  background-color: #d6eaf8;
  /* Сделайте этот элемент грид-контейнером */
  input2: input3;
  /* Определите две колонки для вложенных элементов */
  input4: 1fr 1fr;
  gap: 5px; /* Промежуток для вложенных элементов */
}

.right-item {
  background-color: #d1f2eb;
}

.nested-item {
  background-color: #fcf3cf;
  padding: 5px;
  border: 1px solid #f7dc6f;
  text-align: center;
}