【HTML/CSS】CSSグリッドにしょうもないミスで苦戦した話

結論からいうと

　　　　　　　　　　タグの戸締りはちゃんとしよう

事の発端

始めてホームページを作ってみようとHTMLとCSSを触り始め、楽すぎ本なんかなくても行けそうだわってくらいスムーズに制作が進んでいた。そんななかCSSでグリッド表示をしてみようと挑戦した矢先のことであった。
まず完成想定はこちら

そしてこれを目指して打ち込んだ結果

そうはならんやろ！？

なぜか生まれる謎の空白が出来てしまった...

なんでこうなったの？(解説)

この謎の空白を見てから私は様々なサイトを漁るも、何も出てこない。というかこの時は主にCSSにバグだと思っていたのでHTMLはまったく気にしていなかった。だがCSSのテストをしてみるとこれがうまくいった。「じゃあHTMLじゃん」ということで何とかたどりつけた。
バグ当初のHTMLとCSSの一部を以下に載せる。

test.html

<div class="contalner">
    <div class="item">
        <h1>1</h1>
        <a>詳細はこちら<a>
    </div>
    <div class="item">
        <h1>2</h1>
        <a>詳細はこちら<a>
    </div>
    <div class="item">
        <h1>3</h1>
        <a>詳細はこちら<a>
    </div>
</div>

test.css

.contalner{
    display: grid;
    grid-template-columns: 150px 150px 150px;
    gap: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 100px;
}
.item{
    background: rgb(0, 41, 221);
    color: #fff;
    padding: 10px;
}

皆様気づいただろうか、すごくしょうもないミスである。

＜a＞のタグを閉め忘れているのだ

え、これであんなに変になるんだ。全く連想できなかったヒューマンエラーでした。

以下のコードが修正後です。CSSは変更なしです。

test_ok.html

<div class="contalner">
    <div class="item">
        <h1>1</h1>
        <a>詳細はこちら</a>
    </div>
    <div class="item">
        <h1>2</h1>
        <a>詳細はこちら</a>
    </div>
    <div class="item">
        <h1>3</h1>
        <a>詳細はこちら</a>
    </div>
</div>

これで表示してみると理想と同じ画面が！やったー！

結論

　　　　　　　　　　タグの戸締りはちゃんとしよう

最近は鍵の管理も甘くなっている自覚がありますが、htmlのタグも家の鍵も閉じることをしっかりと心がけましょう。注意不足のおかげで結構な時間をバグ取りに費やしてしまいました 、それが楽しいんだけどね！。ただこれを機に初めてQiitaに上げてみようってなったのは私として結構いいきっかけだったのかもしれない。という訳で最初の記事は本当にしょうもないミスに苦戦してしまったことでした、まだホームページ作りは終わってないので完成かミスに沼ったら投稿しようと思います！