Изображения в рамке с сеткой

Question

Здравствуйте, я пытаюсь сделать систему сетки также к этому:

.grid_layout {
    display: grid;
    grid-gap: 6px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }
  
 .item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
  grid-column: span 2;
}

.gallery_item {
    display: flex;
    flex-direction: column;
  }
  
  .bg img {
      width: 100%;
      height: 100%;
      border: 1px solid green;
  }

<div class="grid_layout">
  <div class="item">
  <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
  <div class="item">
    <div class="bg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg"></img>
  </div>
  </div>
</div>

Хорошо, но у меня возникли следующие трудности, мне нужно поместить текст в такие маленькие квадраты, как это:

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

Answer 1

Вы можете использовать nth-last-child() псевдокласс и grid-column: span 2 для достижения этого.

.grid_layout {
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}

.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
  grid-column: span 2;
}

.gallery_item {
  display: flex;
  flex-direction: column;
}

.bg img {
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

.item:nth-last-child(-n+3) {
  grid-column: span 2;
}

.item>.description {
  border-left: 2px solid #000;
}

<div class="grid_layout">
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="bg">
      <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
    </div>
  </div>
  <div class="item">
    <div class="description">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <div class="item">
    <div class="description">
      <p>consectetur adipisicing elit</p>
    </div>
  </div>
  <div class="item">
    <div class="description">
      <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
    </div>
  </div>
</div>