【html】html でlayoutの基本はdisplay: gridでよいのでは？ 横に並べたり、縦に並べたり
シンプルなレスポンシブサイト構築なら、もうGrid Layoutで決まり！ 最近、シンプルなレスポンシブサイトを構築する際、レイアウト方法に迷うことはありませんか？ そんな時は、 CSS Grid Layout を使うのが、もう一番無難でオススメです！ 特に、横並びで均等割りのレイアウトを実現したい場合、Grid Layoutは非常に強力なツールとなります。 例えば、横3列で均等に要素を配置したい場合、以下のCSSコードで簡単に実現できます。 display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; このコードのポイントは、 grid-template-columns: repeat(3, 1fr); の部分です。 repeat(3, 1fr) は、「1fr」という単位を3回繰り返すという意味で、各列に均等なスペースを割り当てます。 列数を調整したい場合 は、 3 の部分を 2 や 1 に変更するだけでOK！ 簡単に列数を変更できるので、様々な画面サイズに対応したレスポンシブデザインも容易に実現できます。 さらに、要素間の 隙間は gap プロパティ で調整できます。 gap: 16px; のように指定することで、要素間に16pxの隙間が生まれます。この値を調整することで、見た目のバランスを整えることができます。 Grid Layoutは、複雑なレイアウトもシンプルに記述できるだけでなく、レスポンシブデザインにも柔軟に対応できるため、現代のWebサイト構築において非常に強力なツールです。 ぜひ、Grid Layoutを活用して、効率的で美しいWebサイトを構築してみてください！