网格布局，div自适应

div自适应屏幕

今天写页面出现出行内容在pc端正常排列，而在移动端就会排不下，如图所示

如图下图在移动端字体排不下

那这个时候“秃然”想起来之前看过网格布局，就试了一下，没想到轻松解决！
话不多说，代码上

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

贴图（图一是用了网格布局的pc端布局，图二是用了网格布局的移动端布局）