使用grid来根据屏幕宽度计算每行可以放下多少个div盒子

```html

  
Box 1
  
Box 2
  
Box 3
  
Box 4
  
Box 5
  
Box 6

```

```css
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); // 每列最小宽度为200px，最大宽度为1fr（即平均分配剩余空间）
  gap: 10px; // 隔10px
}

.grid-item {
  background-color: lightgray;
  padding: 20px;
  text-align: center;
}
```

在上面的示例中，`.grid-container`表示包含所有盒子的容器，`.grid-item`表示每个盒子。通过设置`grid-template-columns`属性为`repeat(auto-fit, minmax(200px, 1fr))`，我们可以告诉浏览器自动适应网格的列数。其中`auto-fit`表示根据容器的宽度自动调整列数，`minmax(200px, 1fr)`表示每列的最小宽度为200px，最大宽度为1fr（即平均分配剩余空间）。这样，无论屏幕宽度如何变化，都能自动计算每行可以放下多少个盒子。

您可以根据需要调整`.grid-item`的样式，例如设置背景颜色、边距、文本对齐等。通过调整`.grid-container`的`grid-gap`属性，您还可以设置每个盒子之间的间距。

完整的grid属性可参考：

css初入门：网页布局之网格布局-grid_css网格布局-CSDN博客文章浏览阅读1.4k次，点赞3次，收藏6次。网格列（Grid Columns）网格行（Grid Rows）网格间隙（Grid Gaps）通过以下属性来调整网格间隙。// 竖直间隙// 水平间隙// 是 row-gap 和column-gap 属性的简写属性列线与竖线列之间的线称为列线（column lines）。行之间的线称为行线（row lines）。_css网格布局https://blog.csdn.net/lalala_dxf/article/details/130344566