對於平面設計師來說，多欄或跨欄排版的應用非常普遍，像是報紙、雜誌、廣告 DM 等等，幾乎我們生活中看到的各種平面設計都會出現它的蹤跡。特別是遇到大量的文字內容，透過欄位的編排，除了增加閱讀趣味外，好的編排還可以讓內容更加容易閱讀，幫助理解，一舉多得。
對網頁設計師來說，由於網頁需要透過 HTML Tag 去標示各種區塊的關係，更多時候我們比較注重 Tag 所代表的語意而忽略版面的效果。例如：段落與段落之間我們會使用 P 標籤，這標籤只是告訴瀏覽器這是一段文章，預設的編排只是由上而下，手法上略顯單調，缺乏平面設計在編排上的巧思及趣味。
事實上，如果你有心的話，CSS 也有語法可以達到類似平面設計的多欄效果，雖然可以調用的參數不像平面設計那麼豐富，但花點心思去了解它，在有需要的時候就可以應用在案子上，提升使用者的閱讀體驗。
我們以三隻小豬的故事為例，請 AI 寫了一篇閱後的心得，常見的網頁編排如下：
《三隻小豬》是一個永不過時的經典童話故事，透過三隻小豬的生活經歷，深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀，這些價值觀不僅適用於童話世界，更是指引我們走向成熟與成功的重要道路。 首先，第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚，未來面臨大野狼的威脅時，無法守護自己。這告訴我們要有遠見，不要只看眼前的利益，應該有長遠的規劃和準備，以面對未知的挑戰。 接著，第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力，但他並沒有因此而放棄，最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難，並相信自己的能力。在生活中，我們或許會面臨各種各樣的挑戰，但只要有毅力堅持，定能克服困難，達成目標。 最後，第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋，最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動，不要草率行事，要有計劃地解決問題，並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。 這個故事讓我深刻體會到在生活中，勤勞、毅力和智慧的重要性。我們需要有遠見，堅持不懈地追求夢想，並願意學習解決問題的方法。這些價值觀將伴隨我們一生，指引著我們走向更加積極、成熟和成功的未來。我相信，《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
接著，我們透過 column-count 將欄位分成三欄
《三隻小豬》是一個永不過時的經典童話故事，透過三隻小豬的生活經歷，深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀，這些價值觀不僅適用於童話世界，更是指引我們走向成熟與成功的重要道路。
首先，第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚，未來面臨大野狼的威脅時，無法守護自己。這告訴我們要有遠見，不要只看眼前的利益，應該有長遠的規劃和準備，以面對未知的挑戰。
接著，第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力，但他並沒有因此而放棄，最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難，並相信自己的能力。在生活中，我們或許會面臨各種各樣的挑戰，但只要有毅力堅持，定能克服困難，達成目標。
最後，第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋，最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動，不要草率行事，要有計劃地解決問題，並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中，勤勞、毅力和智慧的重要性。我們需要有遠見，堅持不懈地追求夢想，並願意學習解決問題的方法。這些價值觀將伴隨我們一生，指引著我們走向更加積極、成熟和成功的未來。我相信，《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
多欄位的效果實現了，但欄位與欄位之間的預設距離似乎太窄，這時我們可以透過 column-gap 決定欄位與欄位的間隙，這裡我們給它設為 2em
《三隻小豬》是一個永不過時的經典童話故事，透過三隻小豬的生活經歷，深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀，這些價值觀不僅適用於童話世界，更是指引我們走向成熟與成功的重要道路。
首先，第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚，未來面臨大野狼的威脅時，無法守護自己。這告訴我們要有遠見，不要只看眼前的利益，應該有長遠的規劃和準備，以面對未知的挑戰。
接著，第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力，但他並沒有因此而放棄，最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難，並相信自己的能力。在生活中，我們或許會面臨各種各樣的挑戰，但只要有毅力堅持，定能克服困難，達成目標。
最後，第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋，最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動，不要草率行事，要有計劃地解決問題，並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中，勤勞、毅力和智慧的重要性。我們需要有遠見，堅持不懈地追求夢想，並願意學習解決問題的方法。這些價值觀將伴隨我們一生，指引著我們走向更加積極、成熟和成功的未來。我相信，《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
如果我們希望欄位與欄位間的區隔可以更清晰點，想增加一條分隔線時，可以透過 column-rule 來實現
《三隻小豬》是一個永不過時的經典童話故事，透過三隻小豬的生活經歷，深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀，這些價值觀不僅適用於童話世界，更是指引我們走向成熟與成功的重要道路。
首先，第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚，未來面臨大野狼的威脅時，無法守護自己。這告訴我們要有遠見，不要只看眼前的利益，應該有長遠的規劃和準備，以面對未知的挑戰。
接著，第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力，但他並沒有因此而放棄，最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難，並相信自己的能力。在生活中，我們或許會面臨各種各樣的挑戰，但只要有毅力堅持，定能克服困難，達成目標。
最後，第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋，最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動，不要草率行事，要有計劃地解決問題，並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中，勤勞、毅力和智慧的重要性。我們需要有遠見，堅持不懈地追求夢想，並願意學習解決問題的方法。這些價值觀將伴隨我們一生，指引著我們走向更加積極、成熟和成功的未來。我相信，《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
如果我們想給這篇文章一個標題，並且這個標題要橫跨三欄，這時可以使用 column-span: all 來實現
三隻小豬
《三隻小豬》是一個永不過時的經典童話故事，透過三隻小豬的生活經歷，深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀，這些價值觀不僅適用於童話世界，更是指引我們走向成熟與成功的重要道路。
首先，第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚，未來面臨大野狼的威脅時，無法守護自己。這告訴我們要有遠見，不要只看眼前的利益，應該有長遠的規劃和準備，以面對未知的挑戰。
接著，第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力，但他並沒有因此而放棄，最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難，並相信自己的能力。在生活中，我們或許會面臨各種各樣的挑戰，但只要有毅力堅持，定能克服困難，達成目標。
最後，第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋，最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動，不要草率行事，要有計劃地解決問題，並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中，勤勞、毅力和智慧的重要性。我們需要有遠見，堅持不懈地追求夢想，並願意學習解決問題的方法。這些價值觀將伴隨我們一生，指引著我們走向更加積極、成熟和成功的未來。我相信，《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
比較可惜的是 column-span 的設定只有 all 及 none 兩種，我們無法用 column-span: 2 來表示跨欄的數量，希望在未來有更多的參數可以使用 😛
三隻小豬
《三隻小豬》是一個永不過時的經典童話故事，透過三隻小豬的生活經歷，深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀，這些價值觀不僅適用於童話世界，更是指引我們走向成熟與成功的重要道路。
首先，第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚，未來面臨大野狼的威脅時，無法守護自己。這告訴我們要有遠見，不要只看眼前的利益，應該有長遠的規劃和準備，以面對未知的挑戰。
接著，第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力，但他並沒有因此而放棄，最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難，並相信自己的能力。在生活中，我們或許會面臨各種各樣的挑戰，但只要有毅力堅持，定能克服困難，達成目標。
最後，第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋，最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動，不要草率行事，要有計劃地解決問題，並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中，勤勞、毅力和智慧的重要性。我們需要有遠見，堅持不懈地追求夢想，並願意學習解決問題的方法。這些價值觀將伴隨我們一生，指引著我們走向更加積極、成熟和成功的未來。我相信，《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
以上是網頁關於跨欄的相關設定，有興趣的話可以找篇文章來試作，更多關於 column-* 的編排也可以到 W3School 來查詢。
