如何使用css显示网格动态显示我的列号？

要使用CSS显示网格动态显示列号，可以使用CSS伪类选择器:nth-child()来为每一列添加样式。

首先，在HTML文件中创建一个包含网格的容器元素，比如一个<div>元素，并为其添加一个唯一的类名，例如grid-container。

然后，在CSS样式表中，通过选择该类名来对网格容器进行样式设置。首先，将网格容器的布局设置为网格布局，可以使用display: grid;来实现。然后，通过使用grid-template-columns属性来定义列的大小和数量，可以使用repeat()函数来设置列的数量，例如grid-template-columns: repeat(4, 1fr);表示有4个等宽的列。如果要设置列的宽度为固定值，则可以直接使用具体的长度单位进行设置，例如grid-template-columns: 100px 200px 150px;。此外，还可以使用grid-gap属性来设置网格之间的间隔，例如grid-gap: 10px;表示网格之间有10像素的间隔。

接下来，使用:nth-child()选择器为每一列添加样式。例如，可以使用grid-column-start属性和grid-column-end属性来指定每一列的起始位置和结束位置。对于第一列，可以设置grid-column-start: 1;和grid-column-end: 2;，对于第二列，可以设置grid-column-start: 2;和grid-column-end: 3;，以此类推。此外，还可以为每一列设置其他样式，如背景颜色、文字颜色等。

最后，为了显示列号，可以在每一列中添加一个文本元素，例如一个<span>元素，然后使用CSS样式设置其内容为列号。可以通过为每一列的选择器添加一个子选择器来选择该列中的文本元素，例如.grid-container :nth-child(1) span表示选择网格容器中的第一列中的文本元素。可以使用content属性来设置文本元素的内容，并使用position属性和其他样式属性来调整文本元素的位置和样式。

下面是一个示例的HTML和CSS代码：

HTML代码：

<div class="grid-container">
  <div><span>1</span></div>
  <div><span>2</span></div>
  <div><span>3</span></div>
  <div><span>4</span></div>
  <div><span>5</span></div>
  <div><span>6</span></div>
</div>

CSS代码：

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

.grid-container > div {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

.grid-container > div span {
  content: attr(data-col);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
}

在上面的示例中，每一列的文本元素使用content: attr(data-col);来设置其内容为列号，通过设置position: absolute;使其定位到列的顶部中间位置，通过设置left: 50%;和transform: translateX(-50%);使其水平居中。