この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

Flexbox と Grid の組み合わせ

Flexbox と Grid は競合するものではなく、得意なことを分担させることで、非常に強力なレイアウトを実現することができます。

Grid → マイクロレイアウト
ページ全体の大きな骨格や、セクションの配置など、2次元の面でレイアウトを組むのが得意

Flexbox → ミクロレイアウト
コンポーネント内の要素の整列や、1次元の線上での配置を制御するのが得意

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フロントエンド1000本ノック 0063</title>
  <style>
    article {
      display: flex;
      flex-direction: column;
    }
    article p {
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
    <article>
      <img src="img-1.jpg" alt="記事1の画像">
      <h3>タイトル1</h3>
      <p>本文1</p>
      <button>詳細を見る</button>
    </article>
    <article>
      <img src="img-2.jpg" alt="記事2の画像">
      <h3>タイトル2</h3>
      <p>本文2</p>
      <button>詳細を見る</button>
    </article>
    <article>
      <img src="img-3.jpg" alt="記事3の画像">
      <h3>タイトル3</h3>
      <p>本文3</p>
      <button>詳細を見る</button>
    </article>
    <article>
      <img src="img-4.jpg" alt="記事4の画像">
      <h3>タイトル4</h3>
      <p>本文4</p>
      <button>詳細を見る</button>
    </article>
    <article>
      <img src="img-5.jpg" alt="記事5の画像">
      <h3>タイトル5</h3>
      <p>本文5</p>
      <button>詳細を見る</button>
    </article>
    <article>
      <img src="img-6.jpg" alt="記事6の画像">
      <h3>タイトル6</h3>
      <p>本文6</p>
      <button>詳細を見る</button>
    </article>
  </div>
</body>
</html>