块布局Box

首先创建容器<div class="box">，内部的块元素支持10%-100%区间的大小配置，每5%为一个间隔，10%、15%、20%依此类推至100%（不含95%），其中支持特殊宽度.grid33、.grid66

<div class="box">
    <div class="grid50">.grid50</div>
    <div class="grid50">.grid50</div>
    <div class="grid33">.grid33</div>
    <div class="grid66">.grid66</div>
    <div class="grid20">.grid20</div>
    <div class="grid80">.grid80</div>
    <div class="grid100">.grid100</div>
</div>

没有设定大小值的块元素会自动均分主体空间

<div class="box">
    <div class="grid">.grid</div>
    <div class="grid">.grid</div>
</div>
<div class="box">
    <div class="grid">.grid</div>
    <div class="grid">.grid</div>
    <div class="grid40">.grid40</div>
    <div class="grid">.grid</div>
    <div class="grid">.grid</div>
</div>

响应式布局Responsive Layout

通过预定义的class="grid-m"、class="grid-s"来对中、小屏幕作布局调整例：添加class="grid50 grid-s100"，即块元素默认为50%宽度，视窗像素小于750px则转换为100%宽度

<div class="box">
    <div class="grid50 grid-s100">.grid50 .grid-s100</div>
    <div class="grid50 grid-s100">.grid50 .grid-s100</div>
</div>

class="grid-m"、class="grid-s"可以同时叠加，在不同视窗大小时按权重执行设定值

<div class="box">
    <div class="grid50 grid-m75 grid-s100">grid</div>
    <div class="grid50 grid-m75 grid-s100">grid</div>
</div>

水平对齐Horizontal Alignment

为容器添加class="x-start"、class="x-center"、class="x-end"定义块元素的水平对齐方式

<div class="box x-start">
    <div class="grid20">.grid20</div>
    <div class="grid20">.grid20</div>
</div>
<div class="box x-center">
    <div class="grid20">.grid20</div>
    <div class="grid20">.grid20</div>
</div>
<div class="box x-end">
    <div class="grid20">.grid20</div>
    <div class="grid20">.grid20</div>
</div>

为容器添加class="x-between"使块元素两端对齐，块元素之间的间隔都相等

<div class="box x-between">
    <div class="grid20">.grid20</div>
    <div class="grid20">.grid20</div>
    <div class="grid20">.grid20</div>
</div>

为容器添加class="x-around使块元素两侧的间隔都相等

<div class="box x-around">
    <div class="grid20">.grid20</div>
    <div class="grid20">.grid20</div>
    <div class="grid20">.grid20</div>
</div>

垂直对齐Horizontal Alignment

为容器添加class="y-start"、class="y-center"、class="y-end"定义块元素的垂直对齐方式

<div class="box y-start">
    <div class="grid">.grid</div>
    <div class="grid">.grid</div>
</div>
<div class="box y-center">
    <div class="grid">.grid</div>
    <div class="grid">.grid</div>
</div>
<div class="box y-end">
    <div class="grid">.grid</div>
    <div class="grid">.grid</div>
</div>

反序列Reverse

为容器添加class="reverse"使块元素反序列

<div class="box reverse">
    <div class="grid">.grid 1</div>
    <div class="grid">.grid 2</div>
    <div class="grid">.grid 3</div>
</div>

序列Order

添加class="order1~12"定义块元素的序列

<div class="box">
    <div class="grid order3">.grid .order3</div>
    <div class="grid order1">.grid .order1</div>
    <div class="grid order2">.grid .order2</div>
</div>

<div class="box">
    <div class="grid order12">.grid .order12</div>
    <div class="grid">.grid</div>
    <div class="grid order1">.grid .order1</div>
</div>

嵌套Nesting

可以不断向块元素内嵌套更深层容器

<div class="box">
    <div class="grid35">
        <div class="box">
            <div class="grid50">.grid50</div>
            <div class="grid50">.grid50</div>
        </div>
    </div>
    <div class="grid65">
        <div class="box">
            <div class="grid50">.grid50</div>
            <div class="grid50">.grid50</div>
        </div>
    </div>
</div>

间距Padding

添加class="plr"使块元素填充左右内间距padding-left:0.75rem;padding-right:0.75rem

<div class="box">
    <div class="grid33 plr">.grid33 .plr</div>
</div>