グリッドビューとは?

多くのWebページはグリッドビューに基づいています。つまり、ページは列に分割されています。

グリッドビューを使用すると、Webページをデザインするときに非常に役立ちます。ページに要素を配置しやすくなります。

多くの場合、レスポンシブグリッドビューには12列があり、幅の合計は100%で、ブラウザーウィンドウのサイズを変更すると縮小したり拡大したりします。

レスポンシブグリッドビューの構築

レスポンシブグリッドビューの作成を開始しましょう。

最初に、すべてのHTML要素にbox-sizingに設定されたプロパティborder-box.これにより、パディングとボーダーが要素の幅と高さの合計に含まれるようになります。

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

次の例は、2つの列を持つ単純なレスポンシブWebページを示しています。

上記の例は、Webページに2つの列しか含まれていない場合に問題ありません。

ただし、Webページをより詳細に制御するために、12列のレスポンシブグリッドビューを使用したいと考えています。

最初に、1つの列のパーセンテージを計算する必要があります: 100% / 12 列 = 8.33%。

次に、12列ごとに1つのクラスを作成します。class="col-"セクションがまたがる列の数を定義する数値:

これらの列はすべて左にフローティングし、パディングは15pxにする必要があります。

各行は<div>.行内の列の数は、常に 12 になる必要があります。

行内の列はすべて左に浮いているため、ページの流れから除外され、列が存在しないかのように他の要素が配置されます。これを防ぐために、フローをクリアするスタイルを追加します。

また、見栄えを良くするために、いくつかのスタイルと色を追加したいと考えています。