Html CSS Grid 布局：1 大图和 3 小图

发布于06月26日

我正在try 重新排列这段代码，以获得与屏幕截图类似的网格视图.

我需要在行的第一个图像是100%的全宽，然后第二行我需要在下面的一行相同宽度的3个图像.

演示:我不知道. http://jsfiddle.net/gycmp21k/ http://jsfiddle.net/gycmp21k/ http://jsfiddle.net/gycmp21k/

body {
  padding: 40px;
}

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

ul {
  list-style: none;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  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>
</ul>

推荐答案

图像2、3和4在图片中的宽度相同，因此请使它们的宽度相同.

grid-template-columns: 1fr 1fr 1fr;

图片1和图片2、3和4在图片中的高度不同，因此不要将它们设置为相同的高度:

grid-template-rows: auto auto;

图1横跨图片中的多个columns行，而不是多行，它横跨其中的3行，而不是2行

grid-column: span 3;

body {
  padding: 40px;
}

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

ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}

li:first-child {
  grid-column: span 3;
}

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>
</ul>