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

第五篇讀書計畫的主題還是 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 屬性有兩種。

align-self: 在 cross axis 調整單個 div or item. (參考網站:TailwindCSS/align-self)
align-items: 在 cross axis 調整一群組的 div 或者 items - 整排 (參考網站:TailwindCSS/align-items)

如果 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-columns 跟 grid-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-rows 與 grid-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 裡沒有空間可以調整，則不會有變動)
- 參考 Tailwind 網站/justify-content
- 參考 Tailwind 網站/align-content
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)
- 參考 Tailwind 網站/justify-self
- 參考 Tailwind 網站/align-self
justify-items and align-items: are applied to the grid container to set all of the justify-self properties on the items. (則是調整某群 grids 的位置)
- 參考 Tailwind 網站/justify-items
- 參考 Tailwind 網站/align-items

好吧，承認後面有點小亂，因為想趕快結束這篇章，而且半夜 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，談螢幕方向

software-development