如何使用 html 和 css 创建 3 列图像网格？

Question

我很想知道使用 HTML 和 CSS 创建与附加图像相似的图像网格的最佳做法是什么。

谢谢。

Answer 1

您可以像这样使用 CSS 弹性容器。

这是示例 CSS:

.flex-container {
  flex-direction:row;
  display: -webkit-flex;
  display: flex;
  background-color: grey;
  width: 100%;
  height: 100px;
  align-content: center;
  flex-flow: row wrap; 
}

.flex-item {
  background-color: lightblue;
  width: 40%;
  height: 100px;
  margin: 10px;
  order: 1;  
}

这里是示例HTML：

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
  <div class="flex-item">flex item 4</div> 
</div>

您将需要采用此技巧并将其应用到您的环境中。

如何使用 html 和 css 创建 3 列图像网格？

How to create a 3 column image grid using html and css?

html

css

grid

image-gallery