让grid的宽和高随着屏幕大小动态改变

要让grid的宽和高随着屏幕大小动态改变，可以使用CSS中的`@media`查询和`grid-template-columns`和`grid-template-rows`属性。以下是一些示例代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 宽度动态改变 */
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); /* 高度动态改变 */
}

/* 当屏幕宽度小于600px时，每列宽度为150px */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

在上面的代码中，`grid-template-columns`和`grid-template-rows`属性的值分别为`repeat(auto-fit, minmax(200px, 1fr))`和`repeat(auto-fit, minmax(100px, 1fr))`，这将允许网格容器的列和行动态地改变大小。`auto-fit`关键字是指容器将根据可用空间自动调整数量，而`minmax()`函数则指定了网格单元格的最小和最大大小。

在`@media`查询中，我们可以使用`max-width`属性来指定屏幕宽度的最大值，并根据需要更改`grid-template-columns`属性的值，以便在小屏幕上更好地适应。