CSS学习--grid布局

grid布局

grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>;

显式网格属性

grid-template-rows

基于 网格行 的维度，去定义网格线的名称和网格轨道的尺寸大小

grid-template-rows: none | <length> | <percentage> | <flex>(fr) | auto | max-content | min-content | minmax(min, max);
/* 网格布局（两行） */
#grid {
	display: grid;
	height: 100%;
	grid-template-rows: 50px 1fr;
}

grid-template-columns

基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。

grid-template-columns: none | <length> | <percentage> | <flex>(fr) | auto | max-content | min-content | minmax(min, max);
/* 网格布局（两列） */
#grid {
	display: grid;
	width: 100%;
	grid-template-columns: 50px 1fr;
}

grid-template-areas

网格区域 grid areas 在CSS中的特定命名。

<section id="page">
	<header>Header</header>
	<nav>Navigation</nav>
	<main>Main area</main>
	<footer>Footer</footer>
</section>

grid-template-areas: none | <string>;

#page {
	display: grid; 
	/* 1.设置display为grid */
	width: 100%;
	height: 250px;
	grid-template-areas: "head head""nav main""nav foot"; 
	/* 2.区域划分 当前为 三行 两列 */
	grid-template-rows: 50px 1fr 30px; 
	/* 3.各区域 宽高设置 */
	grid-template-columns: 150px 1fr;
}
#page > header {
	grid-area: head; 
	/* 4. 指定当前元素所在的区域位置, 从grid-template-areas选取值 */
	background-color: #8ca0ff;
}

grid-template

grid-template-rows、grid-template-columns与grid-template-areas的简写。

grid-template: ...<grid-template-areas><grid-template-columns>/<grid-template-rows>;
grid-template:"a a a" 40px"b c c" 40px"b c c" 40px / 1fr 1fr 1fr;

隐式网格属性

grid-auto-rows

用于指定隐式创建的行轨道大小。

grid-auto-rows: <length> | <percentage> | <flex>(fr) | auto | max-content | min-content | minmax(min, max);

#grid {
	width: 200px;
	display: grid;
	grid-template-areas: "a a";
	grid-gap: 10px;
	grid-auto-rows: 100px;
}

grid-auto-columns

隐式创建的网格纵向轨道（track）的宽度。

grid-auto-columns: <length> | <percentage> | <flex>(fr) | auto | max-content | min-content | minmax(min, max);
#grid {
	width: 200px;
	display: grid;
	grid-template-areas: "a a";
	grid-gap: 10px;
	grid-auto-columns: 200px;
}

grid-auto-flow

控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

grid-auto-flow: row | column | dense;

#grid {
	height: 200px;
	width: 200px;
	display: grid;
	grid-gap: 10px;
	grid-template: repeat(4, 1fr) / repeat(2, 1fr);
	grid-auto-flow: column;/* or 'row', 'row dense', 'column dense' */
}

间距属性

grid-column-gap

元素列之间的间隔 (gutter) 大小。

grid-column-gap: normal | <length> | <percentage>;

#flexbox {
	display: flex;
	height: 100px;
	column-gap: 20px;
}

grid-row-gap

设置行元素之间的间隙(gutter) 大小。

grid-row-gap: normal | <length> | <percentage>;

#flexbox {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	row-gap: 20px;
}

grid-gap

row-gap and column-gap的简写形式，设置网格行与列之间的间隙。

grid-gap: <length> | <percentage>;

#flexbox {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	gap: 20px 5px;
}

grid-column-start

网格项在网格列中的开始位置

grid-column-start: auto | <custom-ident> | <integer> && <custom-ident>? |span && [ <integer> || <custom-ident> ];

grid-column-end

网格项在网格列中的结束位置

grid-column-end: auto | <custom-ident> | <integer> && <custom-ident>? |span && [ <integer> || <custom-ident> ];

grid-column

grid-column-start (en-US) 和 grid-column-end (en-US) 的简写属性，用于指定网格项目的大小和位置。

grid-column: auto | <custom-ident> | <integer> && <custom-ident>? |span && [ <integer> || <custom-ident> ];

#grid {
	display: grid;
	height: 100px;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 100px;
}
#item2 {
	background-color: yellow;
	grid-column: 2 / 4;
}

grid-row-start

网格项在网格行中的开始位置

grid-row-start: auto | <custom-ident> | <integer> && <custom-ident>? |span && [ <integer> || <custom-ident> ];

grid-row-end

网格项在网格行中的结束位置g

grid-row-end: auto | <custom-ident> | <integer> && <custom-ident>? |span && [ <integer> || <custom-ident> ];

.wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 100px;
}
.box1 {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;
}

grid-row

grid-row-start (en-US) 和 grid-row-end (en-US) 的缩写形式，定义了网格单元与网格行（row）相关的尺寸和位置。

grid-row: auto | <custom-ident> | <integer> && <custom-ident>? |span && [ <integer> || <custom-ident> ];

#grid {
	display: grid;
	height: 200px;
	grid-template-columns: 200px;
	grid-template-rows: repeat(6, 1fr);
}
#item2 {
	background-color: yellow;
	grid-row: 2 / 4;
}

grid-area

grid-row-start (en-US)、grid-column-start (en-US)、grid-row-end (en-US) 和 grid-column-end (en-US) 的简写，指定一个网格项的大小和位置

grid-area: auto | <custom-ident> | <integer> && <custom-ident>? |span && [ <integer> || <custom-ident> ];
<custom-ident>: some-grid-area | another-grid-area;

#grid {
	display: grid;
	height: 100px;
	grid-template: repeat(4, 1fr) / 50px 100px;
}
#item1 {
	background-color: lime;
	grid-area: 2 / 2 / auto / span 3;
}

第三方网格

getskeleton： http://getskeleton.com/

bootstrap： https://getbootstrap.com/docs/5.0/layout/grid/

foundation： https://get.foundation/sites/docs/flex-grid.html