013-Grid布局详解

 

 

Grid布局

 

 

Grid用起来很简单

就是用网格来设计布局

 

看看代码

<div class="div01">
    <div class="div02 item">aaa</div>
    <div class="div03 item">bbb</div>
    <div class="div04 item">ccc</div>
    <div class="div05 item">ddd</div>
</div>

这里我们先不考虑我们要多少的网格

我们只考虑我们的容器中需要几个子项目,,直白的说,就是几个方框

比如我这里就是1个容器中包含了4个div,也就是4个子项目,,也就是4个方块

 

 

然后我们来写css

.div01 {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-template-areas:
            "a . . . "
            "b b . . "
            "c . d d "
            ". . d d ";
}

先来看div01,也就是大的容器

display为grid,也就是grid布局

grid-template-columns也就是几列,我这边是4列, 所以需要写100px, 100px, 100px, 100px

这样写太麻烦,可以直接写成 repeat(4,100px)

grid-template-rows是几行,道理是一样的

然后是grid-template-areas,

这个是用来表示布局如何分配,如何分布,就像一个草图一样

"a . . . "
"b b . . "
"c . d d "
". . d d ";

比如这里,第一行就第一个格子表示a,其他都是没有,所以用点.来表示

右下角用了4个格子来表示d,所以d占用了4个格子

 

.div02 {
    grid-area: a;
}

.div03 {
    grid-area: b;
}

.div04 {
    grid-area: c;
}

.div05 {
    grid-area: d;
}

.item {
    border: 2px solid red;
}

然后子项目,也就是容器里面的方块,我们用grid-area,

指定a,b,c,d

 

 

然后我们来看一下显示效果

"a . . . "
"b b . . "
"c . d d "
". . d d ";

果然和我们的areas草图是一样的

 

 

 

然后我们加上一些间距gap

.div01 {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    grid-template-areas:
            "a . . . "
            "b b . . "
            "c . d d "
            ". . d d ";
    grid-gap: 20px;
}

.div02 {
    grid-area: a;
}

.div03 {
    grid-area: b;
}

.div04 {
    grid-area: c;
}

.div05 {
    grid-area: d;
}

.item {
    border: 2px solid red;
}

 

 

 

 

 

 

 

 

然后我们拿大学网页来举个例子

 

我们看到这个主页是这样的

那么我们可以试着画出草图

"a a a a a a"
"a a a a a a"
"a a a a a a"
"b b b c c c"
"b b b c c c"
"d d d d d d"
"d d d d d d"
"e e f f g g"
"e e f f g g"

草图大概是这样

 

我们看到,一共是6列,9行

那么columns和rows是这样

grid-template-columns: repeat(6, 100px);
grid-template-rows: repeat(9, 100px);

 

 

然后我们来写代码

html

<div class="container">
    <div class="div01 item">aaa</div>
    <div class="div02 item">bbb</div>
    <div class="div03 item">ccc</div>
    <div class="div04 item">ddd</div>
    <div class="div05 item">eee</div>
    <div class="div06 item">fff</div>
    <div class="div07 item">ggg</div>
</div>

然后css

.container {
    display: grid;
    grid-template-columns: repeat(6, 100px);
    grid-template-rows: repeat(9, 100px);
    grid-template-areas:
            "a a a a a a"
            "a a a a a a"
            "a a a a a a"
            "b b b c c c"
            "b b b c c c"
            "d d d d d d"
            "d d d d d d"
            "e e f f g g"
            "e e f f g g";;
    grid-gap: 20px;
}

.div01 {
    grid-area: a;
}

.div02 {
    grid-area: b;
}

.div03 {
    grid-area: c;
}

.div04 {
    grid-area: d;
}

.div05 {
    grid-area: e;
}

.div06 {
    grid-area: f;
}

.div07 {
    grid-area: g;
}

.item {
    border: 2px solid red;
}

 

然后我们看下显示效果

 

 

和设计图很像了,可以再略微调整一下尺寸就可以了