网格列 CSS

CSS网格列是一种新的布局方式，它基于CSS网格布局，可以使网页的布局更加灵活，适应不同屏幕大小和不同设备。网格列可以让你按列来排列内容，而不用担心它们在不同设备上的显示效果。

使用CSS网格列

要使用CSS网格列，需要在CSS文件中定义一个网格布局。网格布局包含两个基本结构：网格容器和网格项目。网格容器是包含网格项目的元素，它的display属性设置为grid。而网格项目则是布局中的每个单元格。

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

在这个例子中，我们使用了一个repeat函数，来指定列的数量和宽度。auto-fit表示自动填充，minmax则是指定最小和最大宽度。1fr表示等份布局，网格容器中的每列将等分可用空间，如果你想要三栏布局，可以使用repeat(3, 1fr)。

设置网格间距

可以通过gap属性来设置网格的间距，这个属性的单位可以是像素(px)、百分比(%)、点阵(dpi)或视窗单位(vw和vh)。

.container {
  gap: 1rem;
}

在上面的例子中，我们使用了一个1rem的空隙作为网格之间的间距。

定义网格行和列

可以通过grid-template-columns和grid-template-rows属性来定义网格的行和列。这两个属性可以接受逗号分隔的值，每个值表示一个网格单元格的大小。

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

以上代码将网格划分为3列和2行，每个单元格的宽度为1fr、高度为100px。

网格自动布局

网格自动布局是一种便捷的方法，可以让浏览器自动为网格容器中的项目分配位置和大小。可以使用grid-auto-rows和grid-auto-columns属性来设置不在固定网格中的项目的默认行和列大小。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

在上面的例子中，我们设置了默认的行高为100像素。如果某个网格项目没有在固定的网格中定义位置和大小，它将自动分配一个100像素的高度。

网格对齐

可以使用justify-items和align-items属性来对齐网格项目。justify-items属性用于水平方向的对齐，可以取值为start、end、center、stretch和auto；align-items属性用于垂直方向的对齐，可以取值为start、end、center、stretch和baseline。

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

在上面的例子中，我们让网格项目在水平和垂直方向上都居中对齐。

网格定位

可以使用grid-row和grid-column属性来为网格项目指定位置。这两个属性可以取逗号分隔的值，表示一个网格单元格的位置。也可以使用/符号将它们组合在一起，独立地定义开始和结束位置。

.item {
  grid-row: 1 / 3;
  grid-column: 1 / 4;
}

在上面的例子中，我们让一个项目跨越了从第1行到第3行、第1列到第4列的单元格。