はじめに
現在オリジナルアプリを作成中です。投稿した画像を一覧で表示するページを作成しました。一覧を見栄え良くするため、タイル型レイアウトを採用しました。具体的手段はグリッドの活用です。忘れないように書き記します。
開発環境
ruby 2.6.5
Rails 6.0.3.4
HTML
CSS
目次
1.HTMLの準備
2.CSSの設定
HTMLの準備
タイル状にしたい部分全体(親要素)をdivタグで囲い、クラス名をわかりやすく「grid」とつける。
補足:Ruby on Railsでアプリを制作しています。
<div class = "wrapper grid"> #全体をdivで囲み、クラス名gridを追加する
<% @desks.each do |desk| %>
<%= link_to desk_path(desk.id) do %>
<%= image_tag desk.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: 1fr 1fr 1fr;
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デザイン入門講座
以上