关于css:CSS-gird布局

12次阅读

共计 4862 个字符，预计需要花费 13 分钟才能阅读完成。

grid 网格布局，用来解决简单的二维页面布局.
和 flex 类似的是，分为外层容器 (Grid Container) 和内层子项目(Items).

Container 属性:

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

Items 属性:

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
place-self

外层申明 dipslay:grid | inline-grid
生成的网格是块级还是内联级的。

<style>
.grid{display:grid;}
</style>

属性:grid-template-columns，grid-template-rows

<div class="grid">
    <div class="child-1">1</div>
    <div class="child-2">2</div>
    <div class="child-3">3</div>
    <div class="child-4">4</div>
    <div class="child-5">5</div>
    <div class="child-6">6</div>
    <div class="child-7">7</div>
    <div class="child-8">8</div>
    <div class="child-9">9</div>
</div>

<style>
.grid{
    grid-template-rows: 10vw 10vw 10vw;
    grid-template-columns:10vw 10vw 10vw;
    // 能够应用 repeat('反复次数','长度单位'), 下面的 style 代码能够写成
    //grid-template-rows: repeat(3,10vw);
    //grid-template-columns: repeat(3,10vw);
}
</style>

rows 行 colnums 列, 下面代码示意 3 行每行高度 10vw,3 列每列宽度 10vw。

关键字:repeat()

<style>
.grid{grid-template-rows: repeat(1,3vw 6vw 9vw);
    grid-template-columns: repeat(1,3vw 6vw 9vw);
}
</style>

关键字:auto-fit

<style>
.grid{
    width: 400px;
    height:300px
    display: grid;
    grid-template-columns:repeat(auto-fit,70px);
    grid-template-rows: repeat(auto-fit, 70px);
}
</style>

容器尺寸固定，子项目尺寸固定，网格几行几列未知，自适生成网格.
行 Math.floor(400/70)=5;
列 Math.floor(300/70)=4;
右侧多 50，底部多 20.

关键字:fr

.grid{
    width: 500px;
    grid-template-columns:100px 1fr 2fr;
    // 左侧 100px 固定，右侧随屏幕自适应，一句搞定
    //grid-template-columns:100px 1fr;
}

拿第一行举例
网格 1 =100px
网格 2 =(500-100)/3 (133.33)
网格 3 =(500-100)/3*2 (266.66)
先去除固定值，在调配残余空间

关键字:minmax(min,max)

.grid{
    width: 50vw;
    display: grid;
    grid-template-columns:100px 1fr 2fr minmax(50px,4fr);
}

范畴取值最小 50px, 个别状况下都是 4fr

关键字:auto

<div class="grid">
    <div class="child-1"> 固定 200</div>
    <div class="child-2"> 自适应 </div>
</div>
.grid{
    display: grid;
    width: 100%;
    grid-template-columns:200px auto;
    grid-template-rows: 20vh;
    .child-1{background-color: rosybrown;}
    .child-2{background-color: saddlebrown;}
}

等同于：grid-template-columns:200px 1fr;
也能够：grid-template-columns: minmax(200px ,0.5fr) 2fr;

属性:grid-gap，grid-row-gap，grid-colnums-gap

.grid{
    display: grid;
    grid-template-columns:300px 200px;
    grid-template-rows: 200px 200px;
    grid-row-gap: 30px;
    grid-column-gap: 10px;
    // 等同于 grid-gap: 30px 10px;

}

chrome 控制台调试高深莫测
留神: 如容器宽度 500px 则右侧会超出 10px;

属性:grid-template-areas,grid-area

<div class="grid">
    <div class="child-1">1</div>
    <div class="child-2">2</div>
    <div class="child-3">3</div>
    <div class="child-4">4</div>
</div>
.grid-9{
    display: grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-areas:'. header header'
                        'left   main   main'
                        'left   main   main'
                        'bottom bottom bottom';
    .child-1{grid-area:header,}
    .child-2{grid-area:left,}
    .child-3{grid-area:main,}
    .child-4{grid-area:bottom,}
}

网格可视化, 应用 ’.’ 能够空开网格
应用 grid-area 定义别名, 可视化布局应用别名，网格合并后的数量需与 dom 数量一样，以下布局会出错.

'.      header header'
'left   main   left'
'main   left   main'
'bottom bottom bottom';

'.      header header'
'left   main   left'
'left   main   left'
'bottom bottom bottom';

属性:grid-auto-flow

.grid{
        display: grid;
        grid-template-columns:repeat(2,10vw);
        grid-template-rows: repeat(2,10vw);
        grid-auto-flow:column;
     }

默认横向排列.

属性:place-items,justify-items,align-items
属性:justify-self,align-self,place-self

.grid-11{
    display: grid;
    grid-template-columns:repeat(2,10vw);
    grid-template-rows: repeat(2,10vw);
    // justify-items:center;
    // align-items:center;
    place-items:center center;
    div{
        width: 5vw;
        line-height: 5vw;
    }
    .child-1{justify-self: end;}
    .child-2{align-self: end;}
    .child-3{place-self: end;}
}

xxx-self 单个,xxx-items 所有.

属性:justify-content,align-content,place-content

.grid{
    display: grid;
    height: 500px;
    grid-template-columns: repeat(2, 10vw);
    grid-template-rows: repeat(2, 10vw);
    place-content: space-around;
    // 等同于
    //justify-content:space-around;
    //align-content:space-around;
    
}

横向垂直居中对齐.

属性:grid-auto-rows,grid-auto-columns

.grid{
    display: grid;
    grid-template-columns:repeat(2,10vw);
    grid-template-rows: repeat(2,10vw);
    grid-auto-flow:column;
    grid-auto-rows: 5vw;
    grid-auto-columns: 5vw;
}

有 6 个 div, 网格只设置 2 行 2 列 4 个 (2*2)
多余的 2 个网格的大小指定应用 grid-auto-rows,grid-auto-columns
因为上图应用了竖排序，grid-auto-rows: 5vw; 没成果

属性:grid-column-start grid-column-end
属性:grid-row-start grid-row-end

<div class="grid">
    <div class="child-1">1</div>
    <div class="child-2">2</div>
</div>
.grid{
    display: grid;
    grid-template-rows: repeat(4,10vw);
    grid-template-columns: repeat(4,10vw);
    .child-1{
        grid-row-start: 2;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .child-2{
        grid-row-start: 3;
        grid-row-end: 5;
        grid-column-start: 3;
        grid-column-end: 5;
    }
}

实用于子项目布局开始与完结
数字对应的是线的地位(1 开始)，4 个网格就是 4+ 1 根线如图所示.

<div class="grid">
    <div class="child-1">1</div>
    <div class="child-2">2</div>
    <div class="child-3">3</div>
    <div class="child-4">4</div>
    <div class="child-6">6</div>
    <div class="child-7">7</div>
    <div class="child-8">8</div>
    <div class="child-9">9</div>
</div>
.grid{
    display: grid;
    grid-template-rows: repeat(3,10vw);
    grid-template-columns: repeat(3,10vw);
    .child-6{
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

正文完