Grid——最强大的布局
2020-12-01 本文已影响0人
我是Msorry
兼容性：https://www.caniuse.com/css-grid
Grid 布局是二维布局，可以同时对列和行进行操作
注意：设为 Grid 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
Grid Line 网格线
网格由网格线构成，网格线可以是水平的也可以是垂直的，下面例中的黄线就是一个列网格线。
image.png
Grid Area
网格区域由任意数量的网格单元组成， 下面例中的黄色区域就是一个网格区域。
image.png
grid-container的属性
画网格
- grid-template-columns 每列的宽度
- grid-template-rows 每行的高度
设置列宽和行高
.grid_container{
display:grid;
grid-template-columns:10% auto 10%;
grid-template-rows:100px 100px auto 20px;
}
给网格线命名并设置列宽和行高
注意：一个网格线可以有多个名字
.grid_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 row2-start] 25% [row2-end];
}
包含重复的部分，则可以使用 repeat() 简化写法
grid-template-columns: repeat(3, 20px) 30px;
/*上下两种写法等价*/
grid-template-columns: 20px 20px 20px 30px;
自由空间是在排除所有不可伸缩的 grid item 之后计算得到的，fr 单位能使轨道在自由空间中按比例伸展
grid-template-columns: 1fr 50px 1fr 1fr;
分配网格区域
grid-template-areas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.grid_container{
display:grid;
width:100%;
height:500px;
border:1px solid red;
grid-template-rows:100px auto 100px;
grid-template-columns: 50px auto 100px;
grid-template-areas:
"header header header"
". main sidebar"
"footer footer footer";
}
.header{
grid-area:header;
background: #ddd;
}
.main{
grid-area:main;
background: #f60;
}
.sidebar{
grid-area:sidebar;
background: green;
}
.footer{
grid-area:footer;
background: yellow;
}
</style>
</head>
<body>
<div class="grid_container">
<div class="header">header</div>
<div class="main">
main
</div>
<div class="sidebar">sidebar</div>
<div class="footer">footer</div>
</div>
</body>
</html>
image.png
grid-template 上面三个属性的简写
grid-template:
"header header header" 50px
". main sidebar" auto
"footer footer footer" 50px
/ 100px auto 100px;
隐式轨道宽度
隐式网格轨道在显式的定位超出指定网格范围的行或列时被创建
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
image.png
grid-auto-columns 隐式列宽
grid-auto-rows 隐式行高
grid-auto-columns: 60px;
image.png
自动布局
没有指明具体位置的 grid item 可以使用此属性自动布局
grid-auto-flow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
background: rgba(128,0,0,0.5);
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
background: rgba(0,128,0,0.5);
}
.item-b{
background: rgba(0,0,128,0.5);
}
.item-c{
background: rgba(128,128,0,0.5);
}
.item-d{
background: rgba(128,128,128,0.5);
}
</style>
</head>
<body>
<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</section>
</body>
</html>
image.png
当设置 grid-auto-flow: column 时
image.png
grid 以上所有属性的简写
语法：
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
.container {
grid: 200px auto / 1fr auto 1fr;
}
/*上下两种写法等价*/
.container {
grid-template-rows: 200px auto;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: none;
}
.container {
grid: column 1fr / auto;
}
/*上下两种写法等价*/
.container {
grid-auto-flow: column;
grid-auto-rows: 1fr;
grid-auto-columns: auto;
}
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
/*上下两种写法等价*/
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}
设置间距
grid-column-gap 设置列之间的间距
grid-row-gap 设置行之间的间距
grid-column-gap: 10px;
grid-row-gap: 15px;
grid-gap 上面两个属性的简写
grid-gap: 10px 15px;
行/列对齐方式
justify-items 水平方向对齐方式
align-items 垂直方向对齐方式
网格对齐方式
justify-content 水平方向对齐方式
align-content 水平方向对齐方式
grid-items的属性
确定 item 位置
grid-column-start 开始的列线
grid-column-end 结束的列线
列序从左往右是正数，从右往左是负数
span指定要跨越的网格数
grid-column-start: 3;
grid-column-end: 6;
grid-column 以上两个属性的简写
grid-column: 3 / span 2;
/*上下两种写法等价*/
grid-column: 3 / 6;
grid-row-start 开始的行线
grid-row-end 结束的行线
行序从上往下是正数，从下往上是负数
grid-row-start: 1;
grid-row-end: 4;
grid-row 以上两个属性的简写
grid-row: 1 / span 3;
/*上下两种写法等价*/
grid-row: 1 / 4;
grid-area
语法（上左下右）：
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-area:2 / 3 / -2 /-1
item 自身对齐方式
justify-self 自身水平对齐
align-self 自身垂直对齐
order item展示顺序
默认情况下，所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
background: rgba(128,0,0,0.5);
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
background: rgba(0,128,0,0.5);
}
.item-b{
background: rgba(0,0,128,0.5);
order:1;
}
.item-c{
background: rgba(128,128,0,0.5);
}
.item-d{
background: rgba(128,128,128,0.5);
}
</style>
</head>
<body>
<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</section>
</body>
</html>
image.png
