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

关于css:CSS-gird布局

应用

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于css:CSS-gird布局

应用

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复