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