grid 布局的使用

grid 布局的使用

　　　css 网格布局，是一种二维布局系统。

　　　浏览器支持情况:老旧浏览器不支持，

　　　概念： 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。

　　　　　　<div class="container">

　　　　　　 　　<div class="item item-1"></div>

　　　　　　　　<div class="item item-2"></div>

　　　　　　　　<div class="item item-3"></div>

　　　　　　 </div>

　　　　网格项。网格容器的子元素。

　　　　　　<div class="container">

　　　　　　　　<div class="item "></div>

　　　　　　　　 <div class="item "></div>

　　　　　　　　<div class="item"></div>

　　　　　　 </div>

　　　　网格线。组成网格线的分界线，他们可以是列网格线，也可以是行网格线

　　　　网格轨道。两个相邻的网格线之间为网格轨道，可以认为是网格的行列或者行。

　　　　网格单元。两个相邻的列网格线和两个相邻的网格线组成的网格单元，它是最小的网格单元。

　　　　网格区。网格区是由任意数量网格单元组成。

　　设置在网格容器上的属性

　　　　注：当元素设置了网格布局，column、float、clear、vertical-align属性无效

　　　　1. display: grid | inline-grid | subgrid;

　　　　　　属性值： grid: 生成块级网络

　　　　　　inline-grid: 生成行内网格

　　　　　　subgrid: 如果容器本身是网格项，用来继承父容器的行列大小。

　　　　

　　　　2.grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;

　　　　　　grid-template-rows: <track-size> ... | <line-name> <track-size>

　　　　　　设置行和列的大小。

　　　　　　　　属性值： track-size: 轨道大小，可以使用css长度，百分比或用分数。

　　　　　　　　　　　　line-name:网格线名字，可以选择任意名字。

　　　　　　　　　　当设置行或者列大小为auto 时，网格会自动分配空间和网格名称。

　　　　　　　　.container{

　　　　　　　　　　　　 display:grid;

　　　　　　　　　　　　 grid-template-columns: 40px 50px auto 50px 40px;

　　　　　　　　　　　　 grid-template-rows: 25% 100px auto;

　　　　　　　　　　 }

 

　　　　　　可以给网格线定义名字.

　　　　　　　　　　.container{

　　　　　　　　　　　　display:grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start]

　　　　　　　　　　　　　　50px [five] 40px [end];

　　　　　　　　　　　　 grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line]

　　　　　　　　　　　　auto [last-line];

　　　　　　　　　　 }

　　　　　　用fr单位可以将容器分为几等份，例如下面分成三等份

　　　　　　　　.container{

　　　　　　　　　　　　 display:grid;

　　　　　　　　　　　　grid-template-columns: 1fr 1fr 1fr;

　　　　　　　　}

　　　　3.grid-template-areas

　　　　　　通过获取网格项中的grid-area属性值（名称），来定义网格模版。

　　　　　　重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元。

　　　　　　　　属性值： grid-area-name: 网格项的grid-area属性值（名字）‘.’ : 空网格单元 none: 不定义网格区域

　　　　　　　　　　.item-a{ grid-area: header; }

　　　　　　　　　　.item-b{ grid-area: main; }

　　　　　　　　　　.item-c{ grid-area: sidebar; }

　　　　　　　　　　.item-d{ grid-area: footer; }

　　　　　　　　　　.container{

　　　　　　　　　　　　　　 display:grid;

　　　　　　　　　　　　　　 grid-template-columns: 50px 50px 50px 50px;

　　　　　　　　　　　　　　grid-template-rows: auto;

　　　　　　　　　　　　　　grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer" }

　　　　

　　　　4. grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;

　　　　　　　　网格单元间距

　　　　　　　　属性值：line-size: 网格线间距,设置单位值

　　　　　　　　.container{

　　　　　　　　　　display:grid;

　　　　　　　　　　grid-template-columns: 100px 50px 100px;

　　　　　　　　　　grid-template-rows: 80px auto 80px;

　　　　　　　　　　grid-column-gap: 10px; grid-row-gap: 15px;

　　　　　　　　}

　　　　5. grid-gap：<grid-column-gap> <grid-row-gap>;

　　　　　　是grid-column-gap 和 grid-row-gap简写。

　　　　　　　　.container{

　　　　　　　　　　display:grid;

　　　　　　　　　　grid-template-columns: 100px 50px 100px;

　　　　　　　　　　grid-template-rows: 80px auto 80px;

　　　　　　　　　　grid-gap: 10px 15px;

　　　　　　　　}

　　　　6. justify-items: start | end | center | stretch（默认） ;

　　　　　　垂直于列网格线对齐，适用于网格容器里的所有网格项。

　　　　　　　　属性值：

　　　　　　　　　　start: 左对齐。

　　　　　　　　　　end: 右对齐。

　　　　　　　　　　center: 居中对齐。

　　　　　　　　　　stretch: 填满（默认）。

　　　　　　　　　　.container{

　　　　　　　　　　　　 display:grid;

　　　　　　　　　　　　justify-items: start;

　　　　　　　　　　 }

　　

　　　　7. align-items: start | end | center | stretch ;

　　　　　　　　垂直于行网格线对齐，适用于网格容器里的所有网格项。

　　　　　　　　属性值：

　　　　　　　　　　start： 顶部对齐。

　　　　　　　　　　end： 底部对齐。

　　　　　　　　　　center： 居中对齐。

　　　　　　　　　　stretch：填满（默认）。

　　　　8. justify-content: start | end | center | stretch | space-around |

　　　　　　　　space-between | space-evenly ;

　　　　　　如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容

　　　　　　　　器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）。

　　　　　　属性值： start: 左对齐。 end: 右对齐。 center: 居中对齐。

　　　　　　　　　　stretch: 填满网格容器。 space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。

　　　　　　　　　　　　 space-between: 两边对齐，网格项之间间隔相等。 space-evenly: 网格项间隔相等。

　　　　　　.container{ display:grid; justify-content: start; }

　　　　9. align-content: start | end | center | stretch | space-around |

　　　　　　　　space-between | space-evenly ;

　　　　　　如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格

　　　　　　　　容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）。

　　　　　　　　　　属性值： start: 顶部对齐。 end: 底部对齐。 center: 居中对齐。

　　　　　　　　　　　　　　 stretch: 填满网格容器。 space-around: 网格项两边间距相等，网格项之间间隔是单侧的2倍。

　　　　　　　　　　　　　　space-between: 两边对齐，网格项之间间隔相等。 space-evenly: 网格项间隔相等。

　　　　　　.container{ display:grid; align-content: start; }

　　

　　　　10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;

　　　　　　自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器

　　　　　　范围时，将自动创建隐式网格轨道.

　　　　　　属性值：track-size: 网格轨道大小,可以是固定值，百分比或者是

　　　　　　分数（fr单位）。

　　　　　　.container{

　　　　　　　　　　display:grid;

　　　　　　　　　　grid-template-columns: 60px 60px;

　　　　　　　　　　grid-template-rows: 90px 90px

　　　　　　 }

　　　　

　　　　11. grid-auto-flow : row（默认） | column | dense ;

　　　　　　在没有设置网格项的位置时，这个属性控制网格项怎样排列

　　　　　　　　属性值：

　　　　　　　　　　row: 按照行依次从左到右排列。

　　　　　　　　　　column: 按照列依次从上倒下排列。

　　　　　　　　　　dense: 按先后顺序排列。

 

设置在网格项上的属性

　　　　1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;    

　　　　　　　　　grid-column-end: <number> | <name> | span <number> | span <name> | auto ;    

　　　　　　　　　grid-row-start: <number> | <name> | span <number> | span <name> | auto ;    

　　　　　　　　　grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

　　　　通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的

　　　　　　开始位置，grid-column-end、grid-row-end定义网格项的结束位置。

　　　　　　属性值： line: 指定带编号或者名字的网格线。 span <number>: 跨越轨道的数量。

　　　　　　 span <name>: 跨越轨道直到对应名字的网格线。 auto: 自动展示位置，默认跨度为1。

　　　　　　　　.item-a{

　　　　　　　　　　　　 grid-column-start: 2;

　　　　　　　　　　　　grid-column-end: five;

　　　　　　　　　　　　 grid-row-start: row1-start grid-row-end: 3

　　　　　　　　}

　　　　

　　　　2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;      

　　　　　　grid-row: <start-line> / <end-line> | <start-line> / span <value> ;

　　　　　　　　是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。

　　　　　　　　.item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }

　　　　

　　　　3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;

　　　　　　定义网格项名字，以便创建模块（容器属性grid-template-areas来定义模块）。

　　　　　　　　属性值： name: 项目名子。 <row-start> / <column-start> / <row-end> / <column-end>:

　　　　　　可以是数字或网格线名字。

　　　　　　　　例子： 定义网格项名字：

　　　　　　　　　　　　.item-d{ grid-area: header }

　　　　　　　　　　　　通过网格线定位网格项：

　　　　　　　　　　.item-d{

　　　　　　　　　　　　　　grid-area: 1 / col4-start / last-line / 6 ;

　　　　　　　　　　　　}

　　　　4. justify-self: justify-self: start | end | center | stretch;

　　　　　　定义单个网格项垂直于列网格线的对齐方式。

　　　　　　属性值： start: 网格区域左对齐。 end: 网格区域右对齐。

　　　　　　　　　　 center: 网格区域居中。 stretch: 网格区域填满。

　　　　　　

　　　　5. align-self: start | end | center | stretch;

　　　　　　定义单个网格项垂直于行网格线的对齐方式。

　　　　　　属性值：

　　　　　　　　start: 网格区域顶部对齐。

　　　　　　　　end: 网格区域底部对齐。

　　　　　　　　center: 网格区域居中。

　　　　　　　　stretch: 网格区域填满。