css 网格布局设置4列 宽度自适应

要使用 CSS 网格布局实现宽度自适应的 4 列布局，可以按照以下步骤进行设置：

1. 创建一个容器元素，作为网格布局的父元素：

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

2. 设置子元素的样式，使其占据网格的一个单元格：

.item {
  grid-column: span 1;
}

这样，每个子元素将会均匀地分布在网格中，并且根据容器的宽度自动调整列数，使得每列的宽度自适应。你可以根据实际需求调整 `gap` 属性来设置列之间的间距。

下面是一个完整的示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

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

.item {
  grid-column: span 1;
}

这样就可以实现一个宽度自适应的 4 列布局。当容器的宽度足够宽时，每列将会自动填充空间，当容器的宽度不足时，列数会自动减少以适应容器大小。