grid布局基础

138 阅读2分钟

基础

一、开启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>

效果: image.png

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

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

效果:

image.png

二、grid-template-columns设置列宽

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

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

效果1

image.png

效果2

image.png

三、特有的fr单位

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

image.png

同理:

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

image.png

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

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

image.png

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

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

image.png

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

image.png

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

实现以下布局: image.png 左边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;
}

效果:

image.png

六、设置对齐

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

1.align-items和align-content纵向

值:start/center/end/等

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

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

image.png

align-items: center

image.png

align-items: end

image.png

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

align-content: start

image.png

image.png

2.justify-items和justify-content横向

值:start/center/end

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

justify-items:start/center/end

image.png

image.png

image.png

使用justify-content: start

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

image.png

image.png

image.png

align-items和justify-items设置center:

image.png

align-items和justify-content设置center:

image.png

align-content和justify-items设置center:

image.png

align-content和justify-content设置center:

image.png