CSS网格布局1大图像和3小

ivqmmu1c 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(162)

我试图重新排列这段代码，以获得像屏幕截图这样的网格视图。
我需要在行中的第一个图像是全宽100%，那么第二行我需要在下面的一行3个相等的宽度图像。

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>

css

来源：https://stackoverflow.com/questions/76556746/css-grid-layout-for-1-large-image-and-3-small

1条答案

按热度按时间

mjqavswn1#

图像2、3和4在图片中的宽度相同，因此将它们设置为相同的宽度。

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

图片1和图片2、3和4在图片中的高度不同，因此不要使它们具有相同的高度：

grid-template-rows: auto auto;

图1跨越了多个列而不是图片中的多行，它跨越了其中的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>

赞(0）回复(0）举报 2023-07-01

我来回答

CSS网格布局1大图像和3小

1条答案

相关问题

热门标签

最新问答