ファウンデーショングリッドインスタンス


以下に、一般的に使用されるグリッドの例をいくつか集めました。

3 つの等しい列

この例では、3 つの等しい列を作成する方法を示します。 (33.3%/33.3%/33.3%)、中型および大型のデバイスでは 3 つの列が表示され、小型のデバイスでは自動的に積み重ねられます:

インスタンス

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - 三个均等列</h2>
  <p>该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ，在中型和大型设备上显示三个列，在小型设备上自动堆叠。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:pink;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
</div>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックします。オンライン例

3 つの等しくない列

この例では、3 つの等しくない列 (25%/50%/25%) を作成して、中型および大型のデバイスと小型のデバイスに 3 つの列を表示する方法を示します。 自動的に積み重ねられます:

インスタンス

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - 三个不均等列</h2>
  <p>该实例演示了如何创建三个不均等列 (25%/50%/25%)，在中型和大型设备上显示三个列，在小型设备上自动堆叠。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>.medium-6</p>
  </div>
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
</div>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

2つの等しい列

この例では、2つの等しい列(50%/50%)を作成する方法を示します。 )、小、中、大のデバイスでは常に 50%/50% がリストされます:

インスタンス

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - 两个均等列</h2>
  <p>该实例演示了如何创建两个均等列 (50%/50%)，在小型、中型和大型设备上列的比例始终为 50%/50%。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="small-6 columns" style="background-color:yellow;">
    <p>.small-6</p>
  </div>
  <div class="small-6 columns" style="background-color:pink;">
    <p>.small-6</p>
  </div>
</div>

</body>
</html>

インスタンスの実行»

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックしてください

2 つは等しくありません列

この例では、小、中、大のデバイスで列の比率が常に 33.3%/66.6% となる 2 つの等しくない列 (33.3%/66.6%) を作成する方法を示します。インスタンス»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

.small|medium|large-push-* と >.small|medium|large-pull-* クラスを使用して列の順序を変更します:

Instance
<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - 两个不均等列</h2>
  <p>该实例演示了如何创建两个不均等列 (33.3%/66.6%)，在小型、中型和大型设备上列的比例始终为 33.3%/66.6%。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="small-8 columns" style="background-color:yellow;">
    <p>.small-8</p>
  </div>
  <div class="small-4 columns" style="background-color:pink;">
    <p>.small-4</p>
  </div>
</div>

</body>
</html>

Run Instance».small|medium|large-push-* 和 .small|medium|large-pull-* 类来修改列的顺序:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - Push 和 Pull</h2>
  <p>通过使用 <code>.small|medium|large-push-*</code> 和 <code>.small|medium|large-pull-*</code> 类来修改列的顺序:</p>
  <div class="small-8 columns" style="background-color:yellow;">
    <p>.small-8</p>
  </div>
  <div class="small-4 columns" style="background-color:pink;">
    <p>.small-4</p>
  </div>
  
  <p>Switched:</p>
  <div class="small-4 small-8-push columns" style="background-color:yellow;">
    <p>.small-4 .small-8-push</p>
  </div>
  <div class="small-8 small-4-pull columns" style="background-color:pink;">
    <p>.small-8 .small-4-pull</p>
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

嵌套列

你可以使用嵌套网格(列中插入列):

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - 嵌套列</h2>
  <p>列中插入列:</p>
  <div class="small-8 columns" style="background-color:yellow;">.small-8
    <div class="row">
      <div class="small-8 columns" style="background-color:lightcyan;">.small-8 Nested
        <div class="row">
          <div class="small-8 columns" style="background-color:lightblue;">.small-8 Nested Again</div>
          <div class="small-4 columns" style="background-color:lightgreen;">.small-4</div>
        </div>
      </div>
      <div class="small-4 columns" style="background-color:lightgray;">.small-4</div>
    </div>
  </div>
  <div class="small-4 columns" style="background-color:pink;">.small-4</div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

混合：手机、桌面设备

Foundation 网格系统有三个列: .small-* (手机), .medium-* (平板), 和 .large-* (桌面设备)。这些类可以动态组合使用，让布局更加灵活：

提示： 每个类都能放大，如果你希望小型和大型屏幕设备的宽度一样可以设置指定 .small-*

[Run Instance] ボタンをクリックしてオンライン インスタンスを表示します

ネストされた列
🎜ネストされたグリッドを使用できます(列内に列を挿入):🎜🎜🎜インスタンス🎜🎜
<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>混合：手机、桌面设备</h2>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="small-6 large-8 columns" style="background-color:yellow;">.small-6 .large-8</div>
  <div class="small-6 large-4 columns" style="background-color:pink;">.small-6 .large-4</div>
</div>
<div class="row">
  <div class="small-2 large-4 columns" style="background-color:lightblue;">.small-2 .large-2</div>
  <div class="small-4 large-4 columns" style="background-color:yellow;">.small-4 .large-2</div>
  <div class="small-6 large-4 columns" style="background-color:lightgreen;">.small-6 .large-2</div>
</div>
<div class="row">
  <div class="small-3 large-5 columns" style="background-color:lightcyan;">.small-3 .large-5</div>
  <div class="small-9 large-7 columns" style="background-color:lightgray;">.small-9 .large-7</div>
</div>

</body>
</html>
🎜🎜🎜インスタンスの実行»🎜🎜オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください🎜🎜 🎜 🎜ハイブリッド: モバイル、デスクトップ 🎜🎜Foundation グリッド システムには、.small-* (モバイル)、.medium-* (タブレット)、および の 3 つの列があります。 large-* (デスクトップ)。これらのクラスを動的に組み合わせてレイアウトをより柔軟にすることができます: 🎜🎜ヒント: 小さい画面デバイスと大きい画面デバイスの幅を同じにしたい場合は、各クラスを拡大できます。 .small-* が指定されました。 🎜🎜🎜インスタンス🎜🎜rreee🎜
インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

モバイル、タブレット、デスクトップデバイスの混合

インスタンス

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>混合：手机、平板和桌面设备</h2>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="medium-6 large-8 columns" style="background-color:red;">.medium-6 .large-8</div>
  <div class="medium-6 large-4 columns" style="background-color:yellow;">.medium-6 .large-4</div>
</div>
<div class="row">
  <div class="small-4 medium-3 large-7 columns" style="background-color:pink;">.small-4 .medium-3 .large-7</div>
  <div class="small-4 medium-6 large-3 columns" style="background-color:lightgreen;">.small-4 .medium-6 .large-3</div>
  <div class="small-4 medium-3 large-2 columns" style="background-color:orange;">.small-4 .medium-3 .large-2</div>
</div>

</body>
</html>

インスタンスの実行»

「R」をクリック国連「インスタンス」ボタンをクリックすると、オンラインの例が表示されます

列の中央揃え

列の中央揃えには、.small-centered クラスを使用できます。中型および大型のデバイスは小型のデバイスのセンタリングを継承できますが、大型のデバイスではセンタリング クラス .large-centered を設定する必要があります。 .small-centered 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类.large-centered 。

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - 居中列</h2>
  <p>列居中可以使用 <code>.small-centered</code> 类。中型和大型设备可以继承小型设备的居中，但你需要在大型设备上设置居中类<code>.large-centered</code> 。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="small-4 small-centered columns" style="background-color:yellow;">small-4 small-centered</div>
</div>
<div class="row">
  <div class="small-6 small-centered columns" style="background-color:pink;">small-6 small-centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns" style="background-color:lightgreen;">small-6 large-centered</div>
</div>
<div class="row">
  <div class="small-8 small-centered large-uncentered columns" style="background-color:yellow;">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
  <div class="small-10 small-centered columns" style="background-color:pink;">small-10 small-centered</div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

列偏移量

可以使用 .large-offset-* (或 .small-offset-*) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>网格 - 偏移量</h2>
  <p>可以使用 <code>.large-offset-*</code> (或 <code>.small-offset-*</code>) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:</p>
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-11 columns" style="background-color:pink;">11</div>
</div>
<div class="row">
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-10 large-offset-1 columns" style="background-color:pink;">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-9 large-offset-2 columns" style="background-color:pink;">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns" style="background-color:yellow;">1</div>
  <div class="large-8 large-offset-3 columns" style="background-color:pink;">8, offset 3</div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

不完整列

如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。

可选项  .end 类用于设置最后一列的元素向左边浮动:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>不完整列</h2>
  <p>如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动，并使用空白来填充剩下的列。</p>
  <p>可选项 <code>.end</code> 类用于设置最后一列的元素向左边浮动:</p>
  <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div>
  <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div>
  <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div>
</div>
<div class="row">
  <div class="medium-3 columns" style="background-color:pink;">.medium-3</div>
  <div class="medium-3 columns" style="background-color:pink;">.medium-3</div>
  <div class="medium-3 columns end" style="background-color:pink;">.medium-3 .end</div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

宽屏

网格 (.row) 最大尺寸（ max-width）为 62.5rem。在宽屏设备上尺寸可能大于 62.5rem, 这样列就无法完整填充页面，即便宽度设置为 100%。但是我们可以通过 CSS 来设置新的  max-width:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
<style>
  .example {
    max-width: 100%;
  }
  </style>
</head>
<body>

<h2>Foundation 网格</h2>
<p>默认情况下，网格最大(<code>.row</code>) 宽度为 62.5rem。在宽屏上，当宽度大于 62.5rem, 列不会跨越页面的宽度， 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width:</p>
<hr>

<div class="row">
  <p>基本行 (max-width:62.5rem):</p>
  <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
  <div class="small-6 columns" style="background-color:pink;">.small-6</div>
</div>
<br>

<div class="row example">
  <p>行的max-width为 100% :</p>
  <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
  <div class="small-6 columns" style="background-color:pink;">.small-6</div>
</div>
<br>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

如果你想使用默认的 max-width, 但是背景颜色需要跨域整个页面，这时你在容器元素上使用 .row

インスタンス

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<h2>Foundation 网格</h2>
<p>外层容器使用类 .row，并指定背景颜色跨越整个页面：</p>

<div class="row" style="background-color:tomato;padding:25px;">
  <p>Default Row with a tomato color and padding:</p>
  <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
  <div class="small-6 columns" style="background-color:pink;">.small-6</div>
</div>
<br>

<div class="container" style="background-color:coral;padding:25px;">
  <div class="row">
    <p>Row with container:</p>
    <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
    <div class="small-6 columns" style="background-color:pink;">.small-6</div>
  </div>
</div>
<br>

</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

列オフセット

.large-offset-* (または .small-offset-*) クラス設定列が右に移動します。 左マージンの列の数は、* 記号を使用して制御します: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜実行例»🎜🎜オンライン例を表示するには、[インスタンスの実行] ボタンをクリックしてください🎜🎜🎜🎜不完全な列🎜🎜行内の列が 12 でない場合、Foundation は自動的に最後の列を右にフローティングし、残りの列を空白で埋めます。 🎜🎜オプションの .end クラスは、最後の列の要素を左にフロートするように設定するために使用されます: 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」をクリックしますオンライン インスタンスを表示するボタン🎜 🎜🎜🎜ワイドスクリーン🎜🎜 グリッド (.row) 最大サイズ (max-width) は 62.5rem です。ワイドスクリーン デバイスでは、サイズが 62.5rem より大きい場合があるため、幅が 100% に設定されていても、列がページを完全に埋められません。ただし、CSS を通じて新しい最大幅を設定できます:🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします🎜🎜🎜デフォルトの最大幅を使用したい場合は、 -width ただし、背景色はページ全体に及ぶ必要があります。この場合、コンテナ要素で .row クラスを使用し、必要な背景色を指定します: 🎜🎜🎜Instance🎜🎜rrreee 🎜🎜🎜インスタンスの実行»🎜 🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜🎜🎜