プログラミング独学者へgridでカード型レイアウトの作り方を解説

Web制作
Facebook にシェア
LINEで送る

みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。
本日は、画像を整列させ、マルチカラムで表示するレイアウトを作り方を解説します。

プログラミング独学者へgridでカード型レイアウトの作り方を解説

画像を整列させるには、マルチカラムで表示するレイアウトが便利です。
「CSSグリッド」を使えば少ないコードで画像をタイル型に並べられます。

ホームページ制作やフリーランスエンジニアを育成するメンター業を右記で請けおってます

HTML

HTMLは以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>4-07</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="4-07.css">
</head>
<body>
  <div class="container">

    <ul class="cardList04">
      <li class="cardList04__item">
        <a href="#" class="card">
          <div class="card__thumb"><img src="https://katsutravel.com/wp-content/uploads/c23fe399-1f19-4336-a42f-48143f6e7c40.jpg" alt=""></div>
          <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </a>
      </li>
      <li class="cardList04__item">
        <a href="#" class="card">
          <div class="card__thumb"><img src="https://katsutravel.com/wp-content/uploads/aaec216e-2f90-4816-80eb-f7c5faa98ecb.jpeg" alt=""></div>
          <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </a>
      </li>
      <li class="cardList04__item">
        <a href="#" class="card">
          <div class="card__thumb"><img src="https://katsutravel.com/wp-content/uploads/d6620f67-b935-4560-857b-d804f831fe95.jpg" alt=""></div>
          <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </a>
      </li>
      <li class="cardList04__item">
        <a href="#" class="card">
          <div class="card__thumb"><img src="https://katsutravel.com/wp-content/uploads/360_F_115935108_94tTEVLXexbvgd4cSOXbAa1LPGc84kM4.jpg" alt=""></div>
          <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </a>
      </li>
      <li class="cardList04__item">
        <a href="#" class="card">
          <div class="card__thumb"><img src="https://katsutravel.com/wp-content/uploads/TSU_mayomayookonomi_TP_V.webp" alt=""></div>
          <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </a>
      </li>
      <li class="cardList04__item">
        <a href="#" class="card">
          <div class="card__thumb"><img src="https://katsutravel.com/wp-content/uploads/ダウンロード.jpeg" alt=""></div>
          <p class="card__txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
        </a>
      </li>
    </ul>

  </div>
</body>
</html>

gridでつくるカード型レイアウト

gapプロパティでアイテム間余白を一発指定

CSS

.cardList04 {
display: grid; /赤字にするgirdレイアウトにする/
gap: 20px; /赤字にするアイテム間余白を20pxに設定/
}
@media screen and (min-width: 768px),print {
.cardList04 {
grid-template-columns: repeat(2,1fr); /均等2カラム指定/
}
}
@media screen and (min-width: 992px),print {
.cardList04 {
grid-template-columns: repeat(3,1fr); /均等3カラム指定/
}
}
@media screen and (min-width: 1200px),print {
.cardList04 {
grid-template-columns: repeat(4,1fr); /均等4カラム指定/
}
}

display:grid にして、gap プロパティを使うだけで、「アイテム間の余白」を簡単に指定できます。
また、gridレイアウトというのは行・列を指定してアイテムを任意で並べるのが基本的な使い方ですが、カラムの指定にrepeat(アイテム数,1fr)と指定することで、指定のカラム数で均等幅の繰り返しグリッドを簡単作ることができます。

※fr

「fr」は「fraction(分割、分数の意味)」の略で、gridレイアウトの中で利用できる新しい単位です。
親要素に余白がある場合に指定した比率に応じてアイテムを引き伸ばすことができるものです。

完成HTML、CSS

See the Pen Untitled by kacyan (@kacyan) on CodePen.

メディアクエリなしでレスポンシブ

CSS

.cardList04 {
display: grid; /girdレイアウトにする/
gap: 20px; /アイテム間余白を20pxに設定/
grid-template-columns: repeat(auto-fill,minmax(335px,1fr));/赤字にする
}
/*補足
最小値の335pxは、コンテナ幅1400pxの時4カラムで表示したいというデザイン的な
意図から算出しています。
コンテナ幅：1400px
カラム数：4
gap：20px　×　3個 = 60px

各カラムの幅 = (1400px - 60px) / 4 = 335px　※これが実質最小値
*/

更に、grid レイアウトを使うとメディアクエリを使わずに絡む数を自動的に変化させることも可能です。
ポイントはrepeat()の中でアイテム数をauto-fitまたはauto-fill、アイテム幅をminmax()関数を使って指定することです。
minmax()関数は、最小値と最大値を同時に指定できる関数で、サンプルでは最小サイズを335px、最大サイズを1fr（幅いっぱいに広げる）としています。
例えばこれを単純に repeat(2,minmax(335px,1fr)) とすると、アイテムの最小値が335pxに設定されているため、ブラウザ幅が700pxくぉ下回った時にコンテナに入りきらずに横スクロールが発生してしまします。
このように指定したアイテムがコンテナに入りきらなくなった際、自動的に次の行にカラムを移動させ、複数行で表示できるのが auto-fit/auto-fill という値です。
なおauto-fitとauto-fillの違いは、一行に配置可能なアイテム数に対して実際のアイテムが不足した場合に余った余白をどう処理するか？　という点です。

完成HTML、CSS

See the Pen Untitled by kacyan (@kacyan) on CodePen.

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
created by Rinker

gridでカード型レイアウトの作り方まとめ

この手の格子状にアイテムを並べるレイアウトを作るのに最も適しているのは、gridレイアウトです。

①gapプロパティでアイテム間余白を一発指定
②メディアクエリなしでレスポンシブ

今回の記事が、フロントエンドエンジニア、Webデザイナーを独学で目指している方の参考になれば幸いです。

下記を押していただけると励みになります！
↓

にほんブログ村 ライフスタイルブログ フリーランス生活へ
　　　　　　　　　　　　　　　　人気記事

プログラミングスクール：エンジニアおすすめの３社

フリーランス初心者にとってクラウドソーシングは登竜門だ！

Facebook にシェア
LINEで送る