关于css:CSS-gird布局

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;    }}