CSSグリッド活用によるレスポンシブ対応

はじめに

現在オリジナルアプリを作成中です。投稿した画像を一覧で表示するページを作成しました。一覧を見栄え良くするため、タイル型レイアウトを採用しました。具体的手段はグリッドの活用です。忘れないように書き記します。

開発環境
ruby 2.6.5
Rails 6.0.3.4
HTML
CSS

目次

1.HTMLの準備
2.CSSの設定

HTMLの準備

タイル状にしたい部分全体(親要素)をdivタグで囲い、クラス名をわかりやすく「grid」とつける。
補足：Ruby on Railsでアプリを制作しています。

index.html.erb

<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プロパティで設定する。

index.css

.grid {
  display: grid;
  gap: 26px;
}

次に各タイルの横幅設定をする。grid-template-columsプロパティにより、横に並べたいタイルの枚数だけfrを設定する必要がある。ここで1frは親要素に対する横幅を自動で調整する。下記の場合、1frが3つあるので、1:1:1の3等分されたグリッドが配置される。もし1fr 2fr 1frのように設定した場合、タイル枚数は3枚であるものの、各タイル幅は左から1:2:1となる。

index.css

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 6%;
  margin-bottom: 50px;
}

最後にレスポンシブ化を記す。repeat関数を使うことにより、タイル数を指示し、コードを簡略化できる。

index.css

.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に固定され、これ以上は小さくならない。

index.css

.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に書き換えた。これにより、画面の幅に応じて最適なタイル数を自動で表示する。

index.css

.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デザイン入門講座

以上