grid布局
分为容器
和项目
元素
容器属性
#container{
display:grid;
grid-template-columns:100px 100px 100px;
/* 1fr 表示比例为占1份 */
grid-template-columns:1fr 100px 1fr;
/*100px为1列,自动填充,容器宽度不足则换行*/
grid-template-columns:repeat(auto-fill,100px);
/* 表示列为100px 以及 最大值为1fr,最小值为100px的列 */
grid-template-columns:100px maxmin(100px,1fr)
grid-template-columns: 100px auto 100px;
grid-template-columns:repeat(auto-fit,100px);
/* 行列之间网格线默认是1开头,可以取别名 */
grid-template-rows:[a] 100px [b] 100px [c] 100px [d];
/* 行列间的间隔 */
grid-column-gap:20px;
grid-row-gap:20px;
/* 行列间隔 简写 */
grid-gap:20px 20px;
/* 指定区域的别名,一般与子项目的grid-area配合使用 */
grid-template-areas:`a b c
d e f
g h i`;
/* 默认是 row,先行后列 , dense 表示由于 排列有空白时 后面的项目尽可能补充到该空白处*/
grid-auto-flow: row| row dense | column | column dense;
/* *-items系列指定所有单元格中内容的排列方式 ,默认不指定时子项目为stretch,铺满整个块,除非子项目指定了width,height*/
justify-items: start | center | end | stretch;
align-items: start | center | end | stretch;
place-items: <align-items> <justify-items>;
/* *-content系列指定整个内容区域(指由列和行组成的区域,不一定占满容器)在容器内的位置 */
justify-content:start | center | end | stretch | space-between space-around | space-evenly;
align-content:start | center | end | stretch | space-between space-around | space-evenly;
place-content: <align-content> <justify-content>;
/* grid-auto-* 系列表示如果子项目超过单元格数量时,新增的行和列的宽高 */
grid-auto-columns:50px;
grid-auto-rows: 50px;
}
项目属性
以下属性是项目的属性
/* 根据网格线指定项目的定位,实现不同的单元格大小 */
grid-columns-start: 1;
grid-columns -end: 1;
grid-rows-start: 1;
grid-row-end: 1;
/* 简写 */
grid-column: 1 / 3; /* 相当于 1 号,3 号网格线*/
grid-row: <start-line> / <end-line>
/* 与容器定义的 grid-template-areas 配合指定项目位置 */
grid-area: a;
/* 单个项目指定在单元格内排列方式 */
justify-self: start | center | end | stretch;
align-self: start | center | end | stretch;
place-self: <align-self> <justify-self>;
开发常用布局
- 水平两栏布局
一般设置grid
布局,grid-template-columns
设置列数和列宽,行高由子项目撑开,
#container{
display:grid;
grid-template-columns: repeat(2,1fr);
}
- 容器宽度不定,子项目宽高固定,换行排列,比
flex
布局方便,关键在repeat(auto-fill,100px)
#container{
display:grid;
grid-template-columns: repeat(auto-fill,100px);
}