grid 布局的使用 css 网格布局，是一种二维布局%ignore_a_1%。 浏览器支持情况:老旧浏览器不支持， 概念： 网格容器。元素应用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: 网格区域填满。
http://www.dengb.com/HTML_CSS/1235400.htmlwww.dengb.comtruehttp://www.dengb.com/HTML_CSS/1235400.htmlTechArticlegrid 布局的使用，grid布局使用 grid 布局的使用 css 网格布局，是一种二维布局系统。 浏览器支持情况:老旧浏览器不支持， 概念： 网格容器…
—-想了解更多的css相关样式处理怎么解决关注
