CSS グリッドに関する話 system_html/css_WEB-ITnose

グリッド システム (グリッド システム) について言えば、次の概念を見たことがあるかもしれません:

このように、レイアウト設計は固定グリッド構造を通じて実行されます。 Webデザインで広く使われているデザインスタイルです。このスタイルは明確できちんとしているため、Web ページの閲覧エクスペリエンスがより快適になります。

レスポンシブ デザイン

(レスポンシブ デザイン) の人気に伴い、グリッド システムには、レスポンシブ デザインを実装する方法 という新しい意味が与えられ始めています。 グリッドと応答性

応答性の重要なポイントは、異なる画面サイズのデバイスに適応するために、同じページに複数のレイアウト フォームを設計することです。一般的に言えば、次のようになります。

ページを理解するために複数のブロックに分割することができ、これらのブロックが集まってページのレイアウトを構成していることがわかります。さまざまな画面サイズに応じて、これらのブロックのレイアウトを調整することでレスポンシブ デザインを実現できます。また、画面幅が広い場合にはブロックが横方向に分布する傾向があり、画面幅が狭い場合にはブロックが縦方向に積み重なる傾向がある。

これらの正方形のブロックはグリッド システムのグリッドに似ていますか?はい、レスポンシブデザインを使いやすくするために、「グリッド」と呼ばれるスタイルライブラリがたくさんあります。

ラスター スタイル ライブラリは通常、これを行います。ページをいくつかの同じ幅の列 (列) に分割し、同じ幅の列を使用して応答性の高いページ ブロックを作成することをお勧めします。

これらはすべてこの考えを持っているように見えますが、異なるグリッド スタイル ライブラリはアプローチにおいて独自の考えを持っています。以下、本記事では代表的なグリッドスタイルライブラリをいくつか紹介し、その簡単な原理と使い方（正しい開き方）を説明します。

Bootstrap のグリッド

Bootstrap はそのグリッドを CSS のカテゴリに置き、それをグリッド システムと呼びます。デフォルトは 12 列に分割されています。

コンテナ、行、列

Bootstrap のグリッドを理解するには、正しい使用方法をマスターすることから始めるのが最善です。これには主に 2 つのポイントがあります。

最初のポイントは、コンテナー、行、列間の階層関係です。正しい書き方の例は次のとおりです:

<div class="container">    <div class="row">        <div class="col-md-6"></div>        <div class="col-md-6"></div>    </div></div>

Bootstrap ラスターのコンテナには、.container (固定ピクセル値の幅) と .container-fluid (幅 100%) の 2 種類があります。ここでは、両方ともコンテナと呼ばれます。 。行 (.row) はコンテナー内に配置する必要があり、列 (.col-md-6 など) は行内に配置する必要があることに注意してください。つまり、グリッド システムが適切に動作するには、コンテナ、行、列が特定の階層関係を維持する必要があります。

なぜこれが必要なのでしょうか?これらの要素のスタイルを見ると、コンテナーの水平方向のパディングが 15 ピクセル、行の水平方向の負のマージンが -15 ピクセル、列の水平方向のパディングが 15 ピクセルであることがわかります。これらのマージンは意図的に相互接続されており、歯車の噛み合いのように階層を定義します。これらのマージンは、実際には Bootstrap グリッドの微妙な点です。詳しく知りたい場合は、「The Subtle Magic Behind Why the Bootstrap 3 Grid Works」を読むことをお勧めします。

ネストされたラスターを使用する場合、正しい方法は、コンテナーを必要とせずに、列内の行を直接継続してからその列に継続することです。

<div class="container">    <div class="row">        <div class="col-md-8">            <div class="row">                <div class="col-md-6"></div>                <div class="col-md-6"></div>            </div>        </div>        <div class="col-md-4"></div>    </div></div>

ブレークポイントの種類

2 番目の点は異なります。ブレークポイントの種類とその組み合わせの意味。

Bootstrap グリッドの列に対応するクラス名の形式は .col-xx-y です。 y は、要素の幅が 12 列のうちの何列を占めるかを示す数値です。 xx には、選択できる特定の値がいくつかあります。つまり、ブレークポイント タイプである xs、sm、md、lg です。

ブートストラップ グリッドの設計において、ブレークポイントの意味は、ビューポートの幅がブレークポイントより小さい場合、列は垂直方向に積み重ねられ (display: block のデフォルトの動作)、ビューポートの幅がブレークポイントより大きい場合、またはに等しい 分割すると、列は水平に配置されます (float の効果)。 xs、sm、md、lg の順序で、ブレークポイントのピクセル値は連続的に増加します。ここで、xs は最小を意味します。つまり、ビューポートの幅が xs ブレークポイントより小さくなることはなく、列は常に水平方向に浮動します。

場合によっては、より詳細なレスポンシブ デザインを実現するために、複数のブレークポイント タイプを組み合わせることが必要になります。現時点では、異なるブレークポイント タイプ間でどのような相互作用があるでしょうか?

まず、Bootstrap の sass ソース コードがグリッドをどのように定義しているかを見てみましょう:

@include make-grid-columns;@include make-grid(xs);@media (min-width: $screen-sm-min) {  @include make-grid(sm);}@media (min-width: $screen-md-min) {  @include make-grid(md);}@media (min-width: $screen-lg-min) {  @include make-grid(lg);}

min-width 書き込みメソッドが使用されており、ブレークポイントのピクセル値が大きいほど、対応するコードがより後方にあることがわかります。したがって、次のような要素がある場合:

<div class="container">    <div class="row">        <div class="col-sm-6 col-lg-3">1</div>        <div class="col-sm-6 col-lg-3">2</div>        <div class="col-sm-6 col-lg-3">3</div>        <div class="col-sm-6 col-lg-3">4</div>    </div></div>

そして、次のような効果があるはずです:

前のソース コードと組み合わせると、上記のビューポートの幅が小さい値から小さい値に変化する過程で、次のことが想像できます。大きい場合、最初はデフォルトの垂直スタックを維持し、次に sm のブレークポイントを超えると、sm のスタイルが有効になり、1 行 2 列のタイプセットに変更され、引き続き lg のブレークポイントを超えます。 lg のスタイル コードが sm の後に定義されているため、 lg も有効になります。そのため、 sm のスタイルは上書きされ、1 行 4 列のレイアウトになります。

そのため、複数のブレークポイント タイプを組み合わせることで、複数のブレークポイントの変更を導入し、応答性をより詳細にすることができます。

适度使用

Bootstrap栅格虽然很强大，但也不应过度使用。例如，当你需要一个占据一整行宽度的元素时，请不要也想着让Bootstrap栅格参和进来，加入类似.col-xs-12这样的元素。实际上，你不需要任何栅格类，你需要的只是一个块元素。

Foundation中的栅格

Foundation栅格叫做Grid，它和Bootstrap栅格的设计十分近似，只是在类名和结构上有所差异。Foundation栅格同样默认12列。

行与列

类比之前Bootstrap栅格的例子，Foundation栅格的一个正确的写法示例如下：

<div class="row">    <div class="medium-6 columns"></div>    <div class="medium-6 columns"></div></div>

Foundation栅格的行用.row表示，而列由至少两个类名组成，一是.columns或.column（2种写法完全相同，单纯为了支持语法偏好）表明这是列元素，二是.medium-6这种用于表示断点类型和对应宽度。在默认情况下，Foundation栅格的断点类型从小到大依次是small、medium、large，其中small类似Bootstrap栅格的xs，也是指任意屏幕尺寸下都水平排列。

Foundation栅格没有container，只需要row和column，因此显得比Bootstrap栅格更简单一些。其中row定义了最大宽度（可以认为承担了container的部分功能），column定义了0.9375rem的水平内边距。如果要嵌套，仍然是column内续接row，再继续接column。

组合使用多个断点类型，其方法也和Bootstrap栅格相同。需要注意的是，Foundation栅格的断点值是用的em而不是px，对应的，它们转换后的像素值也有别于Bootstrap栅格。

Block Grid

作为栅格系统的补充，Foundation还提供了另外一个叫做Block Grid的栅格。不过，它并不是一个超出传统栅格的新东西，而只是一个针对特定栅格应用场景的方法糖。

下面是一个Block Grid的示例：

<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li></li></ul>

其中，ul和li这样的特定标签组合是必须的。在这个示例中，屏幕宽度从小到大的变化过程中，列元素将依次是一行两列、一行三列、一行四列的排版方式。

可以看到，Block Grid的结构也是行和列，但只需要在行上有一个类名。和Foundation的Grid相比，它的确有一些不同。一方面，Block Grid的行并没有定义最大宽度。另一方面，Block Grid的列一定是等宽的（毕竟li不需要任何类名）。

Toast栅格

前面介绍的两个栅格样式库都来源于流行前端框架，并不是独立的。本文接下来要介绍的Toast，则是一个独立的、很有想法的栅格样式库。

特别的实现方式

为什么说很有想法呢？请看它的一个正确的写法示例：

<div class="grid">    <div class="grid__col grid__col--1-of-2"></div>    <div class="grid__col grid__col--1-of-2"></div></div>

类似的，这也是一行均分两列的排版。可以看到，Toast栅格的结构同样是行（.grid）与列（.grid__col）。但是，不同于始终以12列为参考的模式，它可以用1-of-2这样更为直观的类名。事实上，这里用3-of-6、6-of-12等也可以，它们是相同的。

当然，这并不是Toast最特别的地方。现在，请想一下，Bootstrap及Foundation的栅格系统的column原本都是块元素，它们是如何实现水平排列的？

对的，用的是float。但Toast是如何做的呢？它想法独特，选用了display: inline-block;。如果你有了解过这个属性，你应该知道inline-block的元素会彼此之间存在缝隙。Toast在选择这个属性的基础之上，巧妙使用了负外边距（例如margin-right: -.25em;），消除了缝隙对栅格column水平排列的影响。在我做了一些测试和应用后，我只能说，这个强行完成的策略要给个赞。

非Mobile First

在前面Toast栅格的示例中，并没有类似md、medium这样体现断点类型的词。这是因为，Toast采用了“存在默认”的风格。绝大部分情况下，只需要使用形如.grid__col--x-of-y的类名。Toast已经为这个类设置了断点（默认700px），低于这个断点为display: block;，高于这个断点为display: inline-block;。

意外的是，不同于Bootstrap和Foundation默认取block的mobile first原则（竖直堆叠更符合小尺寸屏幕的排版要求），Toast则是把display: inline-block;放在了@media范围之外，当做默认属性。这应该只是风格偏好差异，就我个人而言，我还是更赞同mobile first的设计风格的。

有关mobile first的响应式设计的实现，推荐阅读Grid。

如果要加入多个断点变化，Toast是这样做：

<div class="grid">    <div class="grid__col grid__col--1-of-4 grid__col--m-1-of-2">    </div></div>

上面这段代码的效果是，该栅格列在480px以下为block，占据满宽，481px~700px之间为inline-block，占据1/2宽度，701px以上为inline-block，占据1/4宽度。

グリッド システムの補足

以前に紹介したこれらのグリッド スタイル ライブラリのソース コードは、Less や Sass などの CSS プリコンパイル ツールを使用しているため、12 列、ブレークポイント値、列間隔などはすべて構成可能ですが、ほとんどの場合。場合によってはデフォルトで十分です。

グリッド スタイル ライブラリは優れていますが、レスポンシブ デザインのすべてではありません。異なる画面サイズのデバイスで同じアプリケーションのブラウジング エクスペリエンスを向上させる方法は他にもたくさんあります (大きな画面で大きなフォントを使用するなど)。グリッド システムはその方法の 1 つにすぎません。

結論

CSS グリッド システムの助けを借りて、レスポンシブなページ レイアウトを簡単に作成できます。ただし、このプロセスでは、さまざまなグリッド スタイル ライブラリの動作原理を理解し、それらを正しく使用することによってのみ、安定した信頼性の高いページ構造を作成できます。

(ブログを再編集、元のアドレス: http://acgtofe.com/posts/2015/07/a-story-of-grid/)