CSS

グリッドレイアウトを使ってみよう

概要とグリッドレイアウトについて見ていきます

  • 概要

概要

・グリッドは格子状のレイアウトのことで、マス目に要素を配置していくことで、複雑なレイアウトでも簡単に組むことができます。

・例えば100pxのボックスを縦3列、横2列で配置していくといった処理をマス目になぞらえて好きなように指定することができます。

・グリッドレイアウトですが、比較的新しい技術なのでブラウザの対応状況を caniuse.com で調べておきましょう。検索バーにgridと入れると対応しているかどうかを調べることができます。

・ほとんどのブラウザで対応していますが、 Internet Explorer ではベンダープレフィックスが必要になるので、それだけ注意しておいてください。

・いつもと同様にchromeとVS codeエディターを使って書いていきます。

・まず要素が必要なのでdivでboxを数個作っていきます。わかりやすいようにCSSで背景を変えておきます。またgridにも親要素が必要なので親要素も作っておきましょう。

 

-広告-

 

 






-CSS