带有网格布局的框图像

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>

很好，但是我有以下困难，我需要将文本放在这样的小方框下：

但是我不知道如何使用上图所示的网格系统 我尝试使用flex布局时可能无法做到这一点，但这是一个很大的代码。

Answer 1

您可以使用nth-last-child() pseudo-class和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>