Blog Cover Image

Inspire you to have New thinking, Walk out your unique Road.

[前端小菜鳥] 前端工程師成長計畫 - 讀書篇(5) | CSS(4) Layout 樣式、Flexbox、Grid 佈局

Posted onJun 30, 2024

第五篇讀書計畫的主題還是 CSS。

正式進入 CSS 後,會花費大約一個半月的時間去刷這個網站的內容,所以接下來的文章都會是以這篇網站的內容學習為主。

若對 CSS 沒有太大興趣的話,可以直上替代方案: CSS Cheatsheet + 標準語法糖 - w3schools

此系列的文章都是屬於本人先將網站內容消化過再總結紀錄,但如果內容太長的話...就會只挑自己覺得重要的跟要提醒的紀錄。

CSS 讀書項目

  • [ ] HTML/CSS
    • [x] [HTML] Cheatsheet
    • [ ] [CSS] Learn CSS - web.dev 搭配 TailwindCSS 搭配 MDN (每天慢慢看可能也要個一個月吧,算很扎實)
    • [ ] [CSS(替代方案)] Cheatsheet + 標準語法糖 - w3schools (如果對 CSS 沒興趣,可以直接這項簡單帶過)
    • [ ] [CSS] 搭配 Hackerrank 證照題目交互學習
    • [ ] [CSS] 41 CSS 面試題目 (選擇擺在這看或者移到最後皆可)
    • [ ] [CSS] 看 創意構想 有 2 個影片 (滿滿的知識)
    • [ ] (Pending) [CSS] 了解 Canvas, WebGL, SVG, CSS 3 階層樣式表 or three.js,了解一下就好,不用太深入
    • [ ] [Front-end] 簡單了解一些 CSS 框架 TailwindCSS, Sharon UI

詳請可參考完整讀書計畫目錄

Table of Content 內容

這篇文章的內容主要是講 CSS 的 Layout, Flexbox 跟 Grid。

此篇文章內容非常龐大,我大概是刷了好幾次才把他們看完,大概也 delay 了兩週左右,目錄的部分就看能不能用最直接簡單暴力的方式把重點節錄出來,有興趣直接點就好。

  • [x] Layout
    • [x] Inline and Block spaces
    • [x] Flex & Grid
    • [x] Flow layout
      • [x] Position
  • [x] Flexbox
    • [x] Creating a flex container (display: flex)
    • [x] Controlling the direction of items (flex-direction)
    • [x] Wrapping flex items (flex-wrap)
    • [x] Controlling space inside flex items (flex-grow, flex-shrink, flex-basis and flex)
    • [x] Reordering flex items
    • [x] Flexbox alignment overview (alignment-overview)
    • [x] Distributing space on the main axis (justify-)
    • [x] Distributing space on the cross axis (align-)
    • [x] The place-content shorthand (place-content)
    • [x] Margin auto (margin-auto)
    • [x] How to center an item vertically and horizontally
  • [x] Grid
    • [x] Grid Terminology (Basic terms of Grid)
    • [x] Rows and columns
      • [x] Distributing space on the main axis (justify-)
      • [x] The fr unit
      • [x] The minmax() function
      • [x] The repeat()
      • [x] auto-fill and auto-fit
    • [x] Auto-placement
      • [x] Placing items in columns
      • [x] Spanning tracks
      • [x] Filling gaps
    • [x] Placing items
      • [x] Spanning tracks
      • [x] Negative line numbers
    • [x] Named grid lines
    • [x] Grid Template Areas
    • [x] Shorthand properties
    • [x] Alignment
  • [x] 本節小課程 - Portrait 和 Landscape,談螢幕方向

Layout

一個網頁的設計通常會是混用不同的 Layout。

通常 layout 會使用 css 的display屬性去設置,包含以下幾個常用的 layout。

display

  • inline
  • block
  • flex
  • grid

更多 layout: 參考TailwindCSS

Inline and Block spaces

這一小節是我自己加的,根據這個圖,我們能知道無論 layout 是 inline 或者 block,都有相對應的 space,如以下。

  • margin
  • border
  • div
  • padding
  • content

設計上 inline (就是橫向)、 block (區塊) 都有其對應的空間的屬性,如圖所示,所以當調整某個空間屬性 (margin, padding),則會依據他的 display 去調整空間。

Flex & Grid

Flexbox 跟 Grid 在 Layout 佈局很常使用,尤其現代網頁特別的花俏以及許多需求,懂得運用這兩者 layout 將能做出排版更好的網站。

  • flex: 是一個一維(one-dimensional)的 layout,跨單個軸線(single axis)的佈局,可以是水平方向或垂直方向。
  • grid: 是一個和 flex 佈局相似的佈局方式,但他被設計成可以橫跨多個軸線 (也可以說是二維的 layout)

簡單的講一下怎麼使用這兩個 layouts

/* Flexbox */
.container {
  display: flex;
}
<!-- Flexbox -->
<div class="container">
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
</div>
/* Grid */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
<!-- Grid -->
<div class="container">
  <div>Item1</div>
  <div>Item2</div>
  <div>Item3</div>
  <!-- ... -->
</div>

Flow layout

在來是一些其他的 layout。

  • Inline block
  • Floats
  • Multicolumn layout
  • Positioning

Position

這邊直接補充 Position 的內容,position 也是很常被使用的佈局,但他不是使用 display 設定,而是使用 position。

簡單介紹一下幾個常用的 position

  • Positioning
    • position: relative: 相對配置,1. 提供讓 absolute 內容作為定位基準。 2. 可以在某個區塊中將內容作位移擺放 (留有空間)
    • position: absolute: 絕對配置,能在某個區塊中將內容位移擺放 (無視空間),初始的基準是整個網頁 (body),除非使用 relative 重新定位。
    • position: fixed: 像是 header, navbar, sidebar, footer,要把某個區塊固定在某個位置就用這個佈局。
    • position: static
    • position: sticky

參考: position 屬性的基礎概念

根據參考的網站特別讀到,absolute 能使用 top, left, right, bottom 各種方式將內容擺放到想擺置的地方,但其實 relative 也有 top, left, right, bottom 屬性。我想根據這個網站來補充一些小特點。

1.position: absolute 絕對配置,如果沒有指定基準元素的話 (沒有使用 relative div 重新指定基準元素),預設是以 body 元素 (整個視窗為基準)。

假設 body 是整個網站的視窗,那麼以下的 css 會使該 div 內容在整個網站的左上方。

.div {
  position: absolute;
  top: 0px;
  left: 0px;
}

但如果你是要內容以某個 div 為基準,飄在那個 div 上,你需要運用 position: relative 去定位那個基準點。

<html>
  <body>
    <div class="base">
      <!-- 想讓content以base div為基準 -->
      <div class="content">
        <div>
      <div>
  </body>

</html>

.base {
  position: relative;
}
.content {
  position: absolute;
  top: 0px;
  left: 0px;
}

2.position: relative 相對配置,這邊來說說一些我自己本人覺得是 relative 的盲點 (就是我運用時沒學到的)。

relative會被運用在兩個點:

  • 設定絕對配置( position: absolute )的基準元素時
  • 希望元素偏移重疊 or 指定圖層上下順序且同時保留原本的空間時

前者是我在上面示範過的,如果你希望某個 content 能 absolute 在另一個 div 的基準點上 (而不是 body),我們需要為那個 div 設置 position: relative,重新設定基準點。

後者是其實 relative 也能使用 top, left, right, bottom 將內容擺放不同的區域,但與 absolute 不同的差別是: relative 會保持原有的空間,在當下個空間做位置的偏移。而absolute則會不會保留空間,直接浮在內容的上方,所以若下方原本有其他內容,則會直接往上移把原本的空間佔去

詳細的範例圖,請參考網站。

Note: 只能說早期我並不覺得 relative 有什麼作用,就是加了好像也跟沒加沒什麼關係,但後來發現正是因為某些場合不需要 relative 但我加了造成某些 css 的錯誤,這樣看起來我本身許多專案的 code,如果不需要用到 relative 的場合就儘量拿掉比較好。

Flexbox

Flexbox 是一個設計 sidebar 的設計模式。彈性的佈局模式 (Flexible Box Layout Model) 設計為一維陣列的內容,能在這一維陣列中擺放不同尺寸的內容,然後為他們調整合適的空間跟佈局。

列舉一些使用 flex layout 達成的效果:

  • 可以佈局為一行水平的 row 或垂直的 column。
  • 依據 writing mode 改變顯示方向
  • 通常初始值為單行(一維),但可以用 wrap 將內容切成多行。
  • 在 layout 中,Items 可以在視覺上被重新排行或調換順序 (但要注意邏輯沒變)
  • layout 中的空間能被彈性調整,能根據 items 跟 flexbox 設置的 div 調整空間。
  • 在被 wrapped 切成多行的 flex layout 中,Items 之間或周圍的空間可以用 Alignment properties 去調整。
  • Items 也能在跨軸 (cross axis) 中被調整空間。

Flexbox 主要是一維陣列,那他的概念有

  • main axis (主軸)
  • cross axis (跨軸)

在水平方向時,主軸就是水平方向、一維內的 items 或內容就是呈現水平方向擺放,而跨軸就是垂直方向,如果你需要調整空間或者使用到一些額外擺放屬性 (align),就會動到跨軸。

關於跨軸的運用,當你使用 wrap 屬性將內容切成多行時,或者能使用 align 屬性來在在跨軸安排更多的空間或者佈置內容的擺放。

Creating a flex container (display: flex)

創造一個 flexbox 佈局,你需要先在一個 div 中設置 display: flex。接著在這個 div 中,加入更多 divs (不同的 Items)

如果你沒有設置其他屬性,那麼以下是初始值:

  • Items 會呈現單行的 row
  • 不會被 wrap (就是超出就超出,不會被切行)
  • Items 不會填滿 container
  • Items 會在 container 的 start 位置

Controlling the direction of items (flex-direction)

兩種方式能調整 flex 的方向:

  • flex-direction: row, row-reverse, column, column-reverse
  • writing-mode and direction

你可以透過 flex-direction 決定這個 flexbox 的方向是 row 還是 column。或者透過設定 writing-mode 更改方向。

但使用 row-reverse 跟 column-reverse 要注意,有的時候他會造成一些問題,比方說他是視覺上的將 div 顛倒,但並不是邏輯改變了,如果有賦予一些邏輯的計算跟函式,要多測試幾次驗證。

除了使用 flex-direction 設定 flex 的方向外,還能使用 writing-mode 和 direction 屬性去設置。

  • direction: rtl (從右到左), ltr (從左到右)
  • writing-mode: horizontal-tb, vertical-lr, vertical-rl

Wrapping flex items (flex-wrap)

如果想要超出的 flex 內容自動換行,可以使用 flex-wrap 屬性達成。initial 的值是 no-wrap,就是不自動換行。

當設置換行時,設定以下的 css 就可以自動把內容換行,而不會讓他超出 div

.container {
  display: flex;
  flex-wrap: wrap;
}

再來介紹一個縮寫的屬性 -> flex-flow,則是 flex-direction + flex-wrap的縮寫,可賦予一~兩個值定義 flex 的方向以及要不要 wrap。

參考屬性表

/* flex-flow:<'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow:<'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow:<'flex-direction'> 和 <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
.container {
  display: flex;
  /* column方向、需要被wrap */
  flex-flow: column wrap;
}

Warning: Using order has the same problems as the row-reverse and column-reverse values of flex-direction. It would be very easy to create a disconnected experience for some users. Do not use order because you are fixing things being out of order in the document. If the items logically should be in a different order, change your HTML!

總之就是類似這類型視覺上的順序變化,邏輯端是沒有改變的,所以使用時要多注意。

Controlling space inside flex items (flex-grow, flex-shrink, flex-basis and flex)

通常在沒有設置任何有關縮放屬性的值時,flex 裡的 div 會根據其內容做縮放 (也就是內在尺寸 Intrinsic Sizing),所以如果在一般情況下,有三個 div,很有可能 3 個 div 都擠在 main axis 的左方,右方留很大一個空間。

為了能夠更自由的調整縮放這些內容,有幾種方式:

  • flex-grow: 可以指定某個 div 是否寬度延展到最大 (1) 或 不要做延展 (0)
    • flex-grow: 1; -> items can grow larger than their flex-basis.
    • flex-grow: 0;
  • flex-shrink: 可以指定某個 div 縮短它的寬度,可比原本設定的寬度(flex-basis)更窄(1) 或 不縮短它的寬度 (0)
    • flex-shrink: 1; -> items can shrink smaller than their flex-basis.
    • flex-shrink: 0;
  • flex-basis: 可以指定某個 div 他的寬度的大小 (直接賦予值)
    • flex-basis: [值];
    • flex-basis: 0; -> items have a base size of 0.

縮寫 - 透過 flex 屬性直接指定寬度:

你可以透過 flex 的屬性,一次性的賦予三個值,其格式為此:

flex: [flex-grow] [flex-shrink] [flex-basis];

一樣是針對 display:flex 內各個 div 賦予。

.item1 {
  flex: 1 1 auto;
}
<div class="flex">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

以上的範例就是 item1 的 div,其 flex-grow: 1, flex-shrink: 1 及 flex-basis: 0%

你可以參考 TailwindCSS去理解。

Reordering flex items

.container {
  display: flex;
  gap: 1rem;
}

.box:nth-child(2) {
  order: 2;
}

.box:nth-child(3) {
  order: 3;
}

可以用 order 這個屬性來改變 div 的排序位置,但跟 reverse 一樣要小心運用。

Flexbox alignment overview (alignment-overview)

再來是有三個方式可以在 flex layout 中分佈與調整空間。

  • justify-content: 調整 main axis 的空間
  • align-content: 調整 cross axis 的空間
  • place-content: 同時設置上面兩個屬性的簡寫,可以設置 1~2 個

然後調整 align (cross axis) 空間的屬性:

  • align-self: 在 cross axis 調整單個 div or item.
  • align-items: 在 cross axis 調整 一群組的 div 或者 items - 整排

口訣: 如果跟調整 main axis 有關的空間就使用 justify- 開頭,如果調整跟 cross-axis 有關的空間就使用align-開頭的屬性。

Distributing space on the main axis (Justify-)

調整 main axis 空間的屬性叫 justify-,justify 的初始值為 flex-start

.container {
  display: flex;
  /* 也就是所有的flex div都擠在左邊 */
  justify-content: flex-start;
}

justify-content 有許多值,這邊列舉幾個

  • flex-start: 全擠在左邊
  • flex-end: 全擠在右邊
  • center: 至中
  • space-between: 均等空間分散

參考網站: TailwindCSS/justify-content

換成 flex-direction: column,也是差不多的道理,只是變成直立。

  • flex-start: 全擠在上面
  • flex-end: 全擠在下面
  • center: 至中
  • space-between: 均等空間分散

Distributing space on the cross axis (Align-)

調整 cross axis 空間的屬性叫 align-,但調整的 align 屬性有兩種。

如果 justify-content 的初始值是 flex-start,那 align- 的初始值是 stretch。

基本上值都差不多,只需要搭配圖像意會一下,align 就是在 cross-axis 調整單個或整排的上下空間 (往上浮、至中、往下浮或者其他..)。

如果是 flex-direction: column,其 cross-axis 就會變成左右的空間。

是需要一點時間了解。

The place-content shorthand (place-content)

就是用 place-content 這個屬性可以一次賦予調整兩個 axis 的屬性。

place-content: [align-content] [justify-content]
/* 如果只設定一個值,那代表這個值會同時實現兩個空間的調整,請注意使用 */
place-content: [值]

Margin auto

如果你在 flexbox 樣式裡,你想把一個 div 刻意推遠,那麼你可以使用 margin: auto 來達成這個效果,將 margin: auto 下在你希望那個被推遠的 div 樣式上。

How to center an item vertically and horizontally

使用下面的樣式,就能把一個 div 完全置中。

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid

本來沒有要很詳細寫 Grid 的內容,因為當初第一次看完的時候,覺得內容很多又不懂。

但神奇的是,靜下心來再刷第二次時,就突然看懂了,一邊讀一邊做筆記。

阿不過,就在我進入後半邊後,又開始不懂了,隨便寫了,那個...概念上就是那些要讀 XD

  • Grid: 二維的佈局,合併外在尺寸跟內在尺寸的運用
  • Flexbox: 一維的佈局,比較彈性去分佈跟調整佈局內 Items 的大小跟空間

當你創一個 grid 佈局時,你會同時創立 rows 跟 columns

Grid Terminology (Basic terms of Grid)

關於 Grid 的專有名詞就保留英文吧,比較好懂。

  • Grid Terminology
    • Grid lines: A grid is made up of lines.
    • Grid tracks: A track is the space between two grid lines. A row track is between two row lines and a column track between two column lines.
    • Grid cell: A grid cell is the smallest space on a grid defined by the intersection of row and column tracks. It's just like a table cell or a cell in a spreadsheet.
    • Grid area: Several grid cells together.
    • Gaps: A gutter or alley between tracks.
    • Grid container: apply with display: grid and create grid layouts
    • Grid item: A grid item is an item which is a direct child of the grid container. (several Divs under the container)

Rows and columns

  • Intrinsic sizing keywords
    • min-content
    • max-content
    • fit-content()
  • The fr unit
  • The minmax() function
  • repeat() notation
  • auto-fill and auto-fit
.container {
  display: grid;
  /* 橫排 定義 3個不同的單位寬的格子 */
  grid-template-columns: 5em 100px 30%;
  /* 直排 定義 第一排高 200px, 第二排自動 */
  grid-template-rows: 200px auto;
  gap: 10px;
}

grid-template-columnsgrid-template-rows 來定義 grid 內容。

Intrinsic sizing keywords

就是當你沒有刻意定義長寬高的值時,他會根據實際的內容去縮放格子(grid or div)的大小。這邊提供三個函式根據內在尺寸去縮放每個 grid 格子的大小。

  • min-content: 就是將 grid 格子縮到最小/剛剛好貼合內容的大小,也就是說假設這個格子裡有五個英文字,那他的格子大小就是剛好擠下這 5 個字,或者盡可能地縮小,但不會小到連字都不見。

  • max-content: 就是會將 grid 格子放到最大,比方說個三個格子各有 5, 7, 10 個字,那 grid 就會縮放到比原本字數更寬更高的尺寸。

  • fit-content(): 就是可以下一個函式裡面擺想要指定的固定寬高值,格子就會固定那個值。比方說 fit-content(10em) ,那格子的尺寸就不會超過 10em。

The fr unit

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

fr 單位有點像 flex: auto,這個單位給予格子更靈活的長度,不是實際定義格子的尺寸,而是定義格子占幾格方格的尺寸 (隨著 container 的寬高去靈活彈性變化) 。

比方說 橫三排(columns) 1fr, 1fr, 1fr,也就是 3 格,但如果把第三格改成 2fr,那麼橫排的寬/4,前面 2 個 column 寬個佔1/4寬、第 3 個 column 寬佔2/4寬

// 原本 1fr, 1fr, 1fr
|     |     |     |
// 當設為 1fr, 1fr, 2fr
|    |    |       |

The minmax() function

可以運用一個 minmax()去定義最小跟最大的尺寸,比方說 minmax(auto, 1fr)就是最小隨著內容而定,但最大不會超過 1 個 fr 的尺寸。

The repeat()

假設今天你要寫好多好多的格子,是不是就要這樣寫?

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

那寫 100 個時,該怎麼辦呢?難道真要寫 100 行?所以就有了 repeat 這個函式,改成以下這樣就能產生 12 個格子。

.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.container {
  display: grid;
  grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill and auto-fit

有點難解釋,先發一個參考的網站

簡單來說

  • auto-fill: 如果你給予他固定的 size,他就產固定 size 的格子,如果剛好目前的 container 第一排可以足夠擺 5 個固定 size 的格子,那他就會擺滿 5 個,第二排只需要 2 個格子,那就是 2 個固定 size 的格子其他留空。
  • auto-fit: 你雖然給他固定的 size,但如果你寫的 divs 不夠,比方說第二排只有 2 個格子,那這個屬性會特別延展這兩個格子的 size,不按照原本定好的,而是自動延展至符合 5 個格子的寬度。

Auto-placement

  • Placing items in columns: 預設
  • Spanning tracks
  • Filling gaps

就是說上面介紹了 Grid 的基本概念以及如何產生 Grid 後,接下來的章節就會跟空間、擺放之類的相關知識。

應該也就是我開始感到看不懂且痛苦的地方了 Q.Q

Placing items in columns

基本上沒有設置任何方向的話,預設的 grid 排盤是依據 row 的方向,但由於實際運用場景會有不同的狀況以及不同的書寫方向(就是日文、英文、阿拉伯文跟其他),所以可以透過兩種方式變更 grid 排盤方向。

  • grid-auto-flow: column: 特地將屬性設為 column,那 grid 就會按照 column 方向渲染
  • writing-mode: 會根據設定的 writing-mode 變換 grid 顯示的方向
    • writing-mode: horizontal-tb (水平)
    • writing-mode: vertical-rl (直立右上開始渲染到左下)
    • writing-mode: vertical-lr (直立左上開始渲染到右下)

詳細 grid 怎麼變化就看網站範例

Spanning tracks

可以使用 span 來設定你的 grid 延展空間。

  • grid-row-end
  • grid-column-end
.item {
  grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}
.item {
  grid-column: auto / span 2;
}

Filling gaps

運用 grid-auto-flow 屬性 可以將 grid 自動填補可填補的空間。

參考範例

Placing items

  • Placing items
    • grid-column-start
    • grid-column-end
    • grid-row-start
    • grid-row-end
    • grid-column
    • grid-row
  • Stacking items
  • Negative line numbers

在最一開始的基礎概念是說 Grid 基本上是以 line 組成,所以是可以透過指定 line 的位置來擺放 Grid。

有四個屬性可以設定

詳細可以點擊連結裡的網站內容,有圖像比較好理解。

基本上可以透過這四個屬性去設定 Grid 要在哪個 line 開始渲染或者渲染到哪條 line 結束。

當然也有更簡短的寫法:

Stacking items

再來是可以利用 z-index 去堆疊 Grid ,z-index 就是可以決定元素的 z 軸位置 (視覺上來看就是前跟後),前面運用很多不同的 span 延伸空間、運用 place items 去決定從哪條 line 渲染,而這個小章節是指可以用 z-index 達到 grid 格子的堆疊視覺效果。

這個呢,就只能多練習了,用文字感覺也很難達到解說。

Negative line numbers

  • explicit grid 明式格線
  • implicit grid 暗式格線

Use grid-template-rows and grid-template-columns to create what is known as the explicit grid (明式格線). - 基本上就是當你建立格線時,格線自己也建立了暗式格線(implicit grid)。

你能在暗式格線內透過 grid-auto-rowsgrid-auto-columns 屬性,給軌道定義一套大小。

Named grid lines

你能為 grid line 格線命名。

.container {
  display: grid;
  grid-template-columns:
    [main-start aside-start] 1fr
    [aside-end content-start] 2fr
    [content-end main-end]; /* a two column layout */
}

.sidebar {
  grid-column: aside-start / aside-end;
  /* placed between line 1 and 2*/
}

footer {
  grid-column: main-start / main-end;
  /* right across the layout from line 1 to line 3*/
}

Grid Template Areas

也能幫某個領域的 grid 命名,使用 grid-area去命名。

header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

footer {
  grid-area: footer;
}

然後運用在 container 中

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "header header header header"
    "sidebar content content content"
    "sidebar footer footer footer";
}

有某些規則:

There are a few rules when using grid-template-areas.

  • The value must be a complete grid with no empty cells. (不能有空白的單元格)
  • To span tracks repeat the name. (重複名稱可以延伸軌道)
  • The areas created by repeating the name must be rectangular and cannot be disconnected. (重複名稱的領域必須是矩形,而且不能斷開)

參考內容

Shorthand properties

Shorthand properties (就是某些屬性可以縮寫)

  • grid-template
  • grid

Alignment

感覺這樣看下來,比起 flex,grid 在很後面的地方才開始介紹 Alignment。

基本上在 flexbox 學習到的 align 內容也都適用於 grid。

我們再複習一次

  • justify- 開頭用於 inline axis,方向會根據設置的 writing mode 改變。

  • align- 開頭用於 block axis,方向會根據設置的 writing mode 改變。

  • justify-content and align-content: distribute additional space in the grid container around or between tracks. (主要是分配散佈在 grid container 或格子與格子中間的空間) (Note: 如果你的 container 裡沒有空間可以調整,則不會有變動)

  • justify-self and align-self: are applied to a grid item to move it around inside the grid area it is placed in. (則是調整某個 grid 的位置) (Note: 初始值是 stretch,所以基本上 grid 格是填滿的,但如果 item 是照片或其他有固定尺寸的物件,那值會變成 start)

  • justify-items and align-items: are applied to the grid container to set all of the justify-self properties on the items. (則是調整某群 grids 的位置)

好吧,承認後面有點小亂,因為想趕快結束這篇章,而且半夜 2 點了 Q.Q。

但關於 Grid 的內容比較多,我想接下來幾天我應該還是會多花點時間複習。

本節小課程 - Portrait 和 Landscape,談螢幕方向

接下來要談一下 Portrait 和 Landscape,是我在寫公司專案時遇到的知識。

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

在寫 css 時,一定有遇過 media,當你的服務需要在不同裝置呈現,甚至除了制定的寬度大小以及要符合直立與橫向設計時,這時候就會需要用到 orientation 這個屬性。

根據參考網站

  • 直式螢幕稱為「Portrait」
  • 橫式螢幕「Landscape」

在電腦上比較不會有這個問題,但是當手機端時就會遇到類似的問題。也就是說當你的服務需要手機橫著操作時 (參考網站舉的例是遊戲類的),那你的 UI/css 呈現都會不同,這需要針對並特別設計跟撰寫,不是寫一行 css 就搞定的。

另外某些例外是,在某些直立 (Portrait) 會有部分功能被隱藏,因為不夠顯示,但是當轉橫式(Landscape)時,由於螢幕跟空間夠大,某些功能就可以顯現出來,這些特別的設計也會使用到 orientation 屬性去特別撰寫。

那這堂小課程就到這,主要是因為我很少見到這個寫法,當初在公司專案裡的 css 檔案中有幸遇見不熟悉,所以特別在此篇讀書計畫提出。

詳細就請前往參考網站拜讀囉~

參考網站: Portrait 和 Landscape,談螢幕方向