CSS网格1顶部3底部

问题描述

我试图制作一个在顶部显示1张图像，在底部显示3张单独图像的照片网格。

有人知道吗？

解决方法

You can read more about CSS GRID on this tutorial.

You can use a grid generator like this to make it easily.

请注意，我在每个div上都放置了一个红色的5px实线边框，因此它更加可见。

您可以放置​​img src="Your url"，以显示图片

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "main-photo main-photo main-photo"
    "main-photo main-photo main-photo"
    "photo1 photo2 photo3";
}

div{
border:5px solid red;
}

.main-photo { grid-area: main-photo; }
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }
.photo3 { grid-area: photo3; }

<div class="grid-container">
  <div class="main-photo"><img src=""></img></div>
  <div class="photo1"><img src=""></img></div>
  <div class="photo2"><img src=""></img></div>
  <div class="photo3"><img src=""></img></div>
</div>