css小格子 |css图片没有空白间隙

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
column-gap: 10px;
row-gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 10px;
}

如上所示，大家定义了一个名为.grid的CSS类，它使用了CSS3的网格布局（grid）。其中，grid-template-columns规定了网格的列数和宽度，这里大家定义了一个3列的网格，每一列的宽度均为1份（1fr）。grid-auto-rows则规定了网格的行高，每一行高度都为100像素。同时，还在列和行之间定义了10像素的间隔。

其次，大家定义了一个名为.grid-item的CSS类，它用于定义网格中每一个小格子的样式。这里大家为小格子设置了灰色的背景和淡灰色的边框，并为其添加了10像素的内边距。

通过使用这个CSS类和相应的HTML结构，大家就可以轻松地制作出如下简单的网格效果：

1
2
3
4
5
6

这只是CSS小格子的基础应用之一，通过不同的参数和结构，大家可以实现更加多样化的网格设计。相信在未来的网页开发中，这种简单实用的设计方式会继续得到广泛的应用。