栅格布局

# gridlex, 支持grid栅格, 推荐
https://github.com/devlint/gridlex
# 尺寸
@media (max-width: 36em)  Max 576px   _xs-*
@media (max-width: 48em)  Max 768px   _sm-*
@media (max-width: 64em)  Max 1024px  _md-*
@media (max-width: 80em)  Max 1280px  _lg-*

# flexboxgrid 只支持Bootstrap的栅格, 比较简陋
# https://github.com/kristoferjoseph/flexboxgrid

调试工具,同时显示多个设备尺寸

https://github.com/kibalabs/everysize-app
# 如果是gridlex使用, 设置local storage的boxes_v2
default-1$1279$1080$0$0$2.5$,default-2$1024$1080$18$0$2.5$,default-3$768$1080$33$0$2.5$,default-4$576$1080$1$18$2.5$,a0f25b59-9307-4784-5501-23182c5fa06e$1920$1080$11$18$2$dp-1080

gridlex 使用基础

<style>
  .demo {
    background-color: antiquewhite;
  }
</style>

<!-- grid=行栅格,最多12分完 -->
<div class="grid">
  <div class="col-2_lg-2_md-2_sm-3_xs-3">第一行左</div>
  <div class="col-10_lg-10_md-10_sm-9_xs-9">
    <!-- grid-=均分栅格,最多均分12 -->
    <div class="grid-4_lg-4_md-3_sm-2_xs-1">
      <!-- col=实体数据 -->
      <div class="col">
        <div class="demo"><p>第一行右grid-4_lg-4_md-3_sm-2_xs-1</p></div>
      </div>
    </div>
  </div>
</div>

gridlex