強大的CSS grid網格排版-介紹與應用

簡單認識CSS grid 網格系統
作為容器(container)有哪些屬性
作為項目(item)有哪些屬性
整理一下-間隔(gap)與對齊
範例 & grid小遊戲

1.簡單認識CSS grid 網格系統

grid是css中好用的排版方式，透過設定欄（column)列(row)來達成像excel那樣的網格排版。
可分為包裹的容器（container)與被包裹的項目（item)，有各自的屬性可設置，以下分別介紹。

可分為包裹的容器（container)與被包裹的項目（item)

2.作為容器(container)有哪些屬性

在進入正題之前，先提一下grid屬性可用的單位，除了 px、%、em、auto….皆可用，auto 代表自動分配外，
比較特別的是fr這個單位，是以比例來作分配，不是固定的距離單位~ 且單位是可以混用的唷!

.container作為容器要畫上虛擬的排版線，而以下就是設定線會用到的屬性:

.container{ 
display: grid | inline-grid | subgrid; // 縱向排列 | 橫向排列 | 是item也是container
grid-template: 5px 40px auto 40px 5px / 40px 25% 2fr fr; 
// 列(row)線的間距 / 欄(column)線的間距

-也可個別設定row、column
grid-template-rows: 5px 40px auto 40px 5px;
grid-template-columns: 40px 25% 2fr fr;

-線是可以命名的，名字加在數值前
grid-template-rows: [line1]40px [second-line]25% [3line]2fr [forth-line]fr;

-也可使用repeat(數量, 寬度[名字]) 作設定
grid-template-columns: repeat(3, 40px[colline]);
== grid-template-columns: [colline]40px [colline]40px [colline]40px;
}

fr用法//扣除40px、25%後，剩下的寬度以2:1平分。

3.作為項目(item)有哪些屬性

在.container畫完線了，接下來就是往格子裡頭放東西排版囉!

item可分為:
a. 用線(line)設定範圍
b.用區塊(area)做分配

a. 用線(line)設定範圍

數值皆可使用線的名字或線本身的index。

.item{
-item要佔據的範圍
grid-area: 1 / 3 / 3 / 4 ; 
//row-start / column-start / row-end / column-end

-也可分別寫
grid-row: 1 / 3 ; // startline / endline
grid-column: 3 / 4 ; // startline / endline
-如果只寫2，代表2-3的單位
grid-row: 2; 
== grid-row: 2 / 3;

-開始線和結束線也可分開寫
grid-row-start: 1 ;
grid-row-end: 3 ;
grid-column-start: 3 ; 
grid-column-end: 4 ;
}

-若有多條同名線，在item使用可在名字後方加上數字做為index
grid-column-start: colline 2; //第二條叫做colline的線

-單位前皆可加上span表示擴展一條線的距離，
grid-column: span 2 / span 6 ; // 1<-2 / 6->7
== grid-column: 1 / 7;

grid-area: 1 / 3 / 3 / 4 ;

b.用區塊(area)作分配

-設定item的區塊名稱
.item1{ grid-area: header; } 
.item2{ grid-area: main; }
.item3{ grid-area: footer; }
.item4{ grid-area: sidebar; }

-再透過container排版
grid-template-areas: 
"header header header header"
"main main main sidebar"
"main main main sidebar"
"footer footer footer footer"
-另外還有"none" ，"."兩個值，"none"是沒有指定區塊，"."是代表空格。
-item的分配不能是分段的，也不能是非四方形。

使用grid-area排版

有使用到none

4.整理一下-間隔(gap)與對齊

布置好內容後，就該調整細部啦! grid一樣也有調整間隔的屬性，以及自身對齊與整體對齊的設定喔!

a.間隔(gap)

.container
grid-gap: 5px 10px; //row的間隔 column的間隔
-可分開寫
grid-row-gap: 5px;
grid-column-gap: 10px;

b.對齊

-container本身與父元素空間的對齊或分配間隔
//垂直對齊 
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: stretch; //預設值
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
//水平對齊
align-content: start;
align-content: end;
align-content: center;
align-content: stretch; //預設值
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
同時設定:
place-content: <align-content> / <justify-content>;

-container設定item整體的對齊
//垂直對齊
justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch; //預設值
//水平對齊
align-items: start;
align-items: end;
align-items: center;
align-items: stretch; //預設值
同時設定:
place-items: <align-items> / <justify-items>;

-item對齊的使用方式同上只是是個別設定
justify-self: start、end、center、stretch;
align-self:  start、end、center、stretch;
同時設定:
place-self: <align-self> / <justify-self>;