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

はじめに

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

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

Grid について

Grid は、Flexbox が1次元（縦か横）のレイアウトを得意とするのに対し、2次元（縦と横）のレイアウトを得意としています。

Gridレイアウトも、親要素に display: grid; を指定することから始めます。これを Gridコンテナと呼びます。

そして、grid-template-columns と grid-template-row という2つのプロパティで、グリッドの列（columns）と行（row）の数やサイズを定義します。

例：2行2列のグリッド

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px; /* 1列目は100px, 2列目は200px */
  grid-template-rows: 50px 50px;    /* 1行目も2行目も50px */
}

作成したコード

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本ノック 0052</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
    }
  </style>
</head>
<body style="display: flex; flex-direction: column; min-height: 100vh;">

  <header style="display: flex; justify-content: space-between; align-items: center;">
    <div>
      <a href="/">
        <img src="img/logo.png" alt="フロントエンド1000本ノック">
      </a>
    </div>

    <nav>
      <ul style="display: flex; list-style: none; gap: 20px;">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">会社概要</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main style="flex-grow: 1;">
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </main>

  <footer>
    <p>Copyright 2025</p>
    <p>フロントエンド1000本ノック</p>
  </footer>

</body>
</html>