基础

一、开启grid布局

//css
.father {
    display: grid;
}
//html
<div class="father">
        <div style="background-color: red;">1</div>
        <div style="background-color: yellow;">2</div>
        <div style="background-color: gray;">3</div>
        <div style="background-color: blue;">4</div>
        <div style="background-color: green;">5</div>
</div>

效果:

当给父级容器设置了width和height后，grid布局会拉伸子元素填满父容器(其实是各自的网格):

.father {
    display: grid;
    width: 500px;
    height: 500px;
}

效果:

二、grid-template-columns设置列宽

父元素中：grid-template-columns属性(设置每一列宽度)

.father {
    display: grid;
    grid-template-columns: 50px 100px 150px;
    //grid-template-columns: 50px 100px 150px 200px 20px;
}

效果1

效果2

三、特有的fr单位

.father {
    display: grid;
    grid-template-columns: 1fr 1fr;//2列，宽:1/2, 1/2
}

同理:

.father {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;//3列，宽:1/4, 1/4, 2/4
}

四、gap(row-gap和column-gap)设置行、列间距

.father {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;//3列：1/4, 1/4, 1/2
    gap: 10px 30px;//行 列
}

这里如果列宽非常大 (gap:10px 500px)，首先会挤压子元素的content，最小为子元素里面内容的宽度，然后底部会出现滚动条。(父宽度-所有的列宽后的剩余空间来分配给元素，这里为1:1:2)，单看grid布局的每一行的height是相同的，单看grid布局每一列的width是相同的

这一行所有的height都被撑开：

这一列所有的width都被撑开：

五、grid-template-areas自定义布局

实现以下布局：左边sidebar占1/3，右边content占2/3

//html
<div style="width: 500px; height: 500px;">
        <div class="father">
            <header>头部</header>
            <aside>侧边栏</aside>
            <main>内容</main>
            <footer>底部</footer>
        </div>
</div>

//css
.father {
      display: grid;
      grid-template-areas: "header header header"
                           "sidebar content content"
                           "footer footer footer";
                         //grid布局区域就会如上来划分，这些都是自定义的名字来划分
}
header {
     grid-area: header;//绑定到父级中对应的划分
     background-color: red;
}
main {
     grid-area: content;//绑定到父级中对应的划分
     background-color: yellow;
}
aside {
     grid-area: sidebar;//绑定到父级中对应的划分
     background-color: blue;
}
footer {
     grid-area: footer;//绑定到父级中对应的划分
     background-color: aqua;
}

效果：

六、设置对齐

网格布局：就是将区域首先划分为一个个网格，然后控制各个子元素在各个网格中的位置(子元素<=网格)， items是子元素，content是网格整体

1.align-items和align-content纵向

值：start/center/end/等

.father {
        display: grid;
        align-items: start; //单个网格中，子元素竖直方向靠上(子元素不再填充网格，挤压子元素)
        width: 500px;
        height: 500px;
}

虚线为网格，红色为子元素

align-items: center

align-items: end

上面align-items控制的是元素在网格中的位置，使用align-content来控制整个网格：

align-content: start

2.justify-items和justify-content横向

值：start/center/end

同理，items控制单个元素，content控制网格整体(压缩网格)

justify-items:start/center/end

使用justify-content: start

.father {
     display: grid;
     justify-content: start; //content压缩网格，注意观察网格线
     width: 500px;
     height: 500px;
}

align-items和justify-items设置center：

align-items和justify-content设置center：

align-content和justify-items设置center：

align-content和justify-content设置center：

grid布局基础

基础