【心得】你今天种菜了吗? grid之路-grid的使用(6)

画栏位线条时我们都要计算要画几条线以及每一格的大小，以便接下来完美的将物件填入格子里
像是：

grid-template-columns: repeat(5,20%);

 grid-template-areas: 
    "black1 black1 black2 black3"
    "black1 black1 black4 black5";

除此之外，grid还可以透过 auto-fill 根据设定的宽度自动排出线条数量

grid-template-columns: repeat(auto-fill, 110px);

在父层空间500px的情况下，每一格宽110px的情况

在父层空间500px的情况下，每一格宽150px的情况

在使用auto-fill会发现如果父层宽度不能被每一格的宽度整除时，总是会有剩余空间出现(|||ﾟдﾟ)

这时候就可以出动 minmax 来弹性设定格宽了~

minmax(min, max)

原则上它会以max值来填满父层
可当min值>max值时，後面的那个max值会被忽略掉(然後就有可能会坏掉XD)
且如果父层的宽度小於设定的min值时，里面的物件会直接突出父层
这样说有点难理解~
假设设定

max-width: 500px;
min-width: 100px;

grid-template-columns: repeat(auto-fill, minmax(150px,250px));

在父层空间大於250px(最大值)之前都会以max值来填满空间

当父层空间小於250px(最大值)时，开始进行弹性缩放

达到设定的最小值後就不再缩放

这个时候如果父层的宽度小於设定的min值时，里面的物件会直接突出父层

-->实作codepen

RWD的应用上，在max最大值的地方搭配使用 fr 使用，即便更改父层宽度，或是更改子层的最大/最小宽度，都可以自动填满父层

 grid-template-columns: repeat(auto-fill, minmax(110px,1fr));

这样在RWD上会自由很多呢