したい事
CSSを用いてグリッドデザインを構築しようと考えております。
そこで、ブラウザの画面サイズに合わせ、要素の高さを自動で設定したいと考えております。
自分で調べていたところ、grid-auto-rows: 100vw;にすると良いと言う記事を見つけたのですが、ブラウザの画面を超えてしまいうまく出来ません。
どなたかご教授頂けますと幸いです。
宜しくお願い致します。
ソースコード
HTML
1<!doctype html> 2 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>Design Test</title> 7 <link rel="stylesheet" href="styles.css"> 8</head> 9<body> 10 11<div class="container"> 12 <div class="item box-big1">Content1</div> 13 <div class="item">Content2</div> 14 <div class="item">Content3</div> 15 <div class="item">Content4</div> 16 <div class="item">Content5</div> 17</div> 18 19</body> 20 21</html>
CSS
1.container { 2 display: grid; 3 grid-gap: 10px; 4 grid-template-columns: 1.5fr 1fr ; 5 grid-auto-rows: 10vw; 6 7} 8.item { 9 background: #ddd; 10 padding: 10px; 11 border-radius: 8px; 12 border: 3px solid #ccc; 13} 14.box-big1 { 15 grid-column: 1; 16 grid-row: 1 / 5; 17 background: #fc2; 18 border-color: #fa0; 19}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/15 14:41