grid布局 响应式

grid布局是一种强大的CSS布局方式，可以方便地实现响应式布局。在上述代码中，通过使用@media查询，我们可以根据屏幕宽度的不同来设定不同的grid布局。在代码中，我们使用了三个不同的@media查询，分别对应于屏幕宽度在不同范围内的情况。

在@media screen and (min-width:765px) and (max-width:1200px)的媒体查询中，我们将.container的display属性设置为grid，并使用grid-template-columns属性将其分为三列。

在@media screen and (min-width:500px) and (max-width:768px)的媒体查询中，我们将.container的display属性设置为grid，并使用grid-template-columns属性将其分为两列。

在@media screen and (max-width:500px)的媒体查询中，我们将.container的display属性设置为grid，并使用grid-template-columns属性将其设为自适应一列。

通过这样的设置，我们可以根据不同的屏幕宽度来自适应地改变grid布局的列数，从而实现响应式布局。