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

はじめに

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

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

Gridレイアウトと複数のセルにまたがった配置

Gridレイアウトでは、アイテムを配置するための目に見えない線（グリッドライン）が存在します。3列のグリッドの場合、垂直のグリッドラインは4本あります（1から4まで）。

個々のグリッドアイテムに grid-column と grid-row プロパティを指定することで、「どの線からどの線までを占有するか」を指示し、アイテムを自由に配置したり、複数のセルに跨らせたりすることができます。

grid-column-start：開始する垂直線の番号
grid-column-end：終了する垂直線の番号
grid-row-start：開始する水平線の番号
grid-row-end：終了する水平線の番号

これらは、grid-column: start / end; のようにショートハンドで書くことが一般的です。

例えば、次のようになります。

grid-column: 1 / 3;
- 1番目の垂直線から3番目の垂直線まで
- つまり、2つの列を占有
grid-row: 2 / 4;
- 2番目の水平線から4番目の水平線まで
- つまり、2つの行を占有

また、span キーワードを使うと、「いくつかのセルにまたがるか」を直感的に指定できます。

grid-column: span 2; ならば、現在の位置から2つの列にまたがる。

作成したコード

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本ノック 0056</title>
</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>

  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
    <div style="grid-column: 1 / 4;">1</div>
    <div style="grid-row: 2 / 4;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

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

</body>
</html>