[分享]css不规则盒子整齐排列

在前端开发中，布局是非常重要的一部分。经常我们需要实现一些不规则的盒子排列，比如瀑布流布局、九宫格布局等等。传统的方法往往需要使用JavaScript或者jQuery来计算盒子的位置，甚至需要使用复杂...

在前端开发中，布局是非常重要的一部分。经常我们需要实现一些不规则的盒子排列，比如瀑布流布局、九宫格布局等等。传统的方法往往需要使用JavaScript或者jQuery来计算盒子的位置，甚至需要使用复杂的算法来实现。但是，使用CSS3新特性我们可以轻松实现不规则盒子的整齐排列。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.box {
  height: 200px;
  background-color: #ccc;
} 

以上代码就是使用CSS3的Grid布局来实现不规则盒子的整齐排列的示例。其中.wrapper为外层容器，设置display为grid，表示使用Grid布局。grid-template-columns属性则是定义了grid布局的列，使用repeat函数和auto-fit关键字可以自动填充列数，并且设置最小宽度为200px，最大宽度为1fr。grid-gap属性则是设置了盒子之间的间隔为20px。

.box为盒子元素，设置了固定高度和背景颜色。

这样设置之后，就可以自适应不同宽度的屏幕，并且可以整齐地排列出不规则的盒子了。这种方法还有一个好处就是不需要使用JS来设置盒子位置和大小，直接使用CSS就可以实现。

除了Grid布局之外，Flex布局也可以通过设置不同的flex值，实现不规则布局的整齐排列。总之，在实现不规则布局时，我们有了更多的选择，不必再依赖于JS来计算盒子位置和大小。