初学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%的固定单元格宽度去填充容器，当前行剩余宽度不能放下一个单元格的时候，自然要换行啦！