Q&A
前提・実現したいこと
CSSグリットレイアウトを使って３列３行9つのメニューのタイル型レイアウトを作っています。
header部分、コンテンツ部分（タイルレイアウト）、footer部分の構造です。
発生している問題・エラーメッセージ
全体のレイアウトからコンテンツのタイルレイアウトが飛び出して、うまく収まりません。
下記タイルレイアウトのコードと画像を添付致します。
html
<body> <div id="menu" class="big-bg"> <header class="page-header wrapper"> <h1><a hrel="index.html"><img class="logo" src="fullscreenimages/logo.svg" alt="WCBカフェ ホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">news</a></li> <li><a href="menu.html">menu</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> </header> <div class="menu-content wrapper"> <h2 class="page-title">Menu</h2> <p>体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 </p> </div> </div> <div class="wrapper grid"> <div class="item"> <img src="fullscreenimages/menu1.jpg" alt="menu1"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu2.jpg" alt="menu2"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu3.jpg" alt="menu3"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu4.jpg" alt="menu4"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu5.jpg" alt="menu5"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu6.jpg" alt="menu6"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu7.jpg" alt="menu7"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu8.jpg" alt="menu8"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu9.jpg" alt="menu9"> <p>写真キャプション写真キャプション写真キャプション</p> </div> </div> <footer> <div class="wrapper"><p><small>© 2021 shinobox</small></p></div> </footer> </body>CSS
html {
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角 Pro W3",sans-serif;
color: #432;
line-height: 1.7;
}
a {
text-decoration: none;
img {
max-width: 100%;
}
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.grid {
display: grid;
gap: 26px;
grid-template-columns: repeat(3, 1fr);
margin-top: 6%;
margin-bottom: 50px;
}
試したこと
flex boxの時は、margin: 0 auto;を設定すると解決できたのですが、
グリットレイアウトの時はどうすればよいかだいぶググりましたが、まだまだ思ったように解決できず、
時間だけが過ぎてしまい、質問させて頂きました。
ご教授いただければ幸いです。
補足情報（FW/ツールのバージョンなど）
windows10
vs code
1冊ですべてわかるHTML＆CSSとWEBデザインのchapter6-1
回答1件
0
ベストアンサー
imgのサイズを指定していなので画像のオリジナルサイズで表示されているためです。
親要素の幅になるように設定すればいいでしょう。
css
1.item > img { 2 width: 100%; 3}
投稿2021/04/03 02:11
総合スコア33782
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/03 02:17