LoginSignup
1

More than 3 years have passed since last update.

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

Posted at

はじめに

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

開発環境
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デザイン入門講座

以上

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1