質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

CSS Grid grid-template 上に詰めたい

pondering
pondering

総合スコア101

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0リアクション

0クリップ

155閲覧

投稿2022/08/05 06:26

編集2022/08/05 06:50

前提

css gridで、下記のようなフッターメニューを作成しています。
PC表示の際に、メニュー1のすぐ下にメニュー2を配置したいです。(画像参照)
イメージ説明

発生している問題・試したこと

メニュー1のすぐ下にメニュー2を配置したいのですが、下記※1の行のように
具体的な数値は入れずに配置したいです。
やりたいことが、max-contentで実現できるかと思い試したのですがうまく反映されず
下記イメージのようになってしまい、困っております。
.footer__nav {
display: grid;
grid-template: 120px auto / repeat(4 ,1fr); ←※1
}
イメージ説明

該当のソースコード

HTMLとjQuery

<footer> <div class="footer__inner"> <ul class="footer__nav"> <li class="footer__nav--menu"> <a class="js-ac">メニュー1</a> <ul class="nav-child"> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> </ul> </li> <li class="footer__nav--menu"> <a class="js-ac">メニュー2</a> <ul class="nav-child"> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> </ul> </li> <li class="footer__nav--menu"><a href="">メニュー3</a></li> <li class="footer__nav--menu"> <a class="js-ac">メニュー4</a> <ul class="nav-child"> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> <li><a href="">メニュー</a></li> </ul> </li> <li class="footer__nav--menu"><a href="">メニュー5</a></li> </ul> </div> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $('.js-ac').click(function () { $(this).next().stop().slideToggle(); $(this).toggleClass('is-active'); }); </script>

該当のソースコード

CSS

/* footer */ footer { background: #000; color: #fff; } .footer__nav--menu { border-bottom: 1px solid #bbb; position: relative; } .footer__nav--menu > a { display: block; padding: 10px 30px; } .nav-child { display: none; } .nav-child li { border-top: 1px dashed #bbb; color: #bbb; padding: 10px 0; margin: 0 30px; } .footer__nav .js-ac::before, .footer__nav .js-ac::after { content: ""; position: absolute; right: 30px; top: 0.8em; width: 2px; height: 0.75em; background-color: #fff; transition: all 0.3s; } .footer__nav .js-ac::after { transform: rotate(90deg); } .footer__nav .js-ac.is-active::before { transform: rotate(90deg) !important; } @media screen and (min-width: 1025px) { .footer__inner { width: 1200px; padding: 60px 0; margin: 0 auto; } .footer__nav { display: grid; grid-template: 120px auto / repeat(4 ,1fr); } .footer__nav--menu { border-bottom: none; } .nav-child { display: block; } .js-ac { pointer-events: none; } .footer__nav li:nth-child(2) { grid-area: 2/1/3/2; } .footer__nav li:nth-child(n + 3) { grid-row: 1/3; } .footer__nav .js-accordion::before, .footer__nav .js-accordion::after { content: none; } }

↑CSS Grid勉強中のためところどころおかしいところがあるかもしれません。
お力を貸していただきたいです。よろしくお願いいたします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。