CSS - grid-auto-rows

トップ > CSSリファレンス > grid-auto-rows

概要

属性名 grid-auto-rows
grid-auto-columns
<track-size>+
値の詳細 <track-size> =
  <track-breadth> |
  minmax(<inflexible-breadth>, <track-breadth>) |
  fit-content([ <length> | <percentage> ] )
<track-breadth> = <flex> | <inflexible-breath>
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
初期値auto
適用可能要素グリッドコンテナ
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
CSS3×1652574410.1

説明

グリッドで区切られた領域のデフォルトの高さと横幅を指定します。

<length>
10rem など長さの単位で指定します。
<percentage>
30% などパーセントで指定します。
<flex>
1fr などのフレックス値を指定します。
min-content
内包するコンテンツの最小サイズを意味します。
max-content
内包するコンテンツの最大サイズを意味します。
minmax(min, max)
min 以上 max 以下の範囲で自動調整します。
fit-content(length)
内包するコンテンツのサイズが小さければそのサイズで、大きければ最大 length のサイズにします。
auto
サイズを自動調整します。

使用例

CSS
.grid-container {
  display: grid;
  grid-auto-rows: 2rem;
  grid-auto-columns: 4rem;
  grid-template-areas: "a a a";
}
.grid-item {
  border: 1px solid #ccc;
  background-color: #fff;
  text-align: center;
}
HTML
<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
</div>
表示
A
B
C
D
E
F

関連項目

リンク


Copyright (C) 2019 杜甫々
初版:2019年12月30日、最終更新:2019年12月30日
http://www.tohoho-web.com/css/prop/grid-auto-rows.htm