html - 如何添加 2 行 3 列图像？

Question

我对这个项目的想法是放置 2 行和 3 列来将图像放入其中。我正在使用 Laravel html Css（没有 Bootstrap）。我想要的看起来像这样：

知道如何开始吗？

标签： htmlcssimage

Answer 1

1. 包装图像并应用于display: grid;容器。
   
2. 要拥有 3 列，请使用：grid-template-columns: repeat(3, 1fr);

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid img {
  width: 100%;
}

<div class="grid">
  <img src="https://via.placeholder.com/400x300.jpg">
  <img src="https://via.placeholder.com/400x300.jpg">
  <img src="https://via.placeholder.com/400x300.jpg">
  <img src="https://via.placeholder.com/400x300.jpg">
  <img src="https://via.placeholder.com/400x300.jpg">
  <img src="https://via.placeholder.com/400x300.jpg">
</div>