grid 布局的使用
2018-06-24 02:04:11来源：未知 阅读 ()
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: 网格区域填满。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：Web前端学习——HTML
相关文章
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- CSS Grid 布局 2020-06-01
- 通配符选择器 2020-05-27
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签