画栏位线条时我们都要计算要画几条线以及每一格的大小,以便接下来完美的将物件填入格子里
像是:
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 篇
接者用高斯滤波器为例子,接者会对其权重参数(weighting, coefficient)讨论~ 所...
学习Scrapy的过程中碰到 yeild 这个关键字,我使用Python快半年了,还真的是第一次遇到...
随着时代变化,「Data」彷佛变成兵家必争之地,从零售、传产、工业、科技等等产业来看,会发现几乎每...
阿嬷成为网页前端工程师的下一步 尽管篇幅长短不一,我们在这 30 天当中讨论了怎麽写 HTML 标签...
中场休息的第三天~继续接着做 在取到值之後,接着要做的就是把它渲染到专案清单上啦!上面做的事情跟中场...