[Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def
2024-08-31 19:08:14
What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-fill
and auto-fit
. We’ll explore what each one does and why we would need to use them on our grid-tracks.
For example, we have current solution:
grid-template-columns:
repeat(
3, /*each row has 3 repeat items*/
minmax(10px, auto)
minmax(20px, auto)
minmax(40px, auto)
minmax(80px, auto)
);
We tell it to repeat 3 times for a row.
But what if we don't want to hardcoded '3'. We want to dynamic change according to viewport.
We can use 'auto-fill' for that:
grid-template-columns:
repeat(
auto-fill, /*each row has 3 repeat items*/
minmax(50px, auto)
minmax(70px, auto)
minmax(90px, auto)
minmax(110px, auto)
);
We if we don't have enough box to fill the whole space. We can use 'auto-fit':
grid-template-columns:
repeat(
auto-fit,
minmax(50px, auto)
minmax(70px, auto)
minmax(90px, auto)
);
最新文章
- 在webapi2中使用OWIN 自寄宿模式
- Web Api 简介
- systemtap
- Mongodb副本集
- Material Design Button 样式
- 使得<;li>;在一行显示,去除浮动的方法
- ason 和 Java 对象转化示例
- hdu4666 最远曼哈顿距离
- java 中间String分类
- margin叠加相邻两个元素的上下margin是叠加在一起
- Tomcat 使用过程中的一些技巧
- OpenCV3.2 + VS2015环境配置
- 微信公众号tp3.2放进Model无效,几种实例化的方法试过,还是提示无法提供服务
- Java类型转化报错
- luoguP2526_[SHOI2001]小狗散步_二分图匹配
- mac下修改mysql默认字符集为utf8
- js中的原型对象链
- [转] UniCode编码表
- VirtualBox安装增强工具时:Unable to install guest additions: unknown filesystem type &#39;iso9660&#39;
- Complex Instance Placement
热门文章
- JavaScript学习总结(4)——JavaScript数组
- Beginning iOS Programming
- LOJ 6229 LCM / GCD (杜教筛+Moebius)
- GO语言学习(十二)Go 语言函数
- cocos2d-x 3.0 游戏关卡滑动 弹动 不会出现黑边效果
- Java vs C++:子类覆盖父类函数时缩小可访问性的不同设计
- amazeui学习笔记--css(HTML元素1)--按钮Button
- 微信支付v2开发(6) 发货通知
- Redo current损坏
- TTS-零基础入门之语音模板化