Grid网格布局
- Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。
| 作用在grid容器上 |
作用在grid子项上 |
| grid-template-columns |
grid-column-start |
| grid-template-rows |
grid-column-end |
| grid-template-areas |
grid-row-start |
| grid-template |
grid-row-end |
| grid-column-gap |
grid-column |
| grid-row-gap |
grid-row |
| grid-gap |
grid-area |
| justify-items |
justify-self |
| align-items |
align-self |
| place-items |
place-self |
| justify-content |
| align-content |
| palce-content |
grid-template-columns 和 grid-template-rows
- 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）
- 有时候，我们网络的划分是很有规律的，如果需要添加多个纵横网络时，就可以利用repeat()语法进行简化操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 1px dotted gray;
display: grid;
/* grid-template-rows:第一行 第二行 第三行 ... */
grid-template-rows: 100px auto 25%;
/* grid-template-rows:第一列 第二列 第三列 ... */
grid-template-columns: 100px 100px 200px 100px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
单位 fr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px dotted gray;
display: grid;
/* fr 该行占总宽度的比例 当数值综合大于等于1的时候 才会将盒子沾满*/
/* grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr; */
/* repeat */
grid-template-rows: repeat(3,1fr);
grid-template-columns: 1fr 1fr 1fr;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
grid-template-area 和 grid-template
- area是区域的意思 grid-template-area就是给我们的网格划分区域的。此时grid子项只要使用grad-area属性指定其隶属于哪个区
- grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px dotted gray;
display: grid;
/* fr 该行占总宽度的比例 当数值综合大于等于1的时候 才会将盒子沾满*/
/* grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr; */
/* repeat */
grid-template-rows: repeat(3,1fr);
grid-template-columns: 1fr 1fr 1fr;
/* 只可以形成矩形 不能形成其他图形 */
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3"
;
}
.box div{
border: 1px solid #666;
}
.box div:nth-of-type(1){
grid-area: a1;
}
.box div:nth-of-type(2){
grid-area: a2;
}
.box div:nth-of-type(3){
grid-area: a3;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px dotted gray;
display: grid;
grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;
}
.box div{
border: 1px solid #666;
}
.box div:nth-of-type(1){
grid-area: a1;
}
.box div:nth-of-type(2){
grid-area: a2;
}
.box div:nth-of-type(3){
grid-area: a3;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
grid-column-gap和grid-row-gap
- grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸
- CSS grid-gap属性是grid-column-gap和grid-row-gap的复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
/* border: 1px dotted gray; */
display: grid;
grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
/*复合写法*/
/* grid-gap: 横向 纵向; */
/* grid-gap: 10px 20px; */
}
.box div{
border: 1px solid #666;
}
.box div:nth-of-type(1){
grid-area: a1;
}
.box div:nth-of-type(2){
grid-area: a2;
}
.box div:nth-of-type(3){
grid-area: a3;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
justify-items 和 align-items
- justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
- align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
- place-items可以让align-items和justify-items属性写在单个声明中。
注：
使用这两个属性之后，网格不在撑开 而是用内容去撑开。
| 取值 |
含义 |
| stretch |
默认值，拉伸。表现为水平或者垂直填充 |
| start |
表现为容器左侧或者顶部对齐 |
| end |
表现为容器右侧或者底部对齐 |
| center |
表现为水平或垂直居中对齐 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px dotted gray;
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: 1fr 1fr 1fr;
/* justify-items: end;
align-items: end; */
/* place-items:纵向 横向 */
place-items:start end;
}
.box div{
border:1px dotted gray;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
justify-content 和 align-content
- justify-content指定了网格元素的水平分布方式。
- align-content指定了网格元素垂直分布方式。
- place-content可以让justify-content和align-content属性写在一个CSS声明中。
| 取值 |
含义 |
| stretch |
默认值，拉伸。表现为水平或者垂直填充。 |
| start |
表现为容器左侧对齐或者顶部对齐 |
| end |
表现为容器右侧或者底部对齐 |
| center |
表现为水平或者垂直居中 |
| space-between |
表现为两端对齐 |
| space-around |
享有独立不重叠的空白空间 |
| sapce-evenly |
平均分配空白空间 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px dotted gray;
display: grid;
grid-template-rows: repeat(3,auto);
grid-template-columns: repeat(3,auto);
/* justify-content: space-between;
align-content: space-between; */
/* place-content:纵 横 */
place-content: space-around space-between;
}
.box div{
border:1px dotted gray;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
作用在grid子项上的css属性
| 取值 |
含义 |
| grid-column-start |
水平方向上占据的起始位置。 |
| grid-column-end |
水平方向上占据的结束位置。（span属性） |
| grid-row-start |
垂直方向上占据的起始位置。 |
| grid-row-end |
垂直方向上占据的结束位置。（sapn属性） |
| grid-column |
grid-column-start + grid-column-end的缩写。 |
| grid-row |
grid-row-start + grid-row-end 的缩写。 |
| grid-area |
表示当前网格所占用的区域，名字和位置两种表示方法。 |
| justifty-self |
单个网格元素的水平对齐方式。 |
| align-self |
单个网格元素的垂直对齐方式。 |
| place-self |
align-self 和 justify-self的缩写。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px dotted gray;
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
}
.box div{
border:1px dotted gray;
/* grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4; */
/* span 表示占据的个数 超出盒子无效*/
/* grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: span 2; */
/* 起始 / 结束 */
grid-column: 2 / 3;
grid-row: 2 / span 2;
/* 水平起始 / 垂直起始 / 水平结束 / 垂直结束 */
/*grid-area: 1 / 2 / 3 / 4 ;*/
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px dotted gray;
display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
}
.box div{
border:1px dotted gray;
}
.box div:nth-last-child(5){
/* justify-self: start;
align-self: end; */
/* 纵 横 */
place-self: end start;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
