Grid网格布局+案例--688IT编程网

Grid⽹格布局+案例Grid⽹格布局

Grid布局是⼀个⼆维的布局⽅法，纵横两个⽅向总是同时存在。

作⽤在容器上的：

display : grid

grid-template-columns : 设置列数

grid-template-rows : 设置⾏数

fr单位

repeat()⽅法

注：⽹格中提供了⼀个新的单位：fr ( ⽐例单位 )

grid-template-areas : 划分区域的

注：区域必须是矩形。

grid-template：复合写法

grid-template-rows

grid-template-columns

grid-template-areas

grid-template:

"a1 a1 a1" 1fr

"a3 a3 a2" 1fr

/1fr 1fr 1fr;

grid-column-gap : 列的间距

grid-row-gap : ⾏的间距

grid-gap : 复合写法

grid-row-gap grid-column-gap

justify-items : ⼦项的⽔平居中⽅式

默认 : stretch 默认值，拉伸。表现为⽔平或垂直填充。

start

center

end

align-items : ⼦项的垂直居中⽅式

默认 : stretch 默认值，拉伸。表现为⽔平或垂直填充。

start

center

end

place-items : 复合写法

align-items justify-items

justify-content : 整体⽹格的⽔平对齐⽅式

默认：stretch

start

end

center

space-between

space-around

space-evenly

align-content : 整体⽹格的垂直对齐⽅式

默认：stretch

start

end

center

space-between

space-around

space-evenly

place-content : 复合写法

align-content justify-content

作⽤在⼦项上的：

grid-area : 指定的区域

1.对应⽹格的名字

2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4;

grid-row-start / grid-column-start / grid-row-end / grid-column-end

grid-column-start ⽔平⽅向上占据的起始位置

grid-column-end ⽔平⽅向上占据的结束位置

grid-row-start 垂直⽅向上占据的起始位置

grid-row-end 垂直⽅向上占据的结束位置

注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，⽽是个数。

正常数字是位置，加上span是个数。

grid-column:3 / 4;

grid-column-start / grid-column-end

grid-row:1 / span 2;

grid-row-start / grid-row-end

justify-self 单个⽹格中⽔平对齐⽅式

algin-self单个⽹格中竖直对齐⽅式

place-self复合写法，有顺序（竖直，⽔平）

实例：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{margin: 0;padding: 0;}

ul{list-style: none;}

a{text-decoration: none;color: #77818e;}

img{display: block;}

.clear:after{content: "";display: block;clear: both;}

html,body{height: 100%;}

#box{height:100%;display: flex;}

#box .box1{width:250px;}

#box .box1 div:nth-of-type(1){height: 240px;line-height: 240px;font-size: 26px;color: #77818e;font-family: Arial; padding-left: 24px;} #box .box1 div:nth-of-type(2){height: 238px;font-size: 20px;color: #77818e;font-family: Arial;padding-left: 26px;}

#box .box1 div:nth-of-type(2) li{height: 34px;}

#box .box1 div:nth-of-type(3){height: 70px;line-height: 72px;font-size: 20px;color: #77818e;font-family: Arial;padding-left: 26px;} #box .box1 div:nth-of-type(4){height: 80px;line-height: 86px;font-size: 14px;color: #77818e;}

#box .box1 div:nth-of-type(4) a{margin-left:22px;}

#box .box1 div:nth-of-type(5){height: 70px;font-size: 16px;color: #77818e;font-family: Arial;padding-left: 24px;}

#box .box1 div:nth-of-type(6){height: 52px;line-height: 52px; font-size: 10px;color: #77818e;font-family: Arial;}

#box .box1 div:nth-of-type(6) a{margin-left: 24px;}

#box .box1 .div text{float: left;}

#box .box2{width:auto;height: 100%;

display:grid;flex: 1;

grid-template-columns: repeat(6,1fr);

grid-template-rows: repeat(4,1fr);

grid-template-areas:

"a1 a1 a2 a3 a3 a3"

"a4 a4 a4 a5 a6 a6"

"a4 a4 a4 a7 a8 a8";}

#box .box2 div:nth-of-type(1){grid-area: a1;}

#box .box2 div:nth-of-type(2){grid-area: a2;}

#box .box2 div:nth-of-type(3){grid-area: a3;}

#box .box2 div:nth-of-type(4){grid-area: a4;}

#box .box2 div:nth-of-type(5){grid-area: a5;}

#box .box2 div:nth-of-type(6){grid-area: a6;}

#box .box2 div:nth-of-type(7){grid-area: a7;}

#box .box2 div:nth-of-type(8){grid-area: a8;}

#box .box2 div a{width:100%;height:100%;display: block;}

#box .box2 div img{width: 100%;height: 100%;display: block;}

#box .box2 div{position: relative;overflow: hidden;}

#box .box2 div p{width: 100%;height: 100%; color: white;background: rgba(0, 0, 0, .5);text-align: center;font-size: 16px;position: absolute;left: -100%; t ransition: 1s;display: flex;justify-content: center;align-items: center;}

#box .box2 div:hover p{left:0;top:0;}

</style>

</head>

<body>

<div>

<a href=""><p>JEAN-GEORGES</p></a>

</div>

<div>

<ul>

<a href=""><li>ABOUT</li></a>

<a href=""><li>RESTAURANTS</li></a>

<a href=""><li>GROUPS $ EVENTS</li></a>

<a href=""><li>PHOTOS</li></a>

<a href=""><li>STORE</li></a>

<a href=""><li>PRESS</li></a>

<a href=""><li>RECIPES</li></a>

</ul>

</div>

<div>

<a href=""> RESERVATIONS</a>

</div>

<div>

</div>

<div>

<ul>

<a href=""><li>CAREERS</li></a>

<a href=""><li>CONTENT US</li></a>

<a href=""><li>NEWSLETTER</li></a>

<a href=""><li>ACCESSIBLE</li></a>

</ul>

</div>

<div>

<a href="">LEGAL</a> |

<a href="">PHOTOS</a> |

<a href="">CREDITS</a>

</ul>

</div>

<div>