グリッド/レイアウトグリッド

Framework7には、柔軟なレイアウトグリッドが用意されており、必要に応じてコンテンツを配置することができます。

グリッドレイアウト

<!-- 各「セル」の行は、div class="row "でラップします。 -->
<div class="row">
    <!-- 各セルには、col-[width in percents]クラスがあります。 -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>
<div class="row">
    <!-- 各セルは、col-[width in percents]クラスを持ちます。 -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

デフォルトでは、すべての "セル "は、iOSテーマでは15px、MDテーマでは16pxのギャップがあります。隙間のないセルにしたい場合は、"row "に "no-gap "クラスを追加する必要があります。

<!-- セル間の隙間をなくすために、行に "no-gap "クラスを追加する -->
<div class="row no-gap">
    <!-- 各セルは、col-[width in percents]クラスを持ちます。 -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>
<div class="row">
    <!-- 各 "セル "には、col-[width in percents]クラスがあります。 -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

列のサイズ

以下のカラムサイズが用意されています。

Class	xsmall width >= 480px	small width >= 568px	medium width >= 768px	large width >= 1024px	xlarge width >= 1200px	Width
col-5	xsmall-5	small-5	medium-5	large-5	xlarge-5	5%
col-10	xsmall-10	small-10	medium-10	large-10	xlarge-10	10%
col-15	xsmall-15	small-15	medium-15	large-15	xlarge-15	15%
col-20	xsmall-20	small-20	medium-20	large-20	xlarge-20	20%
col-25	xsmall-25	small-25	medium-25	large-25	xlarge-25	25%
col-30	xsmall-30	small-30	medium-30	large-30	xlarge-30	30%
col-33	xsmall-33	small-33	medium-33	large-33	xlarge-33	33.333333333333336%
col-35	xsmall-35	small-35	medium-35	large-35	xlarge-35	35%
col-40	xsmall-40	small-40	medium-40	large-40	xlarge-40	40%
col-45	xsmall-45	small-45	medium-45	large-45	xlarge-45	45%
col-50	xsmall-50	small-50	medium-50	large-50	xlarge-50	50%
col-55	xsmall-55	small-55	medium-55	large-55	xlarge-55	55%
col-60	xsmall-60	small-60	medium-60	large-60	xlarge-60	60%
col-65	xsmall-65	small-65	medium-65	large-65	xlarge-65	65%
col-66	xsmall-66	small-66	medium-66	large-66	xlarge-66	66.66666666666666%
col-70	xsmall-70	small-70	medium-70	large-70	xlarge-70	70%
col-75	xsmall-75	small-75	medium-75	large-75	xlarge-75	75%
col-80	xsmall-80	small-80	medium-80	large-80	xlarge-80	80%
col-85	xsmall-85	small-85	medium-85	large-85	xlarge-85	85%
col-90	xsmall-90	small-90	medium-90	large-90	xlarge-90	90%
col-95	xsmall-95	small-95	medium-95	large-95	xlarge-95	95%
col-100	xsmall-100	small-100	medium-100	large-100	xlarge-100	100%
col	xsmall-auto	small-auto	medium-auto	large-auto	xlarge-auto	Equal width

サイズ変更可能なグリッド

レイアウトグリッドのサイズを変更することも可能です。ここでは、そのHTMLレイアウトを見てみましょう。

<div class="row">
  <div class="col resizable">
    ...
    <span class="resize-handler"></span>
  </div>
  <div class="col resizable">
    ...
    <span class="resize-handler"></span>
  </div>
  ...
</div>

ここでは

resizable` - カラムのサイズを変更できるようにするための追加クラスです。
` - カラムのサイズを変更するために使用される、カラム間のリサイズハンドラです。

また、リサイズをコントロールするための追加のクラスもあります。

resizable-fixed - このクラスを持つカラムは、固定サイズになります (リサイズできません)。
resizable-absolute - 絶対的な（px単位の）リサイズを有効にします。これが有効でない場合は、相対的な形でリサイズされます (幅を % で設定)。絶対リサイズでは、各カラムにpx単位の絶対的なサイズが設定されますが、レスポンシブ性が損なわれる可能性があります。

同じように、グリッドの行もリサイズ可能にすることができます。

<div>
  <!-- 行に "resizable "クラスを追加 -->
  <div class="row resizable">
    <div class="col">...</div>
    <div class="col">...</div>
    <!-- resize-handler "を行の最後の子として置く。 -->
    <span class="resize-handler"></span>
  </div>

  <!-- 行に "resizable "クラスを追加 -->
  <div class="row resizable">
    <div class="col">...</div>
    <div class="col">...</div>
    <!-- resize-handler "を行の最後の子として置く。 -->
    <span class="resize-handler"></span>
  </div>

  ...
</div>

サイズ変更可能な行は、追加の resizable-fixed および resizable-absolute 修飾子をサポートします。

列の最小/最大サイズ(幅)を制限するには、min-widthとmax-widthのCSSプロパティを指定しなければなりません。
行のサイズ（高さ）を最小／最大にするには、min-height と max-height の CSS プロパティを指定する必要があります。
デフォルトでは、行は（列と同様に）「相対的な方法」でリサイズされますが、正しく動作させるためには、高さが固定された親を持つようにしてください。

グリッドのイベント

グリッドでは、列や行のアイテムに対して以下のDOMイベントが、アプリのインスタンスに対してアプリイベントが発生します。

DOM イベント

Event	Target	Description
grid:resize	Grid column or row element<div class="col"><div class="row">	Event will be triggered on resizable grid column (or row) resize

アプリイベント

Event	Arguments	Description
gridResize	(el)	Event will be triggered on resizable grid column (or row) resize

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-grid-gap: 16px;
  --f7-grid-row-gap: 0px;
  --f7-grid-resize-handler-bg-color: rgba(0, 0, 0, 0.35);
}
:root .theme-dark,
:root.theme-dark {
  --f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Grid</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Columns with gap</div>
      <div class="block">
        <div class="row">
          <div class="col">50% (.col)</div>
          <div class="col">50% (.col)</div>
        </div>
        <div class="row">
          <div class="col">25% (.col)</div>
          <div class="col">25% (.col)</div>
          <div class="col">25% (.col)</div>
          <div class="col">25% (.col)</div>
        </div>
        <div class="row">
          <div class="col">33% (.col)</div>
          <div class="col">33% (.col)</div>
          <div class="col">33% (.col)</div>
        </div>
        <div class="row">
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
        </div>
        <div class="row">
          <div class="col-33">33% (.col-33)</div>
          <div class="col-66">66% (.col-66)</div>
        </div>
        <div class="row">
          <div class="col-25">25% (.col-25)</div>
          <div class="col-25">25% (.col-25)</div>
          <div class="col-50">50% (.col-50)</div>
        </div>
        <div class="row">
          <div class="col-75">75% (.col-75)</div>
          <div class="col-25">25% (.col-25)</div>
        </div>
        <div class="row">
          <div class="col-80">80% (.col-80)</div>
          <div class="col-20">20% (.col-20)</div>
        </div>
      </div>
      <div class="block-title">No gap between columns</div>
      <div class="block">
        <div class="row no-gap">
          <div class="col">50% (.col)</div>
          <div class="col">50% (.col)</div>
        </div>
        <div class="row no-gap">
          <div class="col">25% (.col)</div>
          <div class="col">25% (.col)</div>
          <div class="col">25% (.col)</div>
          <div class="col">25% (.col)</div>
        </div>
        <div class="row no-gap">
          <div class="col">33% (.col)</div>
          <div class="col">33% (.col)</div>
          <div class="col">33% (.col)</div>
        </div>
        <div class="row no-gap">
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
          <div class="col">20% (.col)</div>
        </div>
        <div class="row no-gap">
          <div class="col-33">33% (.col-33)</div>
          <div class="col-66">66% (.col-66)</div>
        </div>
        <div class="row no-gap">
          <div class="col-25">25% (.col-25)</div>
          <div class="col-25">25% (.col-25)</div>
          <div class="col-50">50% (.col-50)</div>
        </div>
        <div class="row no-gap">
          <div class="col-75">75% (.col-75)</div>
          <div class="col-25">25% (.col-25)</div>
        </div>
        <div class="row no-gap">
          <div class="col-80">80% (.col-80)</div>
          <div class="col-20">20% (.col-20)</div>
        </div>
      </div>
      <div class="block-title">Nested</div>
      <div class="block">
        <div class="row">
          <div class="col">50% (.col)
            <div class="row">
              <div class="col">50% (.col)</div>
              <div class="col">50% (.col)</div>
            </div>
          </div>
          <div class="col">50% (.col)
            <div class="row">
              <div class="col-33">33% (.col-33)</div>
              <div class="col-66">66% (.col-66)</div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Responsive Grid</div>
      <div class="block">
        <p>Grid cells have different size on Phone/Tablet</p>
        <div class="row">
          <div class="col-100 medium-50">.col-100.medium-50</div>
          <div class="col-100 medium-50">.col-100.medium-50</div>
        </div>
        <div class="row">
          <div class="col-50 medium-25">.col-50.medium-25</div>
          <div class="col-50 medium-25">.col-50.medium-25</div>
          <div class="col-50 medium-25">.col-50.medium-25</div>
          <div class="col-50 medium-25">.col-50.medium-25</div>
        </div>
        <div class="row">
          <div class="col-100 medium-40">.col-100.medium-40</div>
          <div class="col-50 medium-60">.col-50.medium-60</div>
          <div class="col-50 medium-66">.col-50.medium-66</div>
          <div class="col-100 medium-33">.col-100.medium-33</div>
        </div>
      </div>
      <div class="block-title">Resizable Cols</div>
      <div class="block grid-resizable-demo">
        <div class="row">
          <div class="col resizable" style="min-width: 20px">
            <span>1</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable" style="min-width: 20px">
            <span>2</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable" style="min-width: 20px">
            <span>3</span>
            <span class="resize-handler"></span>
          </div>
        </div>
      </div>
      <div class="block-title">Resizable Fixed Col</div>
      <div class="block-header">2nd column has fixed size</div>
      <div class="block grid-resizable-demo">
        <div class="row">
          <div class="col resizable" style="min-width: 20px">
            <span>1</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable resizable-fixed" style="min-width: 20px">
            <span>2</span>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable" style="min-width: 20px">
            <span>3</span>
            <span class="resize-handler"></span>
          </div>
        </div>
      </div>
      <div class="block-title">Resizable Grid</div>
      <div class="block grid-resizable-demo">
        <div class="row align-items-stretch" style="height: 300px">
          <div class="col resizable demo-col-center-content" style="min-width: 50px">Left<span
              class="resize-handler"></span>
          </div>
          <div class="col resizable display-flex flex-direction-column"
            style="padding: 0px; border: none; min-width: 50px; background-color: transparent">
            <div class="row resizable" style="height: 50%; min-height: 50px">
              <div class="col demo-col-center-content" style="height: 100%">Center Top</div>
              <span class="resize-handler"></span>
            </div>
            <div class="row resizable" style="height: 50%; min-height: 50px">
              <div class="col demo-col-center-content" style="height: 100%">Center Bottom</div>
              <span class="resize-handler"></span>
            </div>
            <span class="resize-handler"></span>
          </div>
          <div class="col resizable demo-col-center-content" style="min-width: 50px">Right<span
              class="resize-handler"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  div[class*="col"] {
    background: #fff;
    text-align: center;
    color: #000;
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 12px;
    margin-bottom: 16px;
  }

  .grid-resizable-demo {
    --f7-grid-row-gap: 16px;
  }

  .grid-resizable-demo div[class*="col"] {
    margin-bottom: 0;
  }

  .grid-resizable-demo .demo-col-center-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>