yigeziCSS 布局库-技术圈

yigeziCSS 布局库

联合创作 · 2023-09-23 22:59

yigezi (易格子) 是一个纯粹的 CSS 布局库，用于水平方向的 1 - 12 任意等份布局。

文档

yigezi 官方文档

仓库

github 仓库地址 https://github.com/chenbimo/yigezi

gitee 仓库地址 https://gitee.com/chenbimo/yigezi

演示

演示 demo

写法

<!-- 任意等份栅格布局库（易格子） -->
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-3</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-3</div>
</div>
<div class="col sm-1-1 mb-1-1 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-3</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-5</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-5</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-5</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-7</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-7</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">4-9</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-9</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">1-9</div>
</div>
<div class="col sm-1-1 mb-1-2 pad-1-4 pc-1-5 lg-1-6">
    <div class="col-wrapper">2-10</div>
</div>

编辑分享