简介
gss-engine 是一个基于 GSS（Grid Style Sheets）的前端布局引擎，可以快速实现复杂的网页布局。它使用 JavaScript 实现，可以通过 npm 安装并在项目中使用。
安装
在命令行中运行以下命令进行安装：
npm install gss-engine
使用
引入
你可以通过 import 或 require 的方式在项目中引入 gss-engine：
import GSS from 'gss-engine';
// or
const GSS = require('gss-engine');基本用法
使用 GSS 进行布局的基本思想是：将要布局的元素定义为网格单元格，并使用 GSS 语法来指定它们的位置和大小。例如，下面的 HTML 代码定义了一个 2 行 3 列的网格：
<div class="grid"> <div class="cell" data-gss="1 / 1 / 3 / 2"></div> <div class="cell" data-gss="1 / 2 / 2 / 3"></div> <div class="cell" data-gss="2 / 2 / 3 / 3"></div> </div>
这里的 .cell 类表示网格单元格，data-gss 属性用来指定它们的位置和大小。例如，1 / 1 / 3 / 2 表示该单元格位于第 1 行、第 1 列，跨度为 2 行 1 列。
接下来，使用 GSS 引擎对这些网格单元格进行布局：
const grid = document.querySelector('.grid');
GSS.layout(grid);在上面的示例中，我们使用 querySelector 方法获取了一个 .grid 类的元素，并将它作为参数传递给 GSS.layout 方法来进行布局。
高级用法
除了基本的网格布局外，GSS 还支持更复杂的布局方式，例如分隔符布局、表格布局、相对定位和绝对定位等。以下是一些示例：
分隔符布局
<div class="split"> <div class="cell">Left</div> <div class="splitter"></div> <div class="cell">Right</div> </div>
-- -------------------- ---- ------- ------ - ------- ------ - ----- - ----------------- ----- - --------- - ----------------- ----- -
const split = document.querySelector('.split');
GSS.layout(split, {
layoutType: 'split'
});表格布局
-- -------------------- ---- -------
------ -------------
----
--- ----------- - - - - - ---------
--- ----------- - - - - - ---------
--- ----------- - - - - - ---------
-----
----
--- ----------- - - - - - ---------
--- ----------- - - - - - ---------
--- ----------- - - - - - ---------
-----
--------const grid = document.querySelector('.grid');
GSS.layout(grid, {
layoutType: 'table'
});相对定位
<div class="relative"> <div class="cell" data-gss="1 / 1 / 2 / 2"></div> <div class="cell" data-gss="2 / 2 / 3 / 3"></div> <div class="text" data-gss="2 / 2 / 3 / 3">Hello, world!</div> </div>
-- -------------------- ---- ------- --------- - --------- --------- - ----- - --------- --------- ---- ---- ----- ---- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------