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: 网格区域填满。
—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/csstutorial/109516.html