使用 CSS 實現多列布局

飞仔FeiZai發表於2024-07-11
CSS

使用 CSS 實現多列布局

在 CSS 中，可以透過多種方法實現多列布局，以下是一些常見的方法：

1. 使用 Flexbox

Flexbox 是一個強大的佈局工具，適合用於需要靈活佈局的場景。以下是一個基本的示例：

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px;
}

2. 使用 Grid 佈局

Grid 佈局更適合複雜的多列布局。以下是一個基本示例：

<div class="grid-container">
  <div class="grid-item">Column 1</div>
  <div class="grid-item">Column 2</div>
  <div class="grid-item">Column 3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  padding: 10px;
  border: 1px solid #ccc;
}

3. 使用 Multi-Column Layout

CSS Multi-Column Layout 模組提供了一種建立多列布局的簡便方法：

<div class="multicol-container">
  <div class="multicol-item">Column 1</div>
  <div class="multicol-item">Column 2</div>
  <div class="multicol-item">Column 3</div>
</div>

.multicol-container {
  column-count: 3;
  column-gap: 10px;
}

.multicol-item {
  break-inside: avoid;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

4. 使用 Float

儘管 Float 佈局已經不那麼常用了，但在某些簡單的佈局中仍然有用：

<div class="float-container">
  <div class="float-column">Column 1</div>
  <div class="float-column">Column 2</div>
  <div class="float-column">Column 3</div>
</div>

.float-container {
  overflow: hidden;
}

.float-column {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

5. 使用 CSS Table Layout

CSS Table 佈局可以用於實現多列布局，透過將容器設定為 display: table，列設定為 display: table-cell：

<div class="table-container">
  <div class="table-column">Column 1</div>
  <div class="table-column">Column 2</div>
  <div class="table-column">Column 3</div>
</div>

.table-container {
  display: table;
  width: 100%;
}

.table-column {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ccc;
}

6. 使用 Inline-Block

使用 inline-block 可以實現簡單的多列布局：

<div class="inline-block-container">
  <div class="inline-block-column">Column 1</div>
  <div class="inline-block-column">Column 2</div>
  <div class="inline-block-column">Column 3</div>
</div>

.inline-block-container {
  text-align: justify;
}

.inline-block-column {
  display: inline-block;
  width: 32%;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 0 0.5%;
  box-sizing: border-box;
}

.inline-block-container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

7. 使用 CSS Grid Layout 的 grid-template-areas

這種方法允許透過命名網格區域來定義佈局：

<div class="grid-areas-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</div>

.grid-areas-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
  background: #ccc;
}

.sidebar {
  grid-area: sidebar;
  background: #ccc;
}

.main {
  grid-area: main;
  background: #ccc;
}

.footer {
  grid-area: footer;
  background: #ccc;
}

這些方法各有優缺點，選擇適合的方法應根據具體專案需求、個人偏好和瀏覽器支援情況來決定。Flexbox 和 Grid 是現代 CSS 佈局的首選，因為它們提供了更強大的功能和更靈活的佈局方式。

相關文章