CSS布局(Grid布局)

1,365 阅读1分钟

Grid

是CSS中display属性中的一个值,
可以使用grid-template-rows和grid-template-columns属性在网格上定义列和行

使用这些属性定义的网格称为显式网格

Grid 布局

container      容器
items          内容
display:grid; 在父元素上加

设置行和列

.container{grid-template-columns:40px 50px auto 50px 40px;
grid-template-row:25% 100px auto;}

给每条线取名字,进行调用

.containter{grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4] 50px [five] 40px [end];
     grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto[last-line];}

设置item范围(column行,row列)

.item-a{grid-column-start:2;
        grid-column-end:five;
        grid-row-start:row1-start;
        grid-row-end:3;

使用fr缩写,(free space自由空间)

.container{grid-template-columns:1fr 1fr 1fr 1fr;}
.container{grid-template-columns:1fr 50px 1fr 1fr;}
grid-grp:10px; 中间空10px,平均布局时使用

grid-template-areas 分区

.item-a{grid-area:header;}
.item-b{grid-area:main;}
.item-c{grid-area:sidebar;}
.item-d{grid-area:footer;}
.container{display:grid;
    grid-template-columns:50px 50px 50px 50px;
    grid-template-rows:auto;
    grid-template-rows: 
    " header header header header "
    " main main _ sidebar"              ( _ 是 空格)
    " footer footer footer fotter " }

grp 空隙

.container{grid-template-columns:100px 50px 100px;
    grid-template-rows:80px auto 80px;
    grid-column-grp:10px;    行的空隙是10px
    grid-row-grp:10px;       列的空隙是10px

练习:小青蛙游戏

Grid: Grid练习代码