初学flex和grid遇到的小问题
最近在看flex和grid两个布局方式。写了个demo页面一个个试属性。
结果发现：
当设置容器css如下时：
display:grid;
grid-template-columns:repeat(auto-fill, 12%) ;
height:400px;
width: 100%;
容器的宽度不是100%，如图
看上面剩余文字居中就能看出来，下面的几个绿色格子所在容器没有沾满整行的宽度。当时只是觉得很奇怪，明明宽度设置100%了啊！
然后我改了 grid-template-columns:repeat(auto-fill, 12%) 里，12%的数值，当这个数值能整除100的时候，宽度能沾满整行。
顿时被自己蠢哭了。grid-template-columns:repeat(auto-fill, 12%)；这条的意思是：以12%的固定单元格宽度去填充容器，当前行剩余宽度不能放下一个单元格的时候，自然要换行啦！