要实现CSS中的自动左对齐平铺效果，可以使用 flexbox 布局或 grid 布局来实现。下面土嘎嘎小编分享两种方法的示例：
1. 使用flexbox布局：
〓〓html代码如下：〓〓
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
〓〓css代码如下：〓〓
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 auto;
width: 100px; /* 调整为适合你的需求 */
height: 100px; /* 调整为适合你的需求 */
background-color: #ccc; /* 设置背景颜色 */
}
在这个例子中，容器元素使用 display: flex; 来开启flexbox布局，并使用 flex-wrap: wrap; 来允许项目（ .item ）换行。每个项目都具有固定的宽度和高度，通过调整 width 和 height 属性进行自定义。
2. 使用grid布局：
〓〓html代码如下：〓〓
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
〓〓css代码如下：〓〓
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px); /* 调整为适合你的需求 */
grid-gap: 10px; /* 可选，用于设置项目之间的间距 */
}
.item {
width: 100%; /* 使每个项目占据整个列宽 */
height: 100px; /* 调整为适合你的需求 */
background-color: #ccc; /* 设置背景颜色 */
}
在这个例子中，容器元素使用 display: grid; 来开启grid布局。通过设置 grid-template-columns 属性为 repeat(auto-fill, 100px) ，项目会自动填充每一行，并且每个项目都具有固定的宽度。可以根据需要调整 grid-gap 属性来设置项目之间的间距。
无论是使用flexbox还是grid布局，都可以实现自动靠左平铺的效果。根据你的需求和浏览器的兼容性要求，选择适合你的布局方法。