CSSグリッドの横並びが正常に作動しない

前提・実現したいこと

CSSのGridという機能を使って以下のようなイメージのを作ろうと思っているのですが、
うまく表示されません。
【理想】

【現実】
以下↓のように、ただ縦に積み重ねただけのまま

該当のソースコード

HTML
1<div class="header_menueBox">
2        <div class="box-aaa">aaa</div>
3        <div class="box-news">News</div>
4        <div class="box-about">About</div>
5        <div class="box-gallery">Gallery</div>
6        <div class="box-discography">Discography</div>
7        <div class="box-contact">Contact</div>
8        <div class="box-blog">Blog</div>
9        <div class="box-icon">icon</div>
10</div>

CSS
1.header_menueBox {
2  display:grid;
3  grid-template-rows:100px 100px;
4  grid-template-columns:100px 100px 100px 100px 100px 100px 100px 100px;
5}
6
7.box-aaa        {grid-area:1 / 1 / 2 / 8}
8.box-news       {grid-area:2 / 1 / 3 / 2}
9.box-about      {grid-area:2 / 2 / 3 / 3}
10.box-gallery    {grid-area:2 / 3 / 3 / 4}
11.box-discography{grid-area:2 / 4 / 3 / 5}
12.box-contact    {grid-area:2 / 5 / 3 / 6}
13.box-blog       {grid-area:2 / 6 / 3 / 7}
14.box-icon       {grid-area:2 / 7 / 3 / 8}

試したこと

一応、下記サイトを参考にしてみましたが…うまくいきませんでした…

◇サクッとグリッドCSSを理解して、クライアントワークに使う
https://www.itti.jp/web-design/quick-css-grid/

◇5分で完璧に分かる！CSS Gridの基本的な使い方を解説
https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html

どなたかお応え頂けましたら幸いです。
よろしくお願いいたします。

itagagaki

2021/07/15 08:42

できてますよ。 CSSはどうやって指定していますか？

退会済みユーザー

2021/07/15 08:48

grid-areaで区画を指定しています。

Lhankor_Mhy

2021/07/15 08:53

ご提示のコードを試してみましたが、問題なく動作しました。ご提示いただいていない部分に原因があると思われます。

itagagaki

2021/07/15 08:54

いや、HTMLに対してCSSをどうやって適用していますか？ <link rel="stylesheet" href="stylesheet.css" type="text/css"> ですか？

退会済みユーザー

2021/07/15 09:00

Lhankor_Mhy

2021/07/15 09:14

フォルダ構成はどうなっていますか？また、どのようにしてHTMLを表示させていますか？（HTMLファイルのアイコンをダブルクリックしている、など）

itagagaki

2021/07/15 09:14

たぶんパス /css/index.css が合っていないんじゃないですかね。ファイルがあるのはウェブサーバーですか？ローカルファイルですか？その場所は？

退会済みユーザー

2021/07/15 09:29 編集

ウェブサーバー上だと思います。。ファイル構成は以下のようにしていて、このindex.htmlから、indes.cssを読み込もうとしていました。 aaa.com_______________index.html 　　　　　　　　| 　　　　　　　　| 　　　　　　　　| 　　　　　　　　 |_______cssフォルダ______index.css

itagagaki

2021/07/15 09:47

なるほど、合っているっぽいですけどね。念のためファイルやディレクトリの名前の綴りをもう一度よく確認してみてください。あと、試しに先頭の / を取ってみるとか

退会済みユーザー

2021/07/15 09:49

ありがとうございます、ちょっと確認してみます。