iT邦幫忙

2021 iThome 鐵人賽

DAY 24
1
Modern Web

30天學會HTML+CSS,製作精美網站系列 第 24

網頁編排Grid-30天學會HTML+CSS,製作精美網站

Grid是什麼

Grid是磚牆式版面,使用二維的排版方式,與flexbox不同的地方是Grid一次可以控制水平及垂直方向。Grid像是美工軟體,有許多參考線幫助你定位,要將元素設定相同大小、間距的排列都可以使用Grid製作。
Grid是由父元素(Grid Container)和子元素(Grid items)組成。子元素之間的空隙,為格線間距(Grid gap)。
目前瀏覽器支援較新版本的瀏覽器,想看瀏覽器支援可以到 can i use 網站
https://ithelp.ithome.com.tw/upload/images/20211009/20112053S9GTmpGM8y.png

區塊宣告

display: grid/inline-grid
  • grid:類似display:block
  • inline-grid:類似display:inline-block

grid-template-columns & grid-template-rows

grid-template-columns:定義容器有多少欄;grid-template-rows:定義容器有多少列
要製作一個 4x3 的容器可以這樣寫,每個區塊的寬度為auto(適螢幕寬度大小來決定),高度為100px

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: #d7ebfd;
  text-align: center;
  padding: 20px 0;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053oR4W9OnXPB.png

使用單位

fr

fr為fraction比例的縮寫,會依照畫面寬度比例伸縮。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr;
}

https://ithelp.ithome.com.tw/upload/images/20211009/201120531AYsnOBGPD.png

max-content / min-content

  • max-content:取得項目最大的尺寸當作填充條件
  • min-content:取得項目最小的尺寸當作填充條件

minmax()

一個長度範圍。minmax(最小值, 最大值)
範例中,minmax(100px, 1fr)表示寬度不小於100px,不大於1fr。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr minmax(100px, 1fr) 1fr;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053HwqL838p3r.jpg

auto

自動設定項目尺寸

長度單位

像是px, %...

repeat

可以不用重複寫一樣的設定

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

https://ithelp.ithome.com.tw/upload/images/20211009/201120532aArFXC12F.png

auto-fill / auto-fit

  • auto-fill:自動填滿重複的單元格數量
  • auto-fit:與auto-fill相同。如果沒有彈性項目,那個網格單元格就會被折疊起來
    這兩者差別在當網頁寬度特別寬,且沒有填滿時,auto-fill會有匿名的格子
    https://ithelp.ithome.com.tw/upload/images/20211009/20112053fN16tK4PJP.png
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

auto-fit會將後面表格合併成一個
https://ithelp.ithome.com.tw/upload/images/20211009/20112053nNDOXckoyS.png

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

grid-template-areas & grid-area

grid-template-areas用來定義每個單元格的名稱,可以使用grid-area指定名稱跟放置位置

<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">sider</div>
  <div class="item3">main</div>  
  <div class="item4">footer</div>
</div>

指定區域名稱,當不使用該區域時,可以使用點 . (點)來略過。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 80px 300px 50px;
  grid-template-areas: "header header header"
  "sider main main"
  "sider footer ."
}
.item1{
  background-color: #00bcd4;
  grid-area: header;
}
.item2{
  background-color: #ffc107;
  grid-area: sider;
}
.item3{
  background-color: #cddc39;
  grid-area: main;
}
.item4{
  background-color: #607d8b;
  grid-area: footer;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053ooUwBIYl1r.png

grid-auto-flow

row:預設值,由左至右,由上到下

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: row;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053WzewbLCylR.png

column 由上到下,由左到右

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053K5KaKXQLfk.png

dense 填補空缺

row dense

第三區塊比較大,如果止血grid-auto-flow:row,就會有空缺
https://ithelp.ithome.com.tw/upload/images/20211009/20112053F4Tdw5TGFi.png
將grid-auto-flow改為row dense,第四區塊就會去填補空缺

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 10px;
  grid-auto-flow:row dense;
}
.item3 { 
  grid-column: auto / span 2; 
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053FvE8Teqw07.png

column dense

第二區塊起始位置從第三區塊開始,他前面就有一個空缺

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 10px;
  grid-auto-flow:column;
}
.item2{ 
  grid-row-start:3; 
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053UEb4xiZ0rq.png
所以,在grid-auto-flow改為column dense;第三區塊就去補空缺位置
https://ithelp.ithome.com.tw/upload/images/20211009/20112053JzMHpjVY37.png

gap 子元素空隙寬度

grid-column-gap:水平欄位的間隔

https://ithelp.ithome.com.tw/upload/images/20211009/20112053dboOqgFhh9.png

grid-row-gap:垂直欄位的間隔

.grid-container {
  grid-row-gap:20px;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053COspl3L55y.png

gap 結合上述兩種縮寫的方式

gap: row-gap column-gap

垂直間距:20px 水平間距:10px

.grid-container {
  gap: 20px 10px; 
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053nQzf1uDi16.png
垂直水平間距相同gap:10px;

.grid-container {
  gap: 10px; 
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053tD4hkPsVEj.png

內部容器

Grid line

grid-column

  • grid-column-start:水平方向開始起始格線位置
  • grid-column-end:水平方向結束的格線位置
  • auto:默認值
  • span n:物件所佔的空間數

grid-row

  • grid-row-start:垂直方向開始的格線位置
  • grid-row-end:垂直方向結束的格線位置
.item2{ 
  grid-column-start: 3; /* 起始位置從3開始 */
  grid-column-end: span 3; /* 跨三區塊 */
}

grid-column及grid-row,可以使用斜線 (/) 將起始位置/結束位置隔開,上面的code可以簡寫成:


.item2{ 
  grid-column: 3 / span 3;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053AgYHdCf71I.png

對齊

方式與flexbox相同

justify-content

  • start:靠左對齊
  • end:靠右對齊
  • center:靠中間對齊
  • stretch:依照比例拉寬到滿版
  • space-around:內容間距都會平均分配

align-content

  • start:靠左對齊
  • end:靠右對齊
  • center:靠中間對齊
  • stretch:依照比例拉高到滿版
  • space-around:內容間距都會平均分配
  • space-between:平均分配內容,會對齊行頭及行尾
  • space-evenly:效果同 space-around 空白比space-around多

結論

介紹完grid的每個樣式功能,讓我們用一個完整個切版來做整理

步驟一:建立一個並將圖片插入html裡

<div class="box">
  <div class="item">
    <img src="img/img2.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img3.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img4.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img5.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img6.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img7.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img2.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img3.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img4.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img5.jpg" alt="">
  </div>
  <div class="item">
    <img src="img/img6.jpg" alt="">
  </div>
 </div>
.box{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

gap設定留白距離
grid-template-columns設定repeat(重複次數),因為圖片寬度都一樣
auto-fit:讓元素依畫面寬度自動換行
mixmax(300px, 1fr),表示元素的寬度不會小於300px,並會符合畫面縮放
https://ithelp.ithome.com.tw/upload/images/20211009/20112053rXsPcJPBCx.png

步驟二:圖片尺寸不同,用object-fit屬性裁切圖片

.box img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053aBmRssJyIS.png
步驟三:將第一張圖item設定big-box

設定grid-column水平範圍的寬度(黃色數字)及grid-row垂直範圍的高度(紫色數字),1/3 為開始線/終止線
https://ithelp.ithome.com.tw/upload/images/20211009/20112053Dyh4fOaQu8.jpg

<div class="box">
  <div class="item big-box">
    <img src="img/img2.jpg" alt="">
  </div>
	...
</div>
.big-box{
  grid-column: 1/3;
  grid-row: 1/3;
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053H1zORGrx4O.png
步驟四:隨螢幕裝置縮放將big-box grid-column屬性及row-column屬性設定auto

@media(max-width:414px){
  .big-box{
    grid-column: auto;
    grid-row: auto;
  }
}

https://ithelp.ithome.com.tw/upload/images/20211009/20112053YxsyKJFBpF.png
https://ithelp.ithome.com.tw/upload/images/20211009/2011205352wJacTVCK.png
這樣就完成啦~

完整的css樣式整理

.box{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.big-box{
  grid-column: 1/3;
  grid-row: 1/3;
}
.box img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
@media(max-width:414px){
  .big-box{
    grid-column: auto;
    grid-row: auto;
  }
}

資料來源:
https://medium.com/enjoy-life-enjoy-coding/css-所以我說那個版能不能好切一點-grid-基本用法-cd763091cf70
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout


上一篇
Flexbox-30天學會HTML+CSS,製作精美網站
下一篇
網頁動起來-30天學會HTML+CSS,製作精美網站
系列文
30天學會HTML+CSS,製作精美網站30

尚未有邦友留言

立即登入留言