[分享]css中2列变成3列

CSS中的一项常见任务是将原本呈现为2列的内容，转换成3列。这通常可以通过方便的CSS属性来实现。接下来，我们将提供一些具体的示例。 .container { display: grid; grid...

CSS中的一项常见任务是将原本呈现为2列的内容，转换成3列。这通常可以通过方便的CSS属性来实现。接下来，我们将提供一些具体的示例。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media only screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
} 

这段CSS代码中，通过在容器中声明一个网格布局，将元素分成3列。 该“grid-template-columns”属性的值设置成“1fr 1fr 1fr”，意味着每列将占据相等的空间。在移动设备屏幕大小下，我们可以通过媒体查询来缩小网格布局的规模，只需将“grid-template-columns”值设置为“1fr 1fr”即可。

在下面的示例中，我们以不同的方式实现相同的目标：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 30%;
}
@media only screen and (max-width: 768px) {
  .item {
    width: 45%;
  }
} 

在这个CSS示例中，我们使用了“flexbox”模型来实现“2列变成3列”的效果。通过将容器声明为“display：flex”，我们按水平排列其内部项目。“flex-wrap: wrap”用于将元素放入当前行而不是合并到新行中，使它们可以在容器中的剩余空间内均匀分布。 最后，“justify-content: space-between”使项目在每一行中均匀分散。如果这里需要在一个小屏幕上使用此样式，我们只需通过更改项目的宽度来缩小其在父容器中所占的空间。