栅格

优质

小牛编辑

126浏览

2023-12-01

Framework7 有灵活的布局网格,允许你按需求放置内容：

<!-- Each "cells" row should be wrapped with div class="row" -->
<div class="row">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>   
<div class="row">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

默认所有的“单元格”之间有15px的间距，如果你希望“单元格”之间没有间距，你应该在"row"后添加 "no-gutter" 类 :

<!-- Additional "no-gutter" class on row to remove space between cells -->
<div class="row no-gutter">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>   
<div class="row">
    <!-- Each "cell" has col-[widht in percents] class -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

以下尺寸是可供选择的：

Class	Tablet Class When window width >= 768px	Width
col-5	tablet-5	5%
col-10	tablet-10	10%
col-15	tablet-15	15%
col-20	tablet-20	20%
col-25	tablet-25	25%
col-33	tablet-33	33.333333333333336%
col-40	tablet-40	40%
col-50	tablet-50	50%
col-60	tablet-60	60%
col-66	tablet-66	66.66666666666666%
col-75	tablet-75	75%
col-80	tablet-80	80%
col-85	tablet-85	85%
col-90	tablet-90	90%
col-95	tablet-95	95%
col-100	tablet-100	100%
col-auto	tablet-auto	Equal width

用法示例

默认情况下表格列(单元)没有任何视觉样式,我们将他们添加到这个demo里：

div[class*="col-"] {
  background: #fff;
  text-align: center;
  color: #000;
  border: 1px solid #ddd;
  padding: 5px;
}
.row {
  margin-bottom: 15px;
}

<body>
  ...
  <div class="page-content">
    <div class="content-block-title">Columns with gutter</div>
    <div class="content-block">
      <div class="row">
        <div class="col-50">50%</div>
        <div class="col-50">50%</div>
      </div>
      <div class="row">
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
      </div>
      <div class="row">
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
      </div>
      <div class="row">
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
      </div>
      <div class="row">
        <div class="col-33">33%</div>
        <div class="col-66">66%</div>
      </div>
      <div class="row">
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
        <div class="col-50">50%</div>
      </div>
      <div class="row">
        <div class="col-75">75%</div>
        <div class="col-25">25%</div>
      </div>
      <div class="row">
        <div class="col-80">80%</div>
        <div class="col-20">20%</div>
      </div>
    </div>
    <div class="content-block-title">No gutter between columns</div>
    <div class="content-block">
      <div class="row no-gutter">
        <div class="col-50">50%</div>
        <div class="col-50">50%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
        <div class="col-33">33%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
        <div class="col-20">20%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-33">33%</div>
        <div class="col-66">66%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-25">25%</div>
        <div class="col-25">25%</div>
        <div class="col-50">50%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-75">75%</div>
        <div class="col-25">25%</div>
      </div>
      <div class="row no-gutter">
        <div class="col-80">80%</div>
        <div class="col-20">20%</div>
      </div>
    </div>
 
    <div class="content-block-title">Nested</div>
    <div class="content-block">
      <div class="row">
        <div class="col-50">50%
<div class="row">
  <div class="col-50">50%</div>
  <div class="col-50">50%</div>
</div>
        </div>
        <div class="col-50">50%
<div class="row">
  <div class="col-33">33%</div>
  <div class="col-66">66%</div>
</div>
        </div>
      </div>
    </div>
  </div>
 
  <div class="content-block-title">Responsive Grid</div>
  <div class="content-block">
    <p>Grid cells have different size on Phone/Tablet</p>
    <div class="row">
      <div class="col-100 tablet-50">.col-100.tablet-50</div>
      <div class="col-100 tablet-50">.col-100.tablet-50</div>
    </div>
    <div class="row">
      <div class="col-50 tablet-25">.col-50.tablet-25</div>
      <div class="col-50 tablet-25">.col-50.tablet-25</div>
      <div class="col-50 tablet-25">.col-50.tablet-25</div>
      <div class="col-50 tablet-25">.col-50.tablet-25</div>
    </div>
    <div class="row">
      <div class="col-100 tablet-40">.col-100.tablet-40</div>
      <div class="col-50 tablet-60">.col-50.tablet-60</div>
      <div class="col-50 tablet-66">.col-50.tablet-66</div>
      <div class="col-100 tablet-33">.col-100.tablet-33</div>
    </div>
  </div>          
 
  <div class="content-block-title">COLUMNS WITH EQUAL WIDTH</div>
  <div class="content-block">
    <div class="row">
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
    </div>
    <div class="row">
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
    </div>
    <div class="row">
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
    </div>
    <div class="row no-gutter">
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
      <div class="col-auto">.col-auto</div>
    </div>
  </div>          
  ...
</body>