Mikit

网格

Mikit网格系统可以快速布局网站。

<div class="mi-row">
    <div class="mi-col mi-col-4">...</div>
    <div class="mi-col mi-col-8">...</div>
</div>

网格间距 Gutters

<div class="mi-row mi-gutters">
    <div class="mi-col mi-col-3">...</div>
    <div class="mi-col mi-col-9">...</div>
</div>

自动宽度Auto

auto

<div class="mi-row mi-auto">
    <div class="mi-col">...</div>
    <div class="mi-col">...</div>
    <div class="mi-col">...</div>
</div>

自动宽度Auto + 间距Gutters

auto

<div class="mi-row mi-gutters mi-auto">
    <div class="mi-col">...</div>
    <div class="mi-col">...</div>	
    <div class="mi-col">...</div>
    <div class="mi-col">...</div>
</div>

网格堆叠Bricks

50%

<div class="mi-row">
    <div class="mi-col mi-col-6">...</div>
    <div class="mi-col mi-col-6">...</div>	
    <div class="mi-col mi-col-6">...</div>
    <div class="mi-col mi-col-6">...</div>
</div>

堆叠Bricks + 间距Gutters

33%

<div class="mi-row mi-gutters">
    <div class="mi-col mi-col-4">...</div>
    <div class="mi-col mi-col-4">...</div>	
    <div class="mi-col mi-col-4">...</div>
    <div class="mi-col mi-col-4">...</div>
</div>

偏移Offset

在Mikit中Offset(偏移网格设置)很简单,只需要在网格类中使用Offset网格类即可,例如在元素类 mi-col mi-col-2 中添加类 mi-offset-4,这样会使被添加offset类的网格偏移4个单元格 (注意：mi-offset-偏移单元格数)

<div class="mi-row">
    <div class="mi-col mi-col-2">...</div>
    <div class="mi-col mi-col-6 mi-offset-4">...</div>	
</div>

嵌套Nested

Mikit 网格可以自由嵌套，示例：外层网格 .mi-row 包含有两列 .mi-col mi-col-6，在第二单元格中嵌套了一个由 .mi-row 包含的3列单元格组成的内层网格。

<div class="mi-row">
    <div class="mi-col mi-col-6">...</div>
    <div class="mi-col mi-col-6">
        <div class="mi-row">
            <div class="mi-col mi-col-4">
            <div class="mi-col mi-col-4">
            <div class="mi-col mi-col-4">
        </div>
    </div>
</div>

等高Equal Height

在Mikit中单元格默认是等高的

1
2
3

<div class="mi-row">
    <div class="mi-col mi-col-6">
        ...
    </div>
    <div class="mi-col mi-col-6">
        ...
        ...
        ...
    </div>
</div>

重置排序Reordering

第一个

<div class="mi-row">
    <div class="mi-col mi-col-4">...</div>
    <div class="mi-col mi-col-8 mi-first-item">...</div>
</div>

最后一个

<div class="mi-row">
    <div class="mi-col mi-col-3 mi-last-item">...</div>
    <div class="mi-col mi-col-9">...</div>
</div>

围绕Around

当您希望单元格被两边的均匀边距围绕时，只需使用.mi-around类即可。

<div class="mi-row mi-around">
    <div class="mi-col mi-col-3">...</div>
    <div class="mi-col mi-col-3">...</div>
    <div class="mi-col mi-col-3">...</div>
</div>

隔离Between

有时你只需要单元格之间的空间，而不是围绕他们，则需要 .mi-between。

<div class="mi-row mi-between">
    <div class="mi-col mi-col-3">...</div>
    <div class="mi-col mi-col-3">...</div>
    <div class="mi-col mi-col-3">...</div>
</div>

对齐Alignment

水平居中 Align Center

<div class="mi-row mi-flex-align-center">
    <div class="mi-col mi-col-6">6</div>
</div>

右对齐 Align Right

<div class="mi-row mi-flex-align-right">
    <div class="mi-col mi-col-3">3</div>
    <div class="mi-col mi-col-3">3</div>
</div>

垂直居中 Align Middle

<div class="mi-row mi-flex-align-middle" style="height: 104px; border: 1px solid #eee;">
    <div class="mi-col mi-col-4" style="height: 36px;">4</div>
    <div class="mi-col mi-col-4" style="height: 56px;">4</div>
    <div class="mi-col mi-col-4" style="height: 36px;">4</div>
</div>

单元格对齐 Push

水平居中 Push Center

.push-center

            
<div class="mi-row">
    <div class="mi-col mi-col-4 mi-push-center">.push-center</div>
</div>

右对齐 Push Right

...

.push-right

            
<div class="mi-row">
    <div class="mi-col mi-col-6">...</div>
    <div class="mi-col mi-col-4 mi-push-right">.push-right</div>
</div>

垂直居中 Push Middle

.push-middle

            
<div class="mi-row">
    <div class="mi-col mi-col-8 mi-push-middle">.push-right</div>
</div>

混合对齐 Push Mixed

.push-middle .push-center

            
<div class="mi-row">
    <div class="mi-col mi-col-8 mi-push-middle mi-push-center">.push-middle .push-center</div>
</div>

底部对齐 Push Bottom

.push-bottom

            
<div class="mi-row">
    <div class="mi-col mi-col-8 mi-push-bottom">.push-bottom</div>
</div>

单元格固定 Fixed Width Column

您可以设置一个固定宽度的单元格列，并且在这个固定宽度列旁边有一个响应灵活的布局。

content

<!-- scss -->
#container {
    @include grid-row;
}
#sidebar {
    @include flex-item-width(300px);
}
#content {
    @include flex-item-auto;
}

<!-- html -->
<div id="container">
    <div id="sidebar">Sidebar</div>
    <div id="content">Content</div>
</div>

Media Grid

媒体网格是Mikit的灵活性和通用性的一个很好的例子。当你有一些媒体展示，你可以选择使用媒体网格。这种类型的网格非常适合图片展示。

<!-- scss -->
#media-grid {

    @include grid-media-columns(2);

    & > div {
        margin-bottom: 20px;
        height: 80px;
    }
    & > div:nth-child(2n) {
      height: 200px;
    }
    & > div:nth-child(5n) {
      height: 120px;
    }
}

<!-- html -->
<div id="media-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>