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