CSS grid-auto-rows: 그리드 자동 생성 행 크기 설정

Baseline넓은 지원

모든 주요 브라우저가 지원하는 기능입니다.

CSS grid-auto-rows 속성은 암시적으로 생성된 그리드 행 또는 행 패턴의 크기를 설정합니다.

.grid {
  grid-auto-rows: auto;
  /* grid-auto-rows: min-content; */
  /* grid-auto-rows: 30px; */
  /* grid-auto-rows: 40px 10px; */
}

.grid {
  width: 300px;
  border: 1px solid #ccc;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30px 50px;
  gap: 8px;
  padding: 8px;
}
.item {
  background: #f0f0f0;
  color: #000;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
}
.item:nth-child(1) {
  background: #24c0a5;
  color: #fff;
}
.item:nth-child(2) {
  background: #0043ff;
  color: #fff;
}
.item:nth-child(3) {
  background: #b42809;
  color: #fff;
}
.item:nth-child(4) {
  background: #ffb800;
  color: #fff;
}

<div class="grid">
  <div class="item">1번</div>
  <div class="item">2번</div>
  <div class="item">3번</div>
  <div class="item">4번</div>
  <div class="item">5번</div>
  <div class="item">6번</div>
  <div class="item">7번</div>
  <div class="item">8번</div>
  <div class="item">9번</div>
  <div class="item">10번</div>
  <div class="item">11번</div>
</div>

불러오는 중...

그리드 아이템이 grid-template-rows로 정의된 행으로 배치되지 않을 때, 아이템을 담기 위한 암시적 그리드 행이 생성됩니다. 이는 grid-row를 행 범위 밖으로 설정하거나, 자동 배치 알고리즘이 추가 행을 생성할 때 발생할 수 있습니다.

예컨대, 위 예시의 그리드 행은 30px 50px로 두 개만 정의됐으므로 5번부터 11번 요소를 담기 위해 네 개의 암시적 행이 생성됩니다.

구문

selector {
  /* 키워드 값 */
  grid-auto-rows: min-content;
  grid-auto-rows: max-content;
  grid-auto-rows: auto;

  /* <length> 값 */
  grid-auto-rows: 100px;
  grid-auto-rows: 20cm;
  grid-auto-rows: 50vmax;

  /* <percentage> 값 */
  grid-auto-rows: 10%;
  grid-auto-rows: 33.3%;

  /* <flex> 값 */
  grid-auto-rows: 0.5fr;
  grid-auto-rows: 3fr;

  /* minmax() 값 */
  grid-auto-rows: minmax(100px, auto);
  grid-auto-rows: minmax(max-content, 2fr);
  grid-auto-rows: minmax(20%, 80vmax);

  /* fit-content() 값 */
  grid-auto-rows: fit-content(400px);
  grid-auto-rows: fit-content(5cm);
  grid-auto-rows: fit-content(20%);

  /* multiple track-size 값 */
  grid-auto-rows: min-content max-content auto;
  grid-auto-rows: 100px 150px 390px;
  grid-auto-rows: 10% 33.3%;
  grid-auto-rows: 0.5fr 3fr 1fr;
  grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
  grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

  /* 전역 값 */
  grid-auto-rows: inherit;
  grid-auto-rows: initial;
  grid-auto-rows: revert;
  grid-auto-rows: revert-layer;
  grid-auto-rows: unset;
}

값

<length>

행의 높이를 지정하는 양의 길이입니다.

<percentage>

그리드 컨테이너의 블록 크기에 상대적인 크기를 나타내는 양의 <percentage> 값입니다. 그리드 컨테이너의 크기가 트랙들의 크기에 의해 결정되는 경우라면 <percentage>는 auto로 취급됩니다.

<flex>

fr 단위를 붙인 양의 크기입니다. 트랙의 플렉스 계수를 지정합니다. 각각의 <flex> 크기 트랙들은 그리드 컨테이너의 남은 크기를 계수에 비례해 나눠가집니다.

minmax()의 매개변수가 아닌 단독 사용 시 minmax(auto, <flex>)로 해석됩니다. 즉 2fr은 minmax(auto, 2fr)과 같습니다.

max-content

그리드 트랙을 차지하는 그리드 아이템들의 최대 내용 기여 중 가장 큰 값을 나타내는 키워드입니다.

min-content

그리드 트랙을 차지하는 그리드 아이템들의 최소 내용 기여 중 가장 큰 값을 나타내는 키워드입니다.

minmax(min, max)

트랙의 크기를 min 이상 max 이하로 정의하는 함수입니다. max가 min보다 작으면 max는 무시되고 함수는 min과 같은 것으로 처리합니다. 최대 값으로 <flex>를 지정하면 트랙의 플렉스 계수를 설정합니다. 최소 값에는 <flex>를 지정할 수 없습니다.

auto

최대 크기로서 사용 시, 트랙 내 아이템들의 max-content 중 제일 큰 것을 나타냅니다.

최소 크기로서 사용 시, 트랙 내 아이템들의 최소 크기 (min-width, min-height) 중 제일 큰 것을 나타냅니다. 언제나 그런 건 아니지만 대개 min-content 크기와 같습니다.

minmax()의 매개변수가 아닌 단독 사용 시, 최대 크기로서 사용했을 때와 최소 크기로서 사용했을 때의 사이를 나타냅니다. 대부분의 경우 minmax(min-content, max-content)와 비슷하게 동작합니다.

auto 트랙 크기는 [align-content]와 [justify-content] 속성에 의해 늘어날 수 있습니다. 따라서 기본 설정에서 auto 크기의 트랙은 그리드 컨테이너의 남은 공간을 모두 차지합니다.

fit-content( [ <length> | <percentage> ] )

max(minimum, min(limit, max-content))와 같습니다. minimum은 auto 최소 값이고, limit은 fit-content()의 매개변수로 전달한 트랙 크기 함수와 같습니다. 결론적으로 minmax(auto, max-content)와 minmax(auto, limit) 중 작은 것으로 계산됩니다.

명세

CSS Grid Layout Module Level 2

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS		Android
	Safari	Chrome	Firefox	Safari	Safari WebView	Chrome	Android WebView	Firefox	Samsung Internet
`grid-auto-rows`