―CSS

【CSS Grid活用術】レスポンシブ対応と複雑なレイアウトを簡単に実装する方法

2024.10.20

2024.11.22

CSS

display: grid;とは？
複雑なレイアウト調整が可能なプロパティ
まとめ
参考文献

display: grid;とは？

display: grid; は、CSSで要素を2次元のグリッドレイアウトに変換するプロパティです。
詳しくは下記で解説してますのでご覧ください。

複雑なレイアウト調整が可能なプロパティ

grid-template-areas

grid-template-areasは、グリッドレイアウト内の子要素を視覚的に簡単に配置できます。grid-areaでそれぞれの子要素に名前を付け、grid-template-areasでその名前を使ってレイアウトを定義することで、HTML構造を変更せずに柔軟なデザインを実現可能です。以下の例では、1行目に「header」、2行目に「sidebarとcontent」、3行目に「footer」を指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Areas</title>
  <style>
    body {
      height: calc(100vh - 20px);
      margin: 0;
      padding: 10px;
    }
    .grid-container {
      display: grid;
      grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
      grid-template-columns: 400px 1fr 1fr; 
      grid-template-rows: 100px 1fr 50px;   
      height: 100%;
      gap: 10px;
      font-weight: 700;
      color: #fff;
    }

    .header {
      grid-area: header;
      background-color: #f8b400;
      padding: 20px;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: #f76c6c;
      padding: 20px;
    }

    .content {
      grid-area: content;
      background-color: #4a90e2;
      padding: 20px;
    }

    .footer {
      grid-area: footer;
      background-color: #50b848;
      padding: 20px;
    }

    .header, .sidebar, .footer, .content  {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="header">ヘッダー</div>
    <div class="sidebar">サイドバー</div>
    <div class="content">メインコンテンツ</div>
    <div class="footer">フッター</div>
  </div>
</body>
</html>

minmax()

minmax()は、CSS Gridのgrid-template-columnsプロパティで使用することで、レスポンシブなグリッドレイアウトを簡単に実現できます。例えば、auto-fitを使うと、グリッドトラック（列や行）にコンテンツが自動的にフィットし、余ったスペースも自動で埋めてくれますので下記の様にminmax(200px, 1fr)と指定することで、最小幅200px、最大幅1fr（フレキシブルユニット）に対応し、画面サイズに応じた柔軟な実装が可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>minmax</title>
</head>
<style>
    body {
        display: grid;
        align-items: center;
        height: 100vh;
    }
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
      grid-gap: 15px;
    }
  
    .card {
      background-color: #f4f4f4;
      border: 1px solid #ddd;
      padding: 20px;
      text-align: center;
      font-size: 1rem;
    }
  </style>
<body>
    <div class="card-grid">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
        <div class="card">Card 5</div>
      </div>      
</body>
</html>

subgrid

subgridを使用することで、親グリッドの行や列のサイズを子グリッドが継承できるため、下記の様に子要素の高さ等を統一して並べることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>subgrid</title>
  <style>
    body {
      background-color: #f1f1f1;
      margin: 0 auto;
      padding: 20px;
    }
    h2, p {
      margin: 0;
    }
    .card-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
      gap: 20px; 
    }
    .card { 
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      background-color: white;
      border-radius: 8px;
      gap: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 10px;
    }
    .card img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="card-container">
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="Placeholder Image 1">
        <h2>タイトルタイトルタイトルタイトルタイトル</h2>
        <p>このカードには画像、見出し、説明文が含まれています。</p>
        <a href="#" class="read-more-btn">Read More</a>
    </div>
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="Placeholder Image 2">
        <h2>タイトル</h2>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <a href="#" class="read-more-btn">Read More</a>
    </div>
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="Placeholder Image 3">
        <h2>タイトル</h2>
        <p>テキストテキストテキストテキスト</p>
        <a href="#" class="read-more-btn">Read More</a>
    </div>
    <div class="card">
      <img src="https://via.placeholder.com/300x200" alt="Placeholder Image 4">
        <h2>タイトル</h2>
        <p>テキストテキストテキストテキスト</p>
        <a href="#" class="read-more-btn">Read More</a>
    </div>
  </div>
</body>
</html>

まとめ

CSSのグリッドレイアウトを使った効率的なデザイン方法を解説しました。grid-template-areasやminmax()、subgridを使用することで複雑なレイアウトやレスポンシブ対応を簡単に実現できます。これらのプロパティを組み合わせることで、柔軟で高度なデザインが可能になりますのでgridを使用する際は利用してみてください。

参考文献