本文主要是介绍博客grid响应式布局，代码+讲解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
css使用grid实现响应式布局
效果展示
我知道你想先看到效果在决定是否将这一篇文章作为你的解决方案，不要问我为什么，我也是这样的
作用
适配不同设备，手机，平板
代码及讲解
整体代码
.cardBody {display: grid;grid-gap: 10px;}@media (min-width: 0px) {.cardBody {grid-template-columns: repeat(1,1fr);}
}
@media (min-width: 400px) {.cardBody {grid-template-columns: repeat(2,1fr);}
}
@media (min-width: 550px) {.cardBody {grid-template-columns: repeat(3,1fr);}
}
@media (min-width: 750px) {.cardBody {grid-template-columns: repeat(4,1fr);}
}
代码拆解解释
.cardBody {display: grid;grid-gap: 10px;}
先初始化一个grid布局，设置布局的间隙gap
@media (min-width: 400px)
media监听视口宽度，min-width意思是一个临界点，也就是允许的最小值，小于这个点则样式则不生效，不是惯性思维想的那个小于多少就生效
可能会有点绕？那就这么记，大于该宽度的就生效
因此我们就可以从小到大设置不同尺寸对应的布局
为什么是从小到大呢？ 因为从大到小，那么根据css的样式后覆盖前，后面的小尺寸同时满足了大于XX尺寸则覆盖，那么会导致大屏的样式失效
（可以停下来好好脑部一下，或者直接CV就行，不过嘛…）
@media (min-width: 750px) {.cardBody {grid-template-columns: repeat(4,1fr);}
}
生效该样式，覆盖一个新布局给他
这里是列布局，repeat第一个参数为重复次数也就是有几列，第二个参数为每列占据的宽度，这里1fr意思是均等分，也就是如果当前总宽度为100pX那么4列就是100/4 也就是每列平均分的25个像素
当然还有个更简单的方法！只需要一条代码
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
第一个列数根据总宽度能分给多少个div而定，第二个为当列小于200px则换行，1fr为当有其剩余空间时给他填满
这样就可以保证照片永远不会小于200px，并且将会填满一行宽度（如果一行太长可能会拉伸图片，因此一行宽度也就是外层div宽度尽量设置小一点）
个人推荐第一种，自由度高，虽然说第二种方便，但是…
这篇关于博客grid响应式布局，代码+讲解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
