タイル型に並べよう
CSSグリッドを使って同じ大きさのボックスを等しい間隔で並べるタイル型レイアウトを実現できる。 (P158)
書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座では、3列2行に並べる。
親要素であるグリッドコンテナーの中に、子要素にあたるグリッドアイテムを配置する。
<body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div>
@charset "utf-8"; .container { display: grid; grid-template-columns: 200px 200px 200px; /* grid-template-columns: repeat(3, 200px); */ /* grid-template-columns: repeat(3, 1fr); */ gap: 10px; /* grid-template-rows: 20vh 50vh; */ } .item { background-color: aqua; padding: 10px; }
単位 fr
親要素から見た子要素の大きさを fr 単位で指定できる。 (P160)
fr = fraction(比率)。
grid-template-rows プロパティで行の高さを指定できる。
リセットCSS
ブラウザー毎のデフォルトCSSをリセットし表示を統一する。 (P167)
HTMLファイルの head 部で他のCSSよりも前(一番最初)に読み込ませる。
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="style.css">
