Q&A
HTML
1<body> 2 <div class="container"> 3 <div class="box1">1</div> 4 <div class="box2">2</div> 5 <div class="box3">3</div> 6 <div class="box4">4</div> 7 <div class="box5">5</div> 8 </div> 9 </body>
CSS
1.container{ 2 display: grid; 3 4 grid-template-columns: repeat(5,100px); 5 grid-template-rows: repeat(4,100px); 6 7 grid-template-areas: 8 "p p p y y" 9 "r r r y y" 10 "b b r y y" 11 "b b g y y"; 12} 13.box1{ 14 background-color: pink; 15 grid-area: p; 16} 17.box2{ 18 background-color: blue; 19 grid-area: b; 20} 21.box3{ 22 background-color: red; 23 grid-area: r; 24} 25.box4{ 26 background-color: green; 27 grid-area: g; 28} 29.box5{ 30 background-color: yellow; 31 grid-area: y: 32} 33 34
回答1件
0
typoです。
css
1 grid-area: y: /* ; */
コメントを受けて追記
rがかぎ形に曲がっているのが原因では。
これらのセルが四角形を形成しない限り、宣言は無効です。
投稿2020/03/24 09:31
編集2020/03/26 00:30
総合スコア36074
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/25 12:04
2020/03/26 20:39
2020/03/27 00:23
2020/03/27 00:59
2020/03/27 01:01