Foundation グリッド - 大型デバイス

Foundation のグリッド例：大型デバイス

前の章では、小型と中型デバイス用のクラスを持つグリッドの例を提示しました。2 つの div（カラム）を使用して、 小型デバイスでは 25%/75% に、中型デバイスでは 50%/50% に分割しました：

しかし、大型デバイス上のデザインは、33%/66% の分割などの方が良いかもしれません。

チップ: 大型デバイスは、64.0625em 以上の画面幅を持つものとして定義されています。

大型デバイスには、.large-* クラスを使用します。

大型デバイスに、次のカラム幅を追加します：

例の説明

• 小型デバイス用には、25%/75% の分割 (.small-3 と .small-9) を使用します
• 中型デバイス用には、50%/50% の分割 (.medium-6 と .medium-6) を使用します
• 大型デバイス用には、33%/66% の分割 (.large-4 and .large-8) を使用します

効果を確認するために、ブラウザウィンドウのサイズを変更してください：

	注: 合計は、いつも 12 になることを確認してください！

large だけの使用

下の例では、.medium-* と .small-* 無しに .large-6 クラスだけを指定しています。 これは、大型デバイスでは 50%/50% の分割になることを意味します。 しかし、中型および小型デバイスでは、縦に（100％ 幅）スタックされます：