CSS 网格 1 顶部 3 底部

Question

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

有人知道怎么做吗？

Answer 1

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>

CSS 网格 1 顶部 3 底部

CSS Grid 1 top 3 bottom

css

css-grid

gallery

photo