レスポンシブWebデザイン - グリッドビュー

グリッドビューとは何ですか？

多くのウェブページは、ページが列のレイアウトに基づいていることを意味し、グリッドベースのデザインです。

Webページを設計するために私たちを助けるグリッドビューを使用します。 これは、私たちは、ページ要素が容易になる追加することができます。

ブラウザのウィンドウが自動的に伸縮自在のサイズが変更されたときに応答グリッドビューは、通常、12、100％の幅です。

応答グリッドビュー

応答グリッドビューを作成します。

次に、応答グリッドビューを作成します。

まず、すべてのHTML要素は、ボックスのサイズ変更プロパティを持っているとの国境ボックスに設定されていることを確認します。

要素の幅と高さの間に含まれるマージンやボーダーを確認してください。

次のコードを追加します。

* {
    box-sizing: border-box;
}

より多くのボックスのサイズ変更を参照してくださいクリックしてください： CSS3ボックスのサイズ変更プロパティを 。

次の例では、2つの列を含む単純な応答Webページを示しています。

例としては、上記の二つがあります。

グリッド・システム12は、より優れた応答性のウェブサイトを制御することができます。

100％/ 12 = 8.33パーセント：まず、各列の割合を計算することができます。

各列クラスに指定され、= "col-"クラスは、各列を定義するために使用されるいくつかのスパンを持っています。

すべての列は15ピクセルに（パディング）を間隔、フローティングのままに：

<div>パッケージを使用して各行。 すべての列は12まで追加する必要があります。

列の動作はフローティングのままにし、透明フロートを追加します。

我々は、それがより良い見てみましょう、いくつかのスタイルと色を追加することができます。