はじめに
現在オリジナルアプリを作成中です。投稿した画像を一覧で表示するページを作成しました。一覧を見栄え良くするため、タイル型レイアウトを採用しました。具体的手段はグリッドの活用です。忘れないように書き記します。
開発環境
ruby 2.6.5
Rails 6.0.3.4
HTML
CSS
目次
1.HTMLの準備
2.CSSの設定
HTMLの準備
タイル状にしたい部分全体(親要素)をdivタグで囲い、クラス名をわかりやすく「grid」とつける。
補足:Ruby on Railsでアプリを制作しています。
<divclass = "wrapper grid"> #全体をdivで囲み、クラス名gridを追加する
<%@desks.eachdo|desk|%><%=link_todesk_path(desk.id)do%><%=image_tagdesk.image,class:"desk-img"%><p><%=desk.title%><%="by#{desk.user.nickname}さん"%></p><%end%><%end%></div>
2.CSSの設定
※最終コードは一番下にあります。
CSSではdisplayプロパティにgridを設定する。これにより、子要素はタイル状にレイアウトされる。タイル間の余白はgapプロパティで設定する。
.grid{display:grid;gap:26px;}
次に各タイルの横幅設定をする。grid-template-columsプロパティにより、横に並べたいタイルの枚数だけfrを設定する必要がある。ここで1frは親要素に対する横幅を自動で調整する。下記の場合、1frが3つあるので、1:1:1の3等分されたグリッドが配置される。もし1fr 2fr 1frのように設定した場合、タイル枚数は3枚であるものの、各タイル幅は左から1:2:1となる。
.grid{display:grid;gap:26px;grid-template-columns:1fr1fr1fr;margin-top:6%;margin-bottom:50px;}
最後にレスポンシブ化を記す。repeat関数を使うことにより、タイル数を指示し、コードを簡略化できる。
.grid{display:grid;gap:26px;grid-template-columns:repeat(3,1fr);/* 1fr 1fr 1frと同じ */margin-top:6%;margin-bottom:50px;}
またminmaxを使うことにより、1タイルの最小と最大幅を設定できる。下記の場合、最小値を240px、最大値を1fr(親要素の3等分相当)となる。最大値は親要素の幅(画面サイズ)に依存する。一方で最小値は24opxに固定され、これ以上は小さくならない。
.grid{display:grid;gap:26px;grid-template-columns:repeat(3,minmax(240px,1fr));/* 1fr 1fr 1frと同じ */margin-top:6%;margin-bottom:50px;}
最終コードを下記に記す。上記おrepeat関数のタイル数を表す「3」をautofitに書き換えた。これにより、画面の幅に応じて最適なタイル数を自動で表示する。
.grid{display:grid;gap:26px;grid-template-columns:repeat(autofit,minmax(240px,1fr));/* 1fr 1fr 1frと同じ */margin-top:6%;margin-bottom:50px;}
参考:
1冊ですべて身につくHTML-CSSとWebデザイン入門講座
以上