點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Container Fluid Layout

Sam Xiao's Avatar 2024-02-04

Pico CSS 只提供三種 Layout：container、container-fluid 與 grid，container-fluid 與 container 為非常類似。

Version

Pico CSS 1.5.11

Container Fluid

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing);
  padding-left: var(--spacing);
}
  • width 只有 100%，沒有其他 RWD 的 max-width 影響
  • 也因為 width 始終是 100%，其實 margin 在 container-fluid layout 下並沒有作用
  • RWD 下仍保有一些 padding

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/pico.min.css" />
    {{ $title := "Hugo X Pico CSS Lab" }}
    <title>{{ $title }}</title>
  </head>
  <body>
    <main class="container-fluid">
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </main>
  </body>
</html>

Line 11

<main class="container-fluid">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</main>
  • 在 <main> 加上 container-fluid layout

container001

  • 沒有左右 margin，只剩下左右 padding 而已

container002

  • 在極小 device 也只剩下左右 padding

Conclusion

  • 一般使用上，會在 <header> 、<main> 與 <footer> 這種大區塊上使用 container-fluid layout，目的是為了使這種大區塊先佔滿所有 width
  • 如 Blog 的單篇文章或 Login 的 Submit Form，其實使用 container 或 container-fluid layout 皆可，若想要左右 margin 大些就用 container，小些就用 container-fluid

# Pico CSS