记录grid布局属性

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

开发常用布局

1. 水平两栏布局
   一般设置grid布局,grid-template-columns设置列数和列宽,行高由子项目撑开,

#container{
	display:grid;
	grid-template-columns: repeat(2,1fr);
}

2. 容器宽度不定,子项目宽高固定,换行排列,比flex布局方便,关键在repeat(auto-fill,100px)

#container{
	display:grid;
	grid-template-columns: repeat(auto-fill,100px);
}