布局

栅格

使用 .grid 开启自动布局列，创建极简的响应式布局。

添加列移除列

1

2

3

4

查看源码

<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

在小型设备（<768px）上，各列会有意折叠为纵向排列。

.grid 在无类版本中不可用。

关于 CSS Grid

Pico 专注于原生 HTML 元素，因此我们保持这套栅格系统的极简。

一套完整的 flexbox 栅格系统——包含全部的排序、偏移和断点工具类——体积可能比整个 Pico 库还大，这并不符合 Pico 的精神。

如果你需要快速搭建原型或构建复杂布局，可以看看 Flexbox 栅格布局，例如 Bootstrap Grid System 或 Flexbox Grid。

如果你需要一个轻量且可定制的栅格，可以看看 CSS Grid 生成器，例如 CSS Grid Generator、Layoutit! 或 Griddy。

或者，你也可以了解 CSS Grid。