如何使用无序列表创建基本画廊网格答案

【问题标题】：How to create a basic gallery grid using an unordered list如何使用无序列表创建基本画廊网格
【发布时间】：2023-01-20 18:34:45
【问题描述】：

使用 flex，我正在尝试使用无序列表项创建图库网格。

它要求第一个图像占 50%，然后在网格中与它并排的其他 4 个图像。

我附上了一个 js fiddle 和我所追求的图像，因为我无法弄清楚我哪里出错了。

http://jsfiddle.net/qj7u5tv6/

li:first-child{
  width: 50%;
} 

li:not(:first-child)  {
  width: 25%;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  
}

Thanks

【问题讨论】：

如果您使用的是 flex，那么您的实际标记是不可能的。您需要一个容器来容纳右侧的 4 个图像。虽然使用网格是微不足道的。
如果可行，不反对使用网格？

标签： html css user-interface flexbox grid

【解决方案1】：

使用 grid 非常简单。

您的布局基本上是两行三列布局。
两行的高度都是50%，而第一列的宽度是50%，其他的是25%。

第一张图片横跨两行。

ul {
  list-style: none;
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows: 50% 50%;
}

li:first-child {
  grid-row: span 2;
}

如果你想要一个间隙，你可以将它添加到网格中：

  gap: 1rem;

要让图片填满它们的单元格：

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

片段：

* {
  margin: 0px;
  padding: 0px;
}

ul {
  list-style: none;
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows: 50% 50%;
  gap: 1rem;
}

li:first-child {
  grid-row: span 2;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<ul>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
  <li>
    <img src="https://via.placeholder.com/400" />
  </li>
</ul>

【讨论】：