c

CSS网格的力量-在一个完全可视化的画布

在Webflow中可视化地构建智能、响应迅速的CSS网格布局。

暂停背景视频

定义你的网格可视化

通过直观地定义行、列和间隙,创建项目所需的任何结构。

  • 单击可添加行和列
  • 拖动可调整单元格和间隙的大小
  • 定义网格模板区域以重用布局

构建你的布局就在画布上

通过在画布上的行和列之间拖动元素,使您的设计更具生命力。

  • 拖动元素以跨越行和列
  • 使用自动流将元素移动到下一个可用的单元格
  • 用手工将元素固定在特定的位置

回流每个设备的布局

翻译你的设计为所有设备在几次点击。网格设计自然地流动并根据需要调整大小,因此您的设计几乎不需要跨断点进行任何CSS更改。

  • 自动生成行和列来保存内容
  • 构建一个跨所有断点工作的布局
  • 根据需要进行调整,以便进行简单的断点定制

发布在点击或导出代码

将您的设计通过点击在浏览器中进行测试,或者导出代码以用于您正在进行的任何项目。

学习网格
30分钟

视频课程

前往Webflow University了解如何在Webflow中构建网格驱动布局。

在Webflow中构建网格布局

例子

获取一个可克隆的模板,查看流行和常见的网格驱动布局。

Baidu
map