yigezi (易格子)

一个纯粹的 CSS 布局库

文档

请展开菜单 开源项目/yigezi

仓库

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

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

演示

演示 demo

特点

1 - 12 任意等份布局

写法

<!-- 任意等份栅格布局库（易格子） -->
<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>

社区交流

项目相关讨论交流，请添加作者微信 c91374286 入群。