[Grid Layout] Use the repeat function to efficiently write grid-template values
We can use the repeat()
function if we have repeating specifications for columns and rows. With the minmax()
function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.
Using repeat:
grid-template-columns:
repeat(
3, /*each row has 3 repeat items*/
minmax(10px, auto)
minmax(20px, auto)
minmax(40px, auto)
minmax(80px, auto)
);
Can aslo add named grid line to it:
so that we can refer to those later.
.container {
display: grid;
grid-gap: 10px;
height: 100vh;
grid-template-columns:
[start] repeat(
3, /*each row has 3 repeat items*/
[col-xs-start] minmax(10px, auto)
[col-xs-end col-sm-start] minmax(20px, auto)
[col-sm-end col-md-start] minmax(40px, auto)
[col-md-end col-lg-start] minmax(80px, auto)
[col-lg-end]
) [end];
} .box:nth-of-type(26){
grid-column: col-sm-start / end;
}
[Grid Layout] Use the repeat function to efficiently write grid-template values的更多相关文章
- [Grid Layout] Use the minmax function to specify dynamically-sized tracks
Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a ...
- css grid layout in practice
css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- CSS3 Grid Layout & <track-size> & <line-name>
CSS3 Grid Layout & <track-size> & <line-name> grid container grid-template: < ...
- CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003
Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...
- CSS3 GRID LAYOUT
CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/
- iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6
In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...
- Unity3D 使用 UI 的 Grid Layout Group 组件。
1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...
- WPF笔记(2.4 Grid)——Layout
原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...
随机推荐
- error: function declaration isn’t a prototype [-Werror=strict-prototypes]
"warning: function declaration isn't a prototype" was caused by the function like that: ...
- CentOS 7 网络配置、远程访问
网络配置(配置固定IP访问) 相关命令 ip add 查看网卡状态 ifup eth0 打开端口eth0 ifdown eth0 关闭端口eth0 dhclient 自动获取IP mii-tool e ...
- 用py2exe打包成一个exe文件
用py2exe打包成一个exe文件 http://blog.csdn.net/franktan2010/article/details/46514607
- Mongodb总结4-Spring环境使用Mongodb
前几次的例子,要么是Shell,要么是普通Java应用程序的例子.实际情况,是要在Spring的项目里用,因此需要做一些改造. 1.配置文件C:\hanhai\config\mongodb.prope ...
- 《社交红利》读书总结--如何从微信微博QQ空间等社交网络带走海量用户、流量与收入
<社交红利--如何从微信微博QQ空间等社交网络带走海量用户.流量与收入>--徐志斌 著 <社交红利>这本书2013年9月才上市,卖的非常火. 我最初是在公司内部的期刊上,看到有 ...
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- C Tricks(十九)—— 求以任意数为底的对数
本文仅求对数的整数部分: int log(int n, int base){ int i = 1, cnt = 0; while (i*base < n){ i *= base; ++cnt; ...
- 常用协议(SPI, UART, I2C)
SPI: SPI是全双工的同步串行接口,数据速率可达几Mbps,在一般应用中有4根信号线:MOSI, MISO, SCK, SS. 根据时钟极性(CPOL)及相位(CPHA)不同可以组合成4种工作模式 ...
- SimpleDateFormat的使用问题
今天对过去的代码进行重构,因为使用静态方法调用的原因,使用了一个静态的SimpleDateFormat,结果FindBug报错了,查看了一下,说是使用了静态的SimpleDateFormat对象. S ...
- msys 中打开系统程序
按照msys 后发现sh自带的vim不好用,下载安装了个gvim,在etc/profile中作如下设置: alias gvim="D:/Program\ Files/Vim/vim73/gv ...