人気ブログランキング |

CSS グリッド

最近は、ホームページのレイアウトを CSS で行うときは CSS グリッドを使うらしい。


CSSグリッドを使うと、ボックスを2次元に配列することができる。

まず、個々のボックスを配列するための枠が必要だ。これは親要素がその役割を果たすことになる。これをグリッドコンテナと呼ぶ。親要素をグリッドコンテナに設定するには、CSS プロパティの display を使って値を grid にする。

#mainframe {display: grid}

次にグリッドの線引きをする。線引きの単位は fr (fraction) が使える。ウィンドウの幅によって自動的にグリッドの割り振りをしてくれる。縦の線引きは grid-template-columns で、横の線引きは grid-template-rows だ。

#mainframe {
display: grid
grid-template-columns: 3fr 1fr
grid-template-rows: 1fr 3fr
}

線引きをすると自動的に線に番号が 1 .. n と番号が振られるので、どの区画に要素を配置するかはその線番号で指定する。たとえば縦線の 1 と 2 の間に要素を配置する場合は、

grid-column: 1/2;

だ。横線の2と3の間の指定は、

grid-column: 2/3;

になる。

css グリッドを使うとレイアウトが乱れないらしい。便利になったものだ。見た目重視の場合は Bootstrap などのライブラリを使うのだろうが、レイアウトだけがほしいときは、ちょいちょいとCSSグリッドで記述できるのは嬉しい。

CSS グリッドの詳しい使い方は次のサイトで説明されている。


by tnomura9 | 2020-01-12 13:18 | Comments(0)
<< CSS のみでタブを作る duckduckgo >>