CSS學習--grid佈局

阿新 • • 發佈：2022-04-19

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

CSS學習--grid佈局

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