css display:grid布局

使用CSS的display: grid布局可以创建一个网格布局，通过将元素放置在网格的列和行中来控制页面的布局。

当使用display: grid时，我们可以使用grid-template-columns属性来定义网格的列数和宽度。例如，grid-template-columns: 100px 100px 100px; 将创建一个包含3个列，每个列的宽度为100px的网格。

同样地，我们可以使用grid-template-rows属性来定义网格的行数和高度。例如，grid-template-rows: 100px 100px 100px; 将创建一个包含3个行，每个行的高度为100px的网格。

还可以使用column-gap属性来定义列之间的间隔大小。例如，column-gap: 20px; 将在列之间创建一个20px的间隔。

类似地，我们可以使用row-gap属性来定义行之间的间隔大小。例如，row-gap: 20px; 将在行之间创建一个20px的间隔。

如果不需要间隔，可以省略column-gap和row-gap属性。

综上所述，通过使用display: grid、grid-template-columns、grid-template-rows和相应的间隔属性，我们可以创建一个具有指定列数、行数和间隔的网格布局。