布局

地标与区块

用语义化地标与区块组织页面结构，带来更好的可访问性与优雅的间距。

作为 <body> 的直接子元素，<header>、<main> 和 <footer> 会提供响应式的垂直 padding。

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

根容器

如果需要自定义 <header>、<main> 和 <footer> 所在的默认根容器，可以换一个 CSS 选择器重新编译 Pico。

这对 React、Gatsby 或 Next.js 很实用。

/* Custom Class-less version for React */
@use "pico" with (
  
  // Define the root element used to target <header>, <main>, <footer>
  // with $enable-semantic-container and $enable-responsive-spacings
  $semantic-root-element: "#root",
  
  // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
  $enable-semantic-container: true,

  // Enable .classes
  $enable-classes: false
)

上述代码编译后，容器的定义方式如下：

/* Containers */
#root > header,
#root > main,
#root > footer {
  ...
}

进一步了解如何使用 Sass 编译 Pico 定制版本。

区块

<section> 提供响应式的 margin-bottom，用于分隔各个区块。