シュテル(@sterchannel2020)です！
コンテンツがタイルみたいに並んでいるページをつくりたい
コンテンツの一覧ページなどでサムネイル画像が並んでいるのをよく見ますよね。
これをCSS gridを使って作っていきます👍
タイル型レイアウト制作の流れ
最初に他のページレイアウトなどを引用して、ページ上部を作ります。
その後、今回のメインであるタイル型レイアウトを作り、最後にレスポンシブ対応をするという流れです。
CSS gridを使いタイル型レイアウトに
imgタグで画像を、その下にpタグでキャプションを設置します。
これらをdivで囲みひとまとまりに。
必要な個数作ったら、全体をdivで囲みます。このdivに対してCSSで配置を指定します。
display:grid;
grid-template-clumns:1fr 1fr 1fr;（横並びを1:1:1にする/frにすると画面幅に合わせ伸縮可）
gap:26px;（画像間の余白の指定）
レスポンシブ対応させる
grid-template-columnsの値
repeat(3,1fr)
これで「1fr」の要素を1列に3つ並ばせることができます。
minmaxの値
minmax(最小値,最大値)
と指定することで、その要素の幅を「最小値～最大値の間」で、画面幅に合わせて伸縮するようにできます。
auto-fitの設定
要素の並びを折り返すポイントを繰り返し回数ではなく、
auto-fit
とすることでデバイスごとに見やすさを保ちつつタイル型レイアウトを表示させることができます。
タイル型レイアウト完成！
