c语言排序菜单,CSS Grid布局入门-sqlite设置用户名和密码-WinFrom控件库|.net开源控件库|HZHControls官网...-CSDN博客

相信大家都比较熟悉flex布局了，最近有空研究了波grid布局，感觉虽然兼容性还不是太高，应用不是太普遍，但是功能非常强大。未来应该是grid+flex为主流，grid是二维布局，很灵活，适合整体构架，而flex是一维布局，适合处理局部细节。

介绍CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。

兼容性目前不是太友好

和felx类似，grid有容器和项目Grid容器属性列表Grid Container 的全部属性

display

grid-template-columns

grid-template-rows

grid-template-areas

grid-template

grid-column-gap

grid-row-gap

grid-gap

justify-items

align-items

justify-content

align-content

grid-auto-columns

grid-auto-rows

grid-auto-flow

grid

Grid项目的全部属性grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column

grid-row

grid-area

justify-self

align-self

被吓到了吗，反正第一次我看是被吓到了，不过没事，下面只会讲解其中常用的

下面栗子均用.grid_box，.grid_item分别指代容器和项目，并使用以下html结构

邻居元素

容器属性

displaygrid - 生成一个块级(block-level)网格

inline-grid - 生成一个行级(inline-level)网格

subgrid - 如果容器本身就是一个项目，就可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小。.grid_box { background: #054154; display: inline-grid; //行级网络，和span处于一行 } .grid_item { background: #0490db; border: 1px solid #fff; }

.grid_box { background: #054154; display: grid; //块级网络，将span挤入下一行 } .grid_item { background: #0490db; border: 1px solid #fff; }

grid-template-columns / grid-template-rowsgrid-template-rows是行高.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; } .grid_item { background: #0490db; border: 1px solid #fff; }

代表第一行高60px，第三行高40px,其他的所有行(不设置或者auto的行)平分剩余高度

grid-template-columns是列宽.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px auto auto; } .grid_item { background: #0490db; border: 1px solid #fff; }

和行高类似，这个代表第一列宽30px,第二列宽20px，第三列第四列平分剩余宽度(和行高不同的是列宽是你设置了多少就会有多少列，列数量和你设置的是相同的)

grid-gap【grid-gap】默认值为0，两个属性的缩写，第一个grid-row-gap(行与行之间的间距)，第二个grid-column-gap(列与列之间的间距),只设置了一个值，表示行和列的间距相等*/.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; //行间距2px,列间距4px } .grid_item { background: #0490db; border: 1px solid #fff; }

一些语法糖

repeat你可能会问如果中间有很多列/行，每个都写岂不是很麻烦，因此提供了repeat语法糖来简化写法.grid_box { grid-template-columns: 30px 20px auto auto; grid-template-columns: 30px 20px repeat(2,auto);//等价于}

fr另外，类似flex的1，grid里面也有类似的'份数单位'---fr..grid_box { grid-template-columns: 30px 20px auto auto; grid-template-columns: 30px 20px 1fr 1fr;//等价于 grid-template-columns: 30px 20px repeat(2,1fr);//也等价于}

minmax最大值最小值

grid-template-rows: minmax(auto, 30%) 1fr 1fr;表示第一行高最小auto,最大30%

项目属性

grid-area单体操作，控制个体的位置，凌驾于整体规则，4个属性分别是 grid-row-start(开始行线)， grid-column-start(开始列线)， grid-row-end(结束行线)，grid-column-end(结束列线)

比如下面用item3来单独操作.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; } .grid_item { background: #0490db; border: 1px solid #fff; } #item3{ grid-area: 1 /1/ 2/ 4; }

grid-area: 1 /1/ 2/ 4;代表item3的位置是，行线1到2，列线1到4，这四条线组成的区域即是item3的位置，是不是很强大，太叼了这个

span,负数你可能会问如果中间有很多列/行，那还要去数是第几列线岂不是很麻烦，因此又有了优化

和js里的slice类似，负数表示倒数

而span表示合并

因此本例中，以下都是等价的#item3{ grid-area: 1 /1/ 2/ 4; grid-area: 1 /1/ 2/ span 3;//等价 grid-area: 1 /1/ 2/ -2;//等价 }

order如果有两个子项目发生了重叠怎么办呢，就需要order来解决层级问题了。

和index类似于z-index，表明叠放顺序，数值越大，越在上。允许负数。.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; } .grid_item { background: #0490db; border: 1px solid #fff; } #item3{ grid-area: 1 /1/ 2/ 4; order: 1; } #item4{ grid-area: 1 /1/ 2/ 4; }

因为item3有order,所以item3盖住了item4

命名在我看来，命名是grid最强大的地方，你可以在容器里面设置命名，然后在子项目里面使用该命名

其中点号 . 代表一个空网格单元

比如我们来个常规的布局

aside

content

邻居元素.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer"; } .grid_item { background: #0490db; border: 1px solid #fff; } #header{ grid-area: header; } #aside{ grid-area: aside; } #content{ grid-area: content; } #footer{ grid-area: footer; }