【心得】你今天种菜了吗? 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上会自由很多呢

参考资料:
https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/
https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax()
https://www.hongkiat.com/blog/css-grid-layout-minmax/


<<:  Day 9 | Unity AR手游「山海异闻录」开发套件一览表

>>:  Day08-Kubernetes 那些事 -Service 篇

[D13] 空间滤波例子:Gaussian Filter

接者用高斯滤波器为例子,接者会对其权重参数(weighting, coefficient)讨论~ 所...

[Python] 关键字yield和return究竟有什麽不同?

学习Scrapy的过程中碰到 yeild 这个关键字,我使用Python快半年了,还真的是第一次遇到...

Day 23 云上大数据分析

随着时代变化,「Data」彷佛变成兵家必争之地,从零售、传产、工业、科技等等产业来看,会发现几乎每...

[Day 30] 阿嬷成为网页前端工程师的下一步

阿嬷成为网页前端工程师的下一步 尽管篇幅长短不一,我们在这 30 天当中讨论了怎麽写 HTML 标签...

Day 18 中场休息,来做点酷东西(状态管理)

中场休息的第三天~继续接着做 在取到值之後,接着要做的就是把它渲染到专案清单上啦!上面做的事情跟中场...