Как вставить grid в grid?

Question

[SHKD]

Приветствую.

У меня есть 2 сетки

<div class="container">
    <div class="grid-1">
      <div id="grid-1-item-1"></div>
      <div id="grid-1-item-2"></div>
      <div id="grid-1-item-3"></div>
    </div>
    <div class="grid-2">
      <div id="grid-2-item-1"></div>
      <div id="grid-2-item-2"></div>
      <div id="grid-2-item-3"></div>
    </div>
 </div>

.container {
  max-width: 1200px;
  margin: 40px;
  padding: 0;
}

/* -1- */
.grid-1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 300px);
  background-color: transparent;
  border: none;
  gap: 20px;
}

.grid-1 > div {
  display: flex;
}

#grid-1-item-1 {
  grid-column: span 2;
  grid-row: span 2;
  border: 2px solid #262626;
}

#grid-1-item-2 {
  grid-column: 3;
  grid-row: 1;
  border: 2px solid #262626;
}

#grid-1-item-3 {
  grid-column: 3;
  grid-row: 2;
  border: 2px solid #262626;
}

/* -2- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 100px);
  background-color: transparent;
  border: none;
  gap: 20px;
}

.grid-2 > div {
  display: flex;
}

#grid-2-item-1 {
  grid-column: 1;
  grid-row: span 2;
  border: 2px solid #262626;
}

#grid-2-item-2 {
  grid-column: 2;
  grid-row: span 2;
  border: 2px solid #262626;
}

#grid-2-item-3 {
  grid-column: span 2;
  grid-row: 3;
  border: 2px solid #262626;
}

Я хочу чтобы grid-2 встало в элементы grid-1 #grid-1-item-2 и #grid-1-item-3, т.е. вот так:

<div class="container">
    <div class="grid-1">
      <div id="grid-1-item-1"></div>
      <div id="grid-1-item-2">
        <div class="grid-2">
          <div id="grid-2-item-1"></div>
          <div id="grid-2-item-2"></div>
          <div id="grid-2-item-3"></div>
        </div>
      </div>
      <div id="grid-1-item-3">
        <div class="grid-2">
          <div id="grid-2-item-1"></div>
          <div id="grid-2-item-2"></div>
          <div id="grid-2-item-3"></div>
        </div>
      </div>
    </div>
  </div>

Но почему то в таком случае width grid-2 не сохраняет значение.

Вопрос: как это сделать правильно?

Comments

[Ankhena]

Это же надо так вопрос завернуть вместо того чтобы просто спросить почему дочерний элемент флекса не занимает всю доступную ширину родителя :)

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

Т.е.
- либо задайте ширину руками
- либо избавьтесь от обертки grid-2, задав этот класс вот этому элементу grid-1-item-2
- либо уберите флекс у grid-1-item-2

[SHKD]

Спасибо!