grid布局教程

grid 布局教程#

開啟布局#

.grid {
    display: grid;
}

特點：grid 布局的直接子元素默認是 grid 元素

行列控制#

指定列#

死寬度

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px; /*設定排列和大小*/
}

浮動寬度

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /*設定排列和大小*/
}

fr 是 grid 特有的浮動寬度，會自動佔滿剩餘空間

多行列指定

.grid {
    /*相當於輸入12個50px 即12列*/
    grid-template-columns: repeat(12, 50px);
}

指定行#

.grid {
    /*相當於輸入12個50px 即12列 原理和行列相同*/
    grid-template-rows: repeat(12, 50px);
}

默認指定

grid-auto-rows: 100px; // 沒有指定會默認100px行高
grid-auto-rows: auto; //auto是根據元素大小自動分配

關鍵詞#

grid-template-rows: repeat(auto-fill, 50px); // 內容會自動填充，空間小於50px自動換行

設置最小最大值

grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)); //最小列150px 最大1fr浮動

元素間距#

設定元素間距#

.grid {
    display: grid;
    /*設定排列和大小*/
    grid-template-columns: 1fr 1fr 1fr;
    /*設定列間距*/
    column-gap: 24px;
    /*設定行間距*/
    row-gap: 24px;
    /*統一設置行列間距*/
    gap: 24px;
}

排列元素#

手動定義網格#

如設置這樣的布局可以用 grid-template-areas屬性

.layout {
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

各個元素分別指定對應區域

例子

<template>
    <div class="grid">
        <div class="header">
            這是頭部這是頭部這是頭部這是頭部這是頭部這是頭部
        </div>
        <div class="aside">
            這是側邊欄<br>
            這是側邊欄<br>
            這是側邊欄<br>
            這是側邊欄<br>
        </div>
        <div class="main">
            這是主要內容這是主要內容這是主要內容這是主要內容這是主要內容<br>
            這是主要內容這是主要內容這是主要內容這是主要內容這是主要內容<br>
            這是主要內容這是主要內容這是主要內容這是主要內容這是主要內容<br>
            這是主要內容這是主要內容這是主要內容這是主要內容這是主要內容<br>
            這是主要內容這是主要內容這是主要內容這是主要內容這是主要內容<br>
            這是主要內容這是主要內容這是主要內容這是主要內容這是主要內容<br>
        </div>
        <div class="footer">
            這是頁腳這是頁腳這是頁腳這是頁腳這是頁腳這是頁腳
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>

<style scoped lang="less">
.grid {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas:/*需在父元素指定*/
        "header header header"
        "sidebar content content"
        "footer footer ."; /*.可以當做佔位符*/
}

.header {
    grid-area: header;
}

.aside {
    grid-area: sidebar;
}

.main {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
</style>

上面相同另一種指定內容需要用指定標籤包裹

例子： <header>這是頭部</header>

header {
    grid-area: header;
}

aside {
    grid-area: sidebar;
}

main {
    grid-area: content;
}

footer {
    grid-area: footer;
}

直接使用網格#

grid 是網格布局，可以通過線來描述布局位置

header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

佔用結果為上圖

簡寫效果同上方代碼

header {
    grid-columnn: 1 / 3;
    grid-row: 1 / 2;
}

簡寫 2

要求：跨度為 1

1 / 2 可簡寫為 1
2 / 3 可簡寫為 2
3 / 4 可簡寫為 3