Tailwind CSSで理解するGrid Layout

はじめに CSS の Grid Layout についての解説です。 Grid Layout の使い方をサクッと知りたい人向けに書いています。 Grid の使い方 Tailwind CSS のクラスの紹介 grid 親要素に指定。flex と同じような使い方。 grid-cols-{n} (Grid Template Columns) n 個のカラム(横の要素数)をもつグリッドかを指定。gridと一緒に、親要素に指定。 col-span-{n} (Grid Column) 要素自体の幅。子要素に指定。 <div className="grid grid-cols-3">{/* 3カラムのグリッドであることを指定 */} <div className="col-span-1">1</div1> <div className="col-span-2">2</div1>{/* この要素で2カラム分