CSS 网格 1 顶部 3 底部答案

【问题标题】：CSS Grid 1 top 3 bottomCSS 网格 1 顶部 3 底部
【发布时间】：2021-01-18 09:29:21
【问题描述】：

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

有人知道怎么做吗？

【问题讨论】：

标签： css css-grid gallery photo

【解决方案1】：

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>

【讨论】：

谢谢！我尝试使用layitoutgrid，但我认为我用错了。