前言
ontime-layout 是一个基于 CSS Grid 的现代化轻量级响应式布局库。使用 ontime-layout 可以快速实现复杂的网页布局，同时支持移动端和 PC 端的响应式布局。
安装
通过 npm 可以方便地安装 ontime-layout：
npm install ontime-layout --save
使用方法
使用 ontime-layout 非常简单，只需在 HTML 中引入 ontime-layout 的 CSS 文件即可。
<link rel="stylesheet" href="node_modules/ontime-layout/dist/ontime-layout.min.css">
然后就可以在 HTML 中使用 ontime-layout 的 class 了。
基本概念
ontime-layout 的基本概念包括 网格容器、网格项 和 网格线。
网格容器
网格容器是包含所有网格项的容器。使用 ontime-layout 的 class ol-container 可以表示一个网格容器。
<div class="ol-container"> ... </div>
网格项
网格项是网格容器中的一个子元素。使用 ontime-layout 的 class 可以指定网格项的位置和大小。
<div class="ol-container">
<div class="ol-grid-1-2">
...
</div>
<div class="ol-grid-1-2">
...
</div>
</div>上面的代码片段中，有两个网格项，它们各占网格容器的一半。
网格线
网格线是网格容器中的虚拟线条。网格容器由水平和垂直网格线组成。网格项根据这些网格线进行布局。
布局方式
ontime-layout 支持多种布局方式，包括等分布局、自动布局、固定比例布局和自由布局。
等分布局
等分布局是指将网格容器分成若干等份，每个网格项占一份。使用 ontime-layout 的 class ol-grid-equal 可以实现等分布局。
-- -------------------- ---- -------
---- ---------------------
---- ----------------------
---
------
---- ----------------------
---
------
---- ----------------------
---
------
------自动布局
自动布局是指将网格项自动布局到网格容器中。使用 ontime-layout 的 class ol-grid-auto 可以实现自动布局。
-- -------------------- ---- -------
---- ---------------------
---- ---------------------
---
------
---- ---------------------
---
------
---- ---------------------
---
------
------固定比例布局
固定比例布局是指将网格容器按照指定比例分割成若干份，并通过对应的 class 指定每个网格项的比例。使用 ontime-layout 的类似 ol-grid-{A}-{B} 可以实现固定比例布局，其中 A 和 B 分别代表网格项的占比。
-- -------------------- ---- -------
---- ---------------------
---- --------------------
---
------
---- --------------------
---
------
---- --------------------
---
------
------自由布局
自由布局是指可以自定义网格容器中每个网格项的位置和大小。使用 ontime-layout 的 class ol-grid-line 可以实现自由布局。
-- -------------------- ---- -------
---- ---------------------
---- -------------------- ------------------- - - -- --------- - - ----
---
------
---- -------------------- ------------------- - - -- --------- - - ----
---
------
---- -------------------- ------------------- - - -- --------- - - ----
---
------
---- -------------------- ------------------- - - -- --------- - - ----
---
------
------上面的代码片段中，每个网格项都通过 style 属性指定了它们的位置和大小。
示例代码
下面是一个简单的示例代码，演示如何使用 ontime-layout 实现一个响应式页面布局。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
-------------------- ----------
----- ---------------- -------------------------------------------------------------
-------
------
---- ---------------------
---- ------------------ ----------------
---- -------------------- ------------------- - - -- --------- - - ----
---- ------------------------------------------------------ ---------- ---
------
---- -------------------- ------------------- - - -- --------- - - ----
---- ------------------------------------------------------ ---------- ---
------
---- -------------------- ------------------- - - -- --------- - - ----
---- ------------------------------------------------------ ---------- ---
------
------
---- ------------------ --------------
---- -------------------- ------------------- - - -- --------- - - ----
--------------
------- ---------
------
---- -------------------- ------------------- - - -- --------- - - ----
---- ------------------------------------------------------ ---------- ---
------
---- -------------------- ------------------- - - -- --------- - - ----
---- ------------------------------------------------------ ---------- ---
------
---- -------------------- ------------------- - - -- --------- - - ----
---- ------------------------------------------------------ ---------- ---
------
------
------
-------
-------结束语
ontime-layout 是一个非常优秀的 CSS Grid 布局库，使用它可以在短时间内实现复杂的响应式页面布局。它可以大大提高前端开发效率，同时带来更加美观的网页布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a40