【CSS】gridを使用して要素を横並びにしてみよう!

こんにちは。ブロガーのmiraiです。

今回はCSSのコーディングテクニックについての記事です。

あなたはCSSで要素(グローバルナビ・図形等々)を横並びにするとき、どうしますか?

今までは要素を横に並べるとなると、float:leftを使って、要素を回り込ませていた方が多いと思います。

しかし今は技術が進化しており、gridという手法が使えます。

【CSS】gridを使用して要素を横並びにしてみよう!

今回は以下のようなトップページの、ヘッダー部分についてコーディングを行っていると仮定します。

 

 

赤枠のグローバルナビゲーションの要素を、gridを使用して横並びにする方法を解説します。

実際のコードサンプルがこちら!

 

 

navのulタグに対して、display:grid;を指定しています。またulタグの幅をgrid-template-columnsで指定して、幅を調整しています。

 

f

loat:leftでも要素の横並びはできますが、最近はgridやflex-boxが主流のようですね。

gridは主に以下の特徴を持っています。

コメント

タイトルとURLをコピーしました