參考網站
簡介
Grid號稱是Css最強大的排版系統。
屬於二維空間(2-dimensional)，所以能夠同時更改column跟row。
flex屬於一維空間，一次只能更改一個。
實作
1 flex:grid
Grid-demo-01
將grid放到容器裡，使內容都以gird方式排列。
在沒有做任何更改時，呈現的樣子為橫排。
2 grid-template-columns
Grid-demo-01
column為直的，所以一格一格切開。
1fr為填滿剩下的空格。
1
2
3
4
| .boxes{
display: grid;
grid-template-columns: 10rem 1fr 10rem;
}
|
3 grid-template-columns:repeat(次數,空間)
Grid-demo-02
repeat(次數，空間)的用法，使用repeat就不用一個一個輸入。
1
2
3
4
5
6
| .boxes{
border: 1rem solid rgb(117, 117, 117);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
|
1
2
3
4
| .boxes{
display: grid;
grid-template-columns: repeat(5, 1fr);
}
|
1
2
3
4
5
| .boxes{
border: 1rem solid rgb(117, 117, 117);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
|
1
2
3
4
5
| .boxes{
border: 1rem solid rgb(117, 117, 117);
display: grid;
grid-template-columns: 10% repeat(2, 10fr) 10%;
}
|
4 grid-template-rows
Grid-demo-02
row橫向排版，auto為自動排版，在容器有使用padding時，會自動撐開距離。
1
2
3
4
5
6
| .boxes{
border: 1rem solid rgb(117, 117, 117);
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 20rem 20rem 20rem;
}
|
5 grid-template-areas
Grid-demo-03
自己創造出順序，再開個area依序放入，要留下的空格用.代替。
自己命名的部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .box1 {
background-color: rgb(188, 216, 233);
grid-area: box1;
}
.box2 {
background-color: rgb(211, 166, 166);
grid-area: box2;
}
.box3 {
background-color: rgb(163, 126, 160);
grid-area: box3;
}
.box4 {
background-color: rgb(139, 163, 132);
grid-area: box4;
}
.box5 {
background-color: rgb(177, 176, 146);
grid-area: box5;
}
|
創造順序
1
2
3
4
5
6
| .boxes {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "box2 box1 box3"
"box4 . box5";
}
|
使用定位的方式填滿空間
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .boxes-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "box2 box2 box3"
"box4 box1 box5";
}
.boxes-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "box2 box2 box3"
"box4 box1 box3"
"box5 box5 box5";
}
|
6 Grid-column，Grid-row
Grid-demo-04
grid-column順序為：起頭不為0，1為最左邊，2為往右數一格，直向數過去。
grid-row同上，橫向數過去。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| .box1 {
background-color: rgb(188, 216, 233);
grid-column:1/2;
}
.box2 {
background-color: rgb(211, 166, 166);
grid-column:2/3;
}
.box3 {
background-color: rgb(163, 126, 160);
grid-column:3/4;
grid-row:1/3;
}
.box4 {
background-color: rgb(139, 163, 132);
}
.box5 {
background-color: rgb(177, 176, 146);
}
|
7 grid-column-gap，grid-row-gap，grid-gap
Grid-demo-04
在物件中留空隙的方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .boxes-2{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1rem;
}
.boxes-3{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 1rem;
}
.boxes-4{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
|
8 justify-items: center，align-items: center
Grid-demo-04
將物件置中。
Grid裡的置中，不是flex-start，而是只有start，end。
1
2
3
4
5
6
7
| .boxes-5{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
justify-items: center;
align-items: center;
}
|
9 grid-template-rows
Grid-demo-04
上下留20rem的距離。
1
2
3
4
5
6
7
8
| .boxes-6{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 20rem 20rem;
grid-gap: 1rem;
justify-items: center;
align-items: center;
}
|
10 justify-self
Grid-demo-04
選取單元素做偏移。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div class="boxes boxes-7">
<div class="box1 box">
<h1>Box1</h1>
</div>
<div class="box2 box">
<h1>Box2</h1>
</div>
<div class="box3 box">
<h1>Box3</h1>
</div>
<div class="box4 box">
<h1>Box4</h1>
</div>
<div class="box5 box">
<h1>Box5</h1>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .boxes-7{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 20rem 20rem;
grid-gap: 1rem;
justify-items: center;
align-items: center;
}
.boxes-7 .box2{
justify-self: end;
align-self:start;
}
.boxes-7 .box5{
justify-self: start;
align-self:center;
}
|
