多欄佈局

多列布局規範提供了一種將內容佈局成多列的方法，就像您在報紙上看到的那樣。本文解釋瞭如何使用此功能。

先決條件 HTML 基礎知識（學習 HTML 簡介），以及 CSS 工作原理的瞭解（學習 CSS 簡介）。
目標 學習如何在網頁上建立多列布局，例如您在報紙上看到的佈局。

一個基本示例

讓我們探索如何使用多列布局——通常稱為multicol。您可以透過下載 multicol 起始檔案並新增 CSS 到適當的位置來進行操作。在本節底部，您可以看到最終程式碼的示例。

三列布局

我們的起始檔案包含一些非常簡單的 HTML：一個帶有 container 類別的包裝器，其中包含一個標題和一些段落。

帶有 container 類別的 <div> 將成為我們的 multicol 容器。我們透過使用以下兩個屬性之一來啟用 multicol：column-count 或 column-width。column-count 屬性接受一個數字作為其值，並建立該數量的列。如果您將以下 CSS 新增到您的樣式表並重新載入頁面，您將獲得三列

css
.container {
  column-count: 3;
}

您建立的列具有靈活的寬度——瀏覽器會計算出為每列分配多少空間。

設定 column-width

將您的 CSS 更改為使用 column-width，如下所示

css
.container {
  column-width: 200px;
}

瀏覽器現在將根據您指定的尺寸為您提供儘可能多的列；任何剩餘的空間將被分配到現有的列中。這意味著，除非您的容器正好可以被該寬度整除，否則您不會得到您指定的精確寬度。

樣式化列

由 multicol 建立的列無法單獨設定樣式。無法讓一列比其他列更大，也無法更改單個列的背景或文字顏色。您有兩個機會來更改列的顯示方式

使用上面的示例，透過新增 column-gap 屬性來更改間隙的大小。您可以嘗試不同的值——該屬性接受任何長度單位。

現在使用 column-rule 在列之間新增一條規則。與您在之前的課程中遇到的 border 屬性類似，column-rule 是 column-rule-color、column-rule-style 和 column-rule-width 的簡寫，並接受與 border 相同的值。

css
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79 185 227);
}

嘗試新增不同樣式和顏色的規則。

需要注意的是，規則本身不佔用任何寬度。它位於您使用 column-gap 建立的間隙中。要使規則兩側有更多空間，您需要增加 column-gap 的大小。

跨越列

您可以使元素跨越所有列。在這種情況下，內容將在插入跨越元素的位置斷開，然後在元素下方繼續，建立一個新的列集。要使元素跨越所有列，請為 column-span 屬性指定 all 值。

注意：無法使元素僅跨越某些列。該屬性只能具有 none（預設值）或 all 的值。

列和碎片

多列布局的內容是分段的。它的行為與分頁媒體中的內容基本相同，例如當您列印網頁時。當您將內容轉換為 multicol 容器時，它會分成多個列。為了使內容執行此操作，它必須斷開。

分段框

有時，這種斷開會在導致閱讀體驗不佳的地方發生。在下面的示例中，我使用 multicol 來佈局一系列框，每個框都包含一個標題和一些文字。如果標題和文字之間的列斷開，標題會與文字分離。

html
<div class="container">
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

設定 break-inside

要控制這種行為，我們可以使用 CSS Fragmentation 規範中的屬性。此規範提供了一些屬性，用於控制 multicol 和分頁媒體中內容的斷開。例如，透過將 break-inside 屬性和 avoid 值新增到 .card 的規則中。這是標題和文字的容器，因此我們不希望它分段。

css
.card {
  break-inside: avoid;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin: 0 0 1em 0;
}

新增此屬性會導致框保持完整——它們現在不會分段到列中。

測試您的技能！

您已經到達本文的結尾，但您還記得最重要的資訊嗎？您可以找到一些進一步的測試來驗證您是否保留了這些資訊，然後再繼續——請參閱 測試您的技能：Multicol。

摘要

您現在知道了如何使用多列布局的基本功能，這是您在選擇為正在構建的設計選擇佈局方法時可以使用的一種工具。

另請參閱