两行代码就能适应任何屏幕

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

1. grid-template-columns
   作用：定义网格容器里有多少列，以及每列的宽度。
2. repeat(auto-fit, ...)
   repeat 是个重复函数，表示后面的模式会被重复多次。
   auto-fit 是一个特殊值，意思是：自动根据容器宽度，能放下几个就放几个，每列都用后面的规则。
   容器宽度足够时，能多放就多放，放不下就自动换行。
3. minmax(200px, 1fr)
   minmax 也是一个函数，意思是：每列最小200px，最大可以占1fr（剩余空间的平分）
   具体来说：
   当屏幕宽度很窄时，每列最小宽度是200px，再窄就会换行。
   当屏幕宽度变宽，卡片会自动拉伸，每列最大可以占据剩余空间的等分（1fr），让内容填满整行。
4. 综合起来
   这行代码的意思就是：
   网格会自动生成多列，每列最小200px，最大可以平分一行的剩余空间。
   屏幕宽了就多显示几列，屏幕窄了就少显示几列，自动换行，自适应各种屏幕！
   不需要媒体查询，布局就能灵活响应。
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   让你的网格卡片最小200px，最大自动填满一行，自动适应任何屏幕，布局永远美观！