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>

 

浏览 4
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑
举报