Grid布局知识

目录

前言

一、使用grid布局

1.1 网格行grid-column-start， grid-column-end

 1.2grid-area属性

---

前言

在项目中遇到 grid-column-start还稍微有一点懵，不是很熟悉所以通过以下例子加强一下对grid布局的使用。

一、使用grid布局

<div class="parent">
    <div class="item1 item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.parent {
    display: grid;
    width: 600px;
    height: 300px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    .item {
        background-color: aqua;
    }
}

1.1 网格行grid-column-start， grid-column-end

列之间的线称为列线，行之间的线称为行线，如果三条列线三条行线会组成6个网格

如需放置某个项目，您可以引用行号（line numbers），或使用关键字 "span" 来定义该项目将跨越多少列。

 给第一个item 添加类item1，从第一列线开始第三列线结束，说明item1此时占据两个网格项的长度， 此时界面就会变成。

.item1 {
        grid-column-start: 1;
        grid-column-end: 3;
       //也可以写成
        grid-column: 1 / 3;
     }
//等价于
.item1{
        grid-column: 1 / span 2;//表示从第一列开始  占两格  相当于从第1列开始 第3列结束
     }

 1.2grid-area属性

grid-area属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

  .item1 {
        //列线从第一条到第三条，行线从第一条到第三条
        grid-area: 1 / 1 / 3 / 3;
    }

1.3grid-template-areas

grid-template-areas 属性在网格布局中规定区域。您可以使用 grid-area 属性命名网格项目，然后在 grid-template-areas 属性中引用该名称。

HTML：

<div class="main">
    <div class="item1">header</div>
    <div class="item2">menu</div>
    <div class="item3">main</div>
    <div class="item4">right</div>
    <div class="item5">footer</div>
</div>

 SCSS:

.item1 {
    grid-area: header; //占6格的header
}
.item2 {
    grid-area: menu;
}
.item3 {
    grid-area: main;
}
.item4 {
    grid-area: right;
}
.item5 {
    grid-area: footer;
}
.main {
    display: grid;
    grid-gap: 10px;
    padding: 20px;
    background-color: #d0df7c;
    grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
}
.main > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}

没有可以指定的区域则用.表示

 HTML:

<div class="main">
    <div class="item1">header</div>
    <div class="item3">main</div>
    <div class="item4">right</div>
    <div class="item5">footer</div>
</div>

 SCSS:

.main {
    display: grid;
    grid-gap: 10px;
    padding: 20px;
    background-color: #d0df7c;
    grid-template-areas:
        '. . header header header header'
        '. . main main right right'
        '. . footer footer footer footer';
}