clickpress/contao-clickpress-grid

基于 CSS Grid 的 Contao 网格系统

维护者

详细信息

github.com/clickpress/contao-clickpress-grid

源代码

问题

安装量: 4,222

依赖项: 0

建议者: 0

安全性: 0

星标: 13

关注者: 5

分支: 4

开放性问题: 1

类型:contao-bundle

v1.5.3 2024-08-09 07:33 UTC

Requires

Requires (Dev)

Conflicts

LGPL-3.0-or-later d67b98fffb832b311556dc7eaad87dca8a8ce51a

This package is auto-updated.

Last update: 2024-09-09 07:54:51 UTC

README

Version GitHub license

Contao 网格 CSS

向页面内容添加列。

Contao Clickpress Grid 使用 CSS Grid，因此所需的 HTML 较少。

安装

composer require clickpress/contao-clickpress-grid

或使用 Contao 管理器。

使用方法

  1. 在 Contao 页面布局中启用预构建的 CSS Grid 或生成自己的 CSS。
  2. 从类型 "Gridset start" 添加新的内容元素 - "Gridset end" 将自动生成
  3. 在 "Gridset start" 内容元素中编辑您的列配置
  4. 在 "Gridset start" 和 "Gridset end" 之间放置一些元素。

如果您需要在列中放置两个内容元素，请将它们包裹在 "Column start" 和 "Column end" 元素之间。

自定义 CSS

如果您想自定义网格 CSS，请按照以下步骤操作

  1. 在页面布局设置中禁用 "加载 Clickpress Grid CSS"。
  2. 复制并编辑网格 CSS (https://github.com/clickpress/contao-clickpress-grid/blob/main/src/Resources/public/clickpress-grid.scss)
  3. 将您的新网格 CSS 作为 "外部 CSS" 添加到页面布局中

内部

这是在桌面上的 40% 30% 30% 设置的结果。因此，将显示三列。第四列将自动放置在新的一行中。

<div class="grid_desktop_40_30_30 ...">
   <div class="ce_text">...</div>
   <div class="ce_text">...</div>
   <div class="ce_image">...</div>
   <div class="ce_text">...</div>
   <div class="ce_text">...</div>
</div>

鸣谢

非常感谢 rocksolid_columns 为本模块的一些部分提供支持。