こんにちは、初心者向けCSS講座 第44回目の講座です 。 前回はCSSグリッドで使える単位「fr」についてご紹介しました。 今回はグリッドアイテム(子要素)の高さを指定する「grid-template-rowsプロパティ」についてご紹介します。
目次
グリッドアイテム(子要素)の高さを指定する
grid-template-rowsプロパティ
grid-template-rowsプロパティを指定することで、各グリッドアイテムの高さを調整することができます。 列が複数ある場合には半角スペースで数値を区切り、必要な行の数だけ高さを指定します。 2行とも高さを100pxにしたい場合は「100px 100px」と半角スペースで区切り指定をします。
grid-template-rowsプロパティを使ってみよう
それでは実際にgrid-template-rowsプロパティを使って子要素に高さを指定してみましょう 。横幅の指定はfr単位を使い横に要素を３つ並べましょう。余白は10pxで指定をし、列は２列にし、高さは200pxで指定をしましょう。 HTMLサンプルコードはこちらです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<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>
</body>
</html>
次にCSSを記述します。親要素に横幅、余白、grid-template-rowsプロパティでグリッドアイテムの高さを200pxに指定します。
@charset "UTF-8";
/*親要素にgrid-template-rowsプロパティで高さを指定する*/
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
grid-template-rows: 200px 200px ;
}
/*子要素に背景色と文字色余白をつけています*/
.item {
background: #C1D9F2;
color: #5B4949;
}
ブラウザで表示すると画像の通りです。 子要素の高さが２列とも200pxで指定されたことがわかります。
実行結果
ブラウザでの実行結果はこちらで確認できます
まとめ
今回はグリッドアイテム(子要素)の高さを指定する「grid-template-rowsプロパティ」をご紹介しました。 今回で初心者向けCSS講座はすべて講座終了となりました！ 基本的な装飾の方法などを中心にご紹介をしていきましたがいかがでしたでしょうか。 また、他講座でもよろしくお願いします！
コメント