CSS 그리드 레이아웃 모듈 레벨 1

만약 이 Grid Layout Module과 Flexible Box Layout Module 사이에 불일치가 있다면, 이는 오류일 가능성이 높으므로 CSSWG에 보고해주시기 바랍니다.

1. 소개

이 섹션은 규범적이지 않습니다.

Grid Layout은 CSS에서 박스와 그 내용의 크기 및 위치를 강력하게 제어할 수 있는 새로운 레이아웃 모델입니다. Flexible Box Layout이 단일 축 중심인 것과 달리, Grid Layout은 2차원 레이아웃에 최적화되어 있습니다: 즉, 콘텐츠의 정렬이 두 축 모두에서 필요한 경우에 적합합니다.

또한, 그리드에서 아이템을 명시적으로 배치할 수 있는 기능 덕분에, Grid Layout은 마크업을 변경하지 않고도 시각적 레이아웃 구조를 극적으로 변형할 수 있습니다. 미디어 쿼리와 그리드 컨테이너 및 자식의 레이아웃을 제어하는 CSS 속성을 결합하면, 작성자는 기기 폼팩터, 방향, 사용 가능한 공간의 변화에 따라 레이아웃을 적응시키면서도 프레젠테이션 간에 더 이상적인 내용의 의미 구조를 유지할 수 있습니다.

많은 레이아웃은 Grid나 Flexbox 모두로 표현할 수 있지만, 각각의 장점이 있습니다. Grid는 2차원 정렬을 강제하며, 레이아웃에 top-down 접근법을 사용하고, 아이템의 명시적 중첩이 가능하며, 더 강력한 스팬 기능을 제공합니다. Flexbox는 축 내 공간 분배에 집중하며, 더 간단한 bottom-up 접근법을 사용하고, 보조 축 제어에 콘텐츠 크기 기반 줄바꿈 시스템을 사용할 수 있으며, 복잡한 레이아웃을 만들 때 기본 마크업 계층에 의존합니다. 두 모델 모두 CSS 작성자에게 유용하고 상호 보완적인 도구가 될 것으로 예상됩니다.

1.1. 배경 및 동기

웹사이트가 단순 문서에서 복잡한 인터랙티브 애플리케이션으로 진화하면서, 플로트와 같은 문서 레이아웃 기법이 애플리케이션 레이아웃에는 적합하지 않았습니다. 테이블, 자바스크립트, 혹은 플로트 요소의 치수를 정교하게 제어하는 등의 방법을 조합하여 작성자는 원하는 레이아웃을 얻기 위한 우회책을 찾았습니다. 사용 가능한 공간에 적응하는 레이아웃은 종종 취약하며 공간이 제한될 때 직관적이지 않은 동작을 야기하곤 했습니다. 대안으로, 많은 웹 애플리케이션 작성자는 화면의 렌더링 공간 변화에 대응하지 못하는 고정 레이아웃을 선택하기도 했습니다.

그리드 레이아웃의 기능은 이러한 문제를 해결합니다. 예측 가능한 크기 조정 동작을 통해 레이아웃을 위한 공간을 행과 열로 나누는 메커니즘을 제공합니다. 작성자는 애플리케이션의 구성 요소를 이 행과 열의 교차점에서 정의된 그리드 영역에 정확하게 배치하고 크기를 지정할 수 있습니다. 다음 예시들은 그리드 레이아웃의 적응 기능과 내용과 스타일의 더 깔끔한 분리를 보여줍니다.

1.1.1. 사용 가능한 공간에 맞춘 레이아웃

그리드 레이아웃을 사용하면 웹페이지 내에서 요소의 크기를 지능적으로 조정할 수 있습니다. 옆 그림들은 게임 레이아웃의 주요 5개 구성 요소(게임 타이틀, 통계 영역, 게임 보드, 점수 영역, 컨트롤 영역)를 보여줍니다. 작성자가 공간을 나누는 목적은 다음과 같습니다:

• 통계 영역은 항상 게임 타이틀 바로 아래에 표시됩니다.
• 게임 보드는 통계 및 타이틀 오른쪽에 나타납니다.
• 게임 타이틀과 게임 보드의 상단은 항상 정렬되어야 합니다.
• 게임의 최소 높이에 도달하면 게임 보드의 하단과 통계 영역의 하단이 정렬됩니다. 그 외 경우에는 게임 보드가 사용 가능한 모든 공간을 차지하도록 늘어납니다.
• 컨트롤은 게임 보드 아래에 가운데 정렬됩니다.
• 점수 영역의 상단은 컨트롤 영역의 상단과 정렬됩니다.
• 점수 영역은 통계 영역 아래에 있습니다.
• 점수 영역은 통계 영역 아래의 컨트롤과 정렬됩니다.

다음 그리드 레이아웃 예시는 작성자가 모든 크기 지정, 배치, 정렬 규칙을 선언적으로 달성하는 방법을 보여줍니다.

/**
 * 각 그리드 아이템의 공간을 그리드 선언으로 지정
 * 그리드 컨테이너에 선언
 */
#grid {
  /**
   * 두 열:
   *  1. 첫 번째는 내용에 맞게 크기 지정,
   *  2. 두 번째는 남은 공간을 차지
   *     (단, 보드나 게임 컨트롤의 최소 크기보다 작아지지 않음 [그림 4])
   *
   * 세 행:
   *  3. 첫 번째는 내용에 맞게 크기 지정,
   *  4. 중간 행은 남은 공간을 차지
   *     (단, 보드나 통계 영역의 최소 높이보다 작아지지 않음)
   *  5. 마지막은 내용에 맞게 크기 지정.
   */
  display: grid;
  grid-template-columns:
    /* 1 */ auto
    /* 2 */ 1fr;
  grid-template-rows:
    /* 3 */ auto
    /* 4 */ 1fr
    /* 5 */ auto;
}

/* 각 그리드 아이템의 위치를 'grid-row'와 'grid-column' 속성으로 지정
 * 각 그리드 아이템에 좌표로 지정
 */
#title    { grid-column: 1; grid-row: 1; }
#score    { grid-column: 1; grid-row: 3; }
#stats    { grid-column: 1; grid-row: 2; align-self: start; }
#board    { grid-column: 2; grid-row: 1 / span 2; }
#controls { grid-column: 2; grid-row: 3; justify-self: center; }

<div id="grid">
  <div id="title">게임 타이틀</div>
  <div id="score">점수</div>
  <div id="stats">통계</div>
  <div id="board">보드</div>
  <div id="controls">컨트롤</div>
</div>

참고: 그리드의 구조를 지정하고 그리드 아이템의 위치와 크기를 지정하는 방법은 여러 가지가 있으며, 각각의 시나리오에 맞게 최적화되어 있습니다.

1.1.2. 소스 순서 독립성

이전 예시를 계속해서, 작성자는 게임이 다양한 기기에 적응하길 원합니다. 또한 게임의 구성 요소가 세로 또는 가로 방향(그림 6, 7)에서 최적의 위치에 배치되길 바랍니다. 그리드 레이아웃과 미디어 쿼리를 결합하면, 작성자는 동일한 의미적 마크업을 사용하면서 원하는 레이아웃을 두 방향 모두에서 소스 순서와 무관하게 재배치할 수 있습니다.

다음 예시는 그리드 레이아웃의 기능 중 그리드 아이템이 차지할 공간에 이름을 지정하는 기능을 사용합니다. 이를 통해 작성자는 그리드 정의가 변경될 때 그리드 아이템의 규칙을 다시 작성하지 않아도 됩니다.

@media (orientation: portrait) {
  #grid {
    display: grid;

    /* 그리드의 행, 열, 영역은 grid-template-areas 속성을 시각적으로 사용하여 정의합니다. 각 문자열은 행, 각 단어는 영역을 의미합니다. 문자열 내 단어 수가 열 개수를 결정하며, 각 문자열의 단어 수는 동일해야 합니다. */
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";

    /* 열과 행의 크기는 grid-template-columns와 grid-template-rows 속성으로 지정합니다. */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
}

@media (orientation: landscape) {
  #grid {
    display: grid;

    /* 동일한 이름의 영역을 다시 template 속성으로 정의하지만, 이번에는 가로 방향에 더 잘 맞게 다르게 배치합니다. */
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";

    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
  }
}

/* grid-area 속성으로 그리드 아이템을 이름이 지정된 영역에 배치합니다. */
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

<div id="grid">
  <div id="title">게임 타이틀</div>
  <div id="score">점수</div>
  <div id="stats">통계</div>
  <div id="board">보드</div>
  <div id="controls">컨트롤</div>
</div>

참고: 그리드 레이아웃의 재정렬 기능은 오직 시각적 렌더링에만 영향을 주도록 설계되어, 소스 순서를 기반으로 한 음성 순서나 탐색에는 영향을 주지 않습니다. 이 덕분에 작성자는 시각적 표현을 조작하면서도 소스 순서를 유지할 수 있고, CSS를 사용하지 않는 사용자 에이전트나 음성 및 순차 탐색 같은 선형 모델에도 최적화할 수 있습니다.

그리드 아이템 배치 및 재정렬은 올바른 소스 순서의 대체 수단으로 사용하면 안 됩니다. 그렇게 하면 문서의 접근성이 저하될 수 있습니다.

1.2. 값 정의

이 명세는 CSS2의 CSS 속성 정의 규약과 [CSS2] 그리고 CSS-VALUES-3의 값 정의 문법을 따릅니다. 이 명세에서 정의되지 않은 값 타입들은 CSS 값 및 단위 [CSS-VALUES-3]에 정의되어 있습니다. 다른 CSS 모듈과 조합될 경우 이러한 값 타입들의 정의가 확장될 수 있습니다.

각 속성 정의에 나열된 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 CSS 전역 키워드도 속성 값으로 허용합니다. 가독성을 위해 이 내용은 명시적으로 반복하지 않았습니다.

2. 개요

이 섹션은 규범적이지 않습니다.

그리드 레이아웃은 grid라는 수평선과 수직선이 교차하는 집합을 활용하여 그리드 컨테이너(grid container)의 콘텐츠의 크기와 위치를 결정하는 좌표계를 만들어 배치합니다. 그리드 레이아웃의 기능은 다음과 같습니다.

• 고정, 유연, 콘텐츠 기반 트랙 크기 지정 함수
• 숫자 그리드 좌표(앞/뒤), 그리드 선 이름, 영역 이름을 통한 명시적 아이템 배치; 빈 영역에 자동 아이템 배치, order로 재정렬 포함
• 공간에 따라 트랙 반복, 콘텐츠가 추가될 때 행 또는 열을 자동으로 추가
• 마진, 구터, 정렬 속성으로 정렬 및 간격 제어
• 콘텐츠 중첩 및 z-index로 레이어 제어 가능

그리드 컨테이너는 더 복잡한 레이아웃을 위해 필요에 따라 중첩하거나 플렉스 컨테이너와 혼합할 수 있습니다.

2.1. 그리드 선언

트랙(행과 열)은 그리드에서 명시적 그리드 속성으로 선언 및 크기 지정하거나, 아이템이 명시적 그리드 밖에 배치될 때 암묵적으로 생성됩니다. grid 단축 속성과 하위 속성들이 그리드의 파라미터를 정의합니다. § 7 그리드 정의

2.2. 아이템 배치

그리드 컨테이너의 내용은 개별 그리드 아이템으로 구성되며(이는 플렉스 아이템과 유사함), 이 아이템들은 미리 정의된 영역에 그리드 내에 배치됩니다. 좌표를 이용한 grid-placement 속성으로 명시적으로 배치할 수 있고, auto-placement를 통해 비어 있는 영역에 암시적으로 배치할 수도 있습니다. § 8 그리드 아이템 배치

grid-area: a;          /* 이름이 지정된 그리드 영역 “a”에 배치     */
grid-area: auto;       /* 다음 빈 영역에 자동 배치                */
grid-area: 2 / 4;      /* 2행 4열에 배치                          */
grid-area: 1 / 3 / -1; /* 3열 전체 행 스팬                        */
grid-area: header-start / sidebar-start / footer-end / sidebar-end;
                       /* 이름이 지정된 선을 사용하여 배치         */

grid-row: a;                         grid-column: a;
grid-row: auto;                      grid-column: auto;
grid-row: 2;                         grid-column: 4;
grid-row: 1 / -1;                    grid-column: 3;
grid-row: header-start / footer-end; grid-column: sidebar-start / sidebar-end;

grid-area: a;
/* grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; 와 동일 */

grid-area: 1 / 3 / -1;
/* grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; 와 동일 */

2.3. 그리드 크기 지정

그리드 아이템이 배치된 후, 그리드 트랙(행과 열)의 크기가 그리드 정의에 명시된 내용 크기 및/또는 사용 가능한 공간을 고려하여 계산됩니다.

계산된 그리드는 정렬되어 그리드 컨테이너 내에서 그리드 컨테이너의 align-content 및 justify-content 속성에 따라 배치됩니다. § 10 정렬 및 간격

main {
  display: grid;
  grid: auto-flow auto / repeat(auto-fill, 5em);
  min-height: 100vh;
  justify-content: space-between;
  align-content: safe center;
}

마지막으로 각 그리드 아이템은 할당된 그리드 영역 내에서 자신의 크기 지정 [CSS2] 및 정렬 속성 [CSS-ALIGN-3]에 따라 크기와 정렬이 지정됩니다.

3. 그리드 레이아웃 개념 및 용어

그리드 레이아웃에서 그리드 컨테이너의 콘텐츠는 그리드에 위치시키고 정렬하여 배치됩니다. 그리드는 수평 및 수직 그리드 선이 교차하여 그리드 컨테이너의 공간을 그리드 영역으로 나누며, 이 영역에 그리드 아이템(즉, 그리드 컨테이너의 콘텐츠)을 배치할 수 있습니다. 그리드 선은 두 집합이 있습니다: 하나는 열을 정의하며, 블록 축을 따라 배치되고, 다른 하나는 직교하는 집합으로 행을 정의하며, 인라인 축을 따라 배치됩니다. [CSS3-WRITING-MODES]

3.1. 그리드 선

그리드 선은 그리드의 수평 및 수직 구분선입니다. 그리드 선은 각 열이나 행의 양쪽에 존재합니다. 숫자 인덱스나 작성자가 지정한 이름으로 참조할 수 있습니다. 그리드 아이템은 그리드 선을 참조하여 그리드 내에서 자신의 위치를 그리드 배치 속성으로 결정합니다.

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

#item1 { grid-column: 2;
         grid-row-start: 1; grid-row-end: 4; }

/* 이전 예시와 동일한 레이아웃이지만, 이름이 지정된 선을 사용함 */
#grid {
  display: grid;
  grid-template-columns: 150px [item1-start] 1fr [item1-end];
  grid-template-rows: [item1-start] 50px 1fr 50px [item1-end];
}

#item1 {
  grid-column: item1-start / item1-end;
  grid-row: item1-start / item1-end;
}

3.2. 그리드 트랙과 셀

그리드 트랙은 그리드 열 또는 그리드 행을 의미하는 일반 용어입니다. 즉, 인접한 두 그리드 선 사이의 공간입니다. 각 그리드 트랙에는 크기 지정 함수가 할당되어, 열이나 행의 너비 또는 높이가 얼마나 커질 수 있는지, 즉 경계 그리드 선이 얼마나 멀리 떨어질 수 있는지를 제어합니다. 인접한 그리드 트랙은 구터로 분리할 수 있지만, 그렇지 않으면 밀접하게 배치됩니다.

그리드 셀은 그리드 행과 그리드 열의 교차점입니다. 그리드 아이템을 배치할 때 참조할 수 있는 가장 작은 단위입니다.

#grid {
  display: grid;
  grid-template-columns: 150px 1fr;  /* 두 열 */
  grid-template-rows: 50px 1fr 50px; /* 세 행 */
}

3.3. 그리드 영역

그리드 영역은 하나 이상의 그리드 아이템을 배치하는 데 사용되는 논리적 공간입니다. 그리드 영역은 하나 이상의 인접한 그리드 셀로 구성됩니다. 네 개의 그리드 선으로 경계가 정해지며, 그리드 영역의 각 면에 하나씩 있습니다. 그리고 이 영역이 교차하는 그리드 트랙의 크기 지정에 참여합니다. 그리드 영역은 grid-template-areas 속성으로 명시적으로 이름을 지정할 수 있고, 경계 그리드 선으로 암묵적으로 참조할 수도 있습니다. 그리드 아이템은 그리드 배치 속성으로 그리드 영역에 할당됩니다.

/* 템플릿 문법 사용 */
#grid  {
  display: grid;
  grid-template-areas: ". a"
                       "b a"
                       ". a";
  grid-template-columns: 150px 1fr;
  grid-template-rows: 50px 1fr 50px;
  height: 100vh;
}

#item1 { grid-area: a }
#item2 { grid-area: b }
#item3 { grid-area: b }

/* 아이템 2와 3을 그리드 영역 "b"의 다른 지점에 정렬합니다.  */
/* 기본적으로 그리드 아이템들은 그리드 영역에 맞게 늘어나며 */
/* 이 아이템들은 서로 겹쳐지게 됩니다. */
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }

그리드 아이템의 그리드 영역은 그 아이템이 배치되는 포함 블록을 형성합니다. 동일한 그리드 영역에 배치된 그리드 아이템들은 서로의 레이아웃에 직접적으로 영향을 주지 않습니다. 하지만 간접적으로, 그리드 아이템이 그리드 트랙에서 내재적 크기 지정 함수를 사용하면, 해당 트랙의 크기(즉, 경계 그리드 선의 위치)에 영향을 줄 수 있고, 이것이 또 다른 그리드 아이템의 위치나 크기에 영향을 줄 수 있습니다.

4. 순서 변경과 접근성

그리드 레이아웃은 작성자에게 문서의 재배치에 대한 강력한 기능을 제공합니다. 그러나 이것은 문서 소스의 올바른 순서를 대체하는 것이 아닙니다. order 속성과 grid placement는 비시각적 미디어 (예: 음성)의 순서에는 영향을 주지 않습니다. 마찬가지로, 그리드 아이템을 시각적으로 재배열하더라도 기본적인 순차 탐색 모드의 진행 순서에는 영향을 주지 않습니다 (예: 링크를 순환할 때, 예시는 tabindex [HTML] 참고).

작성자는 order와 grid-placement 속성을 오직 시각적(비논리적) 순서 변경에만 사용해야 합니다. 이러한 기능을 논리적 순서 변경에 사용하는 스타일 시트는 표준을 준수하지 않습니다.

참고: 이것은 비시각적 미디어와 비CSS UA가 일반적으로 콘텐츠를 선형적으로 표시하므로, 논리적인 소스 순서를 신뢰할 수 있도록 하기 위함입니다. 그리드 레이아웃의 배치 및 순서 속성은 시각적 배열을 맞추는 데 사용합니다. (시각적 인지는 2차원, 비선형이므로 원하는 시각적 순서가 항상 원하는 읽기 순서와 같지는 않습니다.)

많은 웹 페이지의 마크업은 비슷한 형태를 가지고 있습니다. 위에는 헤더, 아래에는 푸터, 가운데에는 콘텐츠 영역과 추가 컬럼 하나 또는 두 개가 있습니다. 일반적으로, 콘텐츠가 페이지 소스 코드에서 추가 컬럼보다 먼저 오는 것이 바람직합니다. 그러나 이렇게 하면, 추가 컬럼이 왼쪽에 있고 콘텐츠 영역이 오른쪽에 있는 등 흔한 디자인을 만들기 어렵습니다. 이런 문제는 여러 방법으로 해결되었으며, 두 개의 추가 컬럼이 있을 때는 "Holy Grail Layout"이라고도 불렸습니다. 그리드 레이아웃에서는 이런 예제가 아주 쉽게 구현됩니다. 예를 들면, 다음은 페이지 코드와 원하는 레이아웃의 스케치입니다:

<!DOCTYPE html>
<header>...</header>
<main>...</main>
<nav>...</nav>
<aside>...</aside>
<footer>...</footer>

이 레이아웃은 그리드 레이아웃으로 쉽게 구현할 수 있습니다:

body { display: grid;
       grid: "h h h"
             "a b c"
             "f f f";
       grid-template-columns: auto 1fr 20%; }
main    { grid-area: b; min-width: 12em;     }
nav     { grid-area: a; /* auto min-width */ }
aside   { grid-area: c; min-width: 12em;     }

추가로, 컬럼들은 기본적으로 모두 동일 높이가 되고, 메인 콘텐츠는 화면을 채울 만큼 넓어집니다. 또한, 미디어 쿼리와 결합하여 좁은 화면에서는 모두 세로 방향 레이아웃으로 전환할 수 있습니다:

@media all and (max-width: 60em) {
  /* 세 컬럼을 지원하기에는 너무 좁음 */
  body { display: block; }
}

작성자의 의도한 순서를 모든 프레젠테이션 모드에서 보존하기 위해, 저작 도구(예: WYSIWYG 에디터, 웹 기반 저작 도구)는 반드시 기본 문서 소스를 재배열해야 하며, 작성자가 명시적으로 기본 문서 순서(음성 및 탐색 순서를 결정함)가 시각적 순서와 동기화되지 않게 하도록 지정하지 않는 한, order나 grid-placement 속성으로 순서 변경을 하면 안 됩니다.

5. 그리드 컨테이너

5.1. 그리드 컨테이너 생성: grid 및 inline-grid display 값

grid

이 값은 요소가 그리드 컨테이너 박스를 생성하게 하며, 플로우 레이아웃에 배치될 때 블록 레벨입니다.

inline-grid

이 값은 요소가 그리드 컨테이너 박스를 생성하게 하며, 플로우 레이아웃에 배치될 때 인라인 레벨입니다.

그리드 컨테이너는 자식에게 독립적인 그리드 포맷 컨텍스트를 생성합니다. 이는 독립적인 블록 포맷 컨텍스트를 생성하는 것과 같지만, 블록 레이아웃 대신 그리드 레이아웃이 사용됩니다: float는 그리드 컨테이너에 침범하지 않으며, 그리드 컨테이너의 마진은 자식의 마진과 겹치지 않습니다. 그리드 컨테이너의 콘텐츠는 그리드에 배치되며, 그리드 선이 각 그리드 아이템의 포함 블록 경계를 형성합니다.

그리드 컨테이너는 블록 컨테이너가 아니며, 블록 레이아웃을 전제로 설계된 일부 속성은 그리드 레이아웃에서는 적용되지 않습니다. 특히:

• float와 clear는 그리드 아이템에 아무런 효과가 없습니다. 단, float 속성은 여전히 display의 계산값에 영향을 주는데, 이는 그리드 아이템이 결정되기 전에 일어납니다.
• vertical-align은 그리드 아이템에 효과가 없습니다.
• ::first-line과 ::first-letter 가상 요소는 그리드 컨테이너에 적용되지 않으며, 그리드 컨테이너는 조상에 첫 포맷 라인이나 첫 글자를 제공하지 않습니다.

요소의 지정된 display가 inline-grid이고, 요소가 float되었거나 절대 위치라면, display의 계산값은 grid가 됩니다. CSS 2.1 9.7장의 표에는 "지정값" 컬럼에 inline-grid, "계산값" 컬럼에 grid가 포함된 행이 추가됩니다.

5.2. 그리드 컨테이너 크기 지정

용어 정의는 [CSS-SIZING-3]를 참고하세요.

그리드 컨테이너는 자신이 포함된 포맷 컨텍스트의 규칙에 따라 크기 지정됩니다:

• 블록 레벨 박스로 블록 포맷 컨텍스트 내에 있을 때, 포맷 컨텍스트를 생성하는 블록 박스와 같이 크기가 지정되며, auto 인라인 크기는 일반 블록 박스와 동일하게 계산됩니다.
• 인라인 포맷 컨텍스트 내의 인라인 레벨 박스일 때는 인라인 블록 등과 같은 원자적 인라인 레벨 박스로 크기 지정됩니다.

블록 및 인라인 포맷 컨텍스트 모두에서, 그리드 컨테이너의 auto 블록 크기는 max-content 크기입니다.

블록 레이아웃 명세에서 정의해야 할 내용이지만, 아직 작성되지 않았습니다.

max-content 크기(min-content 크기)는 그리드 컨테이너의 트랙 크기(구터 포함) 합계이며, 해당 축에서 그리드가 max-content 제약(min-content 제약) 하에서 크기 지정될 때 계산됩니다.

5.3. 스크롤 가능한 그리드 오버플로우

overflow 속성은 그리드 컨테이너에 적용됩니다.

내재적 크기 지정에 포함되듯이(§ 5.2 그리드 컨테이너 크기 지정 참조), 그리드 역시 그리드 컨테이너의 스크롤 가능한 오버플로우 영역에 포함됩니다.

참고: 그리드 컨테이너가 스크롤 컨테이너일 때 패딩 처리에 주의하세요: 스크롤 가능한 콘텐츠의 place-content: end 정렬을 가능하게 하기 위해 필요한 경우 스크롤 가능한 오버플로우 사각형에 추가 패딩이 정의되어 있습니다. 자세한 내용은 CSS Overflow 3 § 2.2 스크롤 가능한 오버플로우를 참조하세요.

5.4. 대형 그리드 제한

메모리가 제한되어 있으므로, UA는 암묵적 그리드의 가능한 크기를 UA에서 정한 한도 내로 제한할 수 있습니다 ([-10000, 10000] 범위의 선을 허용해야 함), 한도를 넘는 모든 선은 제거됩니다. 그리드 아이템이 이 한도를 벗어나 배치되면, 해당 그리드 영역은 클램프되어 제한된 그리드 내에 포함되어야 합니다.

그리드 영역을 클램프한다는 것은:

• 그리드 영역이 제한된 그리드 영역을 스팬하여 벗어나게 되면, 스팬은 제한된 그리드의 마지막 선까지 클램프됩니다.

• 그리드 영역이 제한된 그리드 외부에 완전히 배치되면, 스팬은 1로 잘리고 해당 영역은 그리드의 해당 측 마지막 그리드 트랙으로 재배치되어야 합니다.

.grid-item {
  grid-row: 500 / 1500;
  grid-column: 2000 / 3000;
}

.grid-item {
  grid-row: 500 / 1001;
  grid-column: 1000 / 1001;
}

6. 그리드 아이템

대략적으로, 그리드 아이템은 그리드 컨테이너의 흐름에 있는(in-flow) 콘텐츠를 나타내는 박스입니다.

흐름에 있는 그리드 컨테이너 자식은 모두 그리드 아이템이 되며, 각 자식 텍스트 시퀀스는 익명 블록 컨테이너 그리드 아이템으로 감싸집니다. 단, 텍스트 시퀀스가 공백 문자만 포함하는 경우 (white-space 속성에 의해 영향을 받는 문자), 해당 시퀀스는 렌더링되지 않습니다(마치 텍스트 노드가 display:none인 것처럼).

<div style="display: grid">

  <!-- 그리드 아이템: 블록 자식 -->
  <div id="item1">block</div>

  <!-- 그리드 아이템: float된 요소; float는 무시됨 -->
  <div id="item2" style="float: left;">float</div>

  <!-- 그리드 아이템: 인라인 콘텐츠를 감싼 익명 블록 박스 -->
  anonymous item 3

  <!-- 그리드 아이템: 인라인 자식 -->
  <span>
    item 4
    <!-- 그리드 아이템은 블록 주변에서 분할되지 않음 -->
    <q style="display: block" id=not-an-item>item 4</q>
    item 4
  </span>
</div>

참고: 요소 간 공백은 사라진다: 자체 그리드 아이템이 되지 않으며, 요소 간 텍스트는 익명의 그리드 아이템으로 감싸지더라도 그렇다.

참고: 익명 아이템의 박스는 스타일을 지정할 수 없으며, 스타일 규칙을 적용할 요소가 없기 때문이다. 그러나 콘텐츠는 그리드 컨테이너로부터 스타일(예: 폰트 설정)을 상속받습니다.

6.1. 그리드 아이템 표시

그리드 아이템은 자식에 대해 독립적인 포맷 컨텍스트를 생성합니다. 그러나 그리드 아이템은 그리드 레벨 박스이며, 블록 레벨 박스가 아닙니다: 그리드 아이템은 컨테이너의 그리드 포맷 컨텍스트에 참여하며, 블록 포맷 컨텍스트에는 참여하지 않습니다.

가장 가까운 조상 요소(단, display:contents 조상은 건너뜀)의 계산된 display 값이 grid 또는 inline-grid이면, 해당 요소의 display 값은 블록화됩니다. (이 display 값 변환에 대한 자세한 내용은 CSS2.1§9.7 [CSS2] 및 CSS Display 3 § 2.7 박스 타입 자동 변환 참조.)

참고: grid 또는 inline-grid 요소가 그리드 컨테이너 박스를 생성하지 않는 경우에도(예: 치환 요소이거나 display: none 서브트리일 때) 블록화는 여전히 발생합니다.

참고: display의 일부 값은 원래 박스 주변에 익명 박스 생성을 유발합니다. 이런 박스가 그리드 아이템이면, 먼저 블록화되고, 따라서 익명 박스 생성은 일어나지 않습니다. 예를 들어, 그리드 아이템 둘이 display: table-cell이면, 하나의 익명 테이블에 감싸지지 않고 각각 display: block 그리드 아이템이 됩니다.

6.2. 그리드 아이템 크기 지정

그리드 아이템은 자신의 그리드 영역에서 정의된 포함 블록 내에서 크기가 지정됩니다.

주어진 축에서 그리드 아이템의 자동 크기 계산은 self-alignment 값에 따라 달라집니다:

normal

그리드 아이템에 선호하는 종횡비가 없고, 해당 축에 자연 크기(치환 요소인 경우)가 없다면, align-self: stretch로 크기 지정됩니다.

그렇지 않으면, 그리드 아이템은 해당 축의 블록 레벨 요소의 크기 계산 규칙에 따라 크기가 지정됩니다. (자세한 내용은 CSS 2 § 10 시각적 포맷 모델 세부사항 참조.)

stretch

치환되지 않은 박스의 인라인 크기 계산 규칙을 사용합니다 (CSS 2 § 10.3.3 블록 레벨, 치환되지 않은 요소의 일반 흐름에서 정의), 즉 stretch-fit size를 사용합니다.

참고: 만약 아이템이 선호하는 종횡비를 가지고 있고, 다른 축에도 크기 제한이 있다면 종횡비가 왜곡될 수 있습니다.

그 외 모든 값

아이템을 fit-content로 크기 지정합니다.

참고: auto 값의 min-width와 min-height는 해당 축에서 트랙 크기 지정에 영향을 주며, 플렉스 아이템의 주요 크기에 영향을 주는 방식과 유사합니다. 자세한 내용은 § 6.6 그리드 아이템의 자동 최소 크기를 참고하세요.

6.3. 순서 변경된 그리드 아이템: order 속성

order 속성은 그리드 아이템에도 적용됩니다. 자동 배치와 페인팅 순서에 영향을 줍니다.

플렉스 아이템의 순서 변경과 마찬가지로, order 속성은 시각적 순서가 음성 및 탐색 순서와 동기화되지 않게 해야 할 때만 사용해야 하며; 그렇지 않으면 기본 문서 소스를 재배열해야 합니다. 자세한 내용은 CSS Flexbox 1 § 5.4.1 순서 변경과 접근성 [CSS-FLEXBOX-1] 참고.

6.4. 그리드 아이템 마진과 패딩

인접한 그리드 아이템들은 각각 자신의 그리드 영역에서 형성된 포함 블록에 독립적으로 포함되므로, 인접한 그리드 아이템의 마진은 겹침(collapsing)이 일어나지 않습니다.

그리드 아이템의 백분율 마진과 패딩은 블록 박스와 마찬가지로, 자신이 속한 인라인 크기에 대해 계산됩니다. 예를 들어 왼쪽/오른쪽/위/아래 백분율 모두, 수평 쓰기 모드에서는 포함 블록의 너비 기준으로 계산됩니다.

auto 마진은 해당 축의 여분 공간을 흡수하도록 확장되며, 따라서 정렬에 사용할 수 있습니다. 자세한 내용은 § 10.2 auto 마진을 사용한 정렬을 참고하세요.

6.5. Z축 순서: z-index 속성

그리드 아이템들은 서로 겹칠 수 있는데, 교차하는 그리드 영역에 배치되거나, 음수 마진 또는 포지셔닝 등으로 인해 교차하지 않는 영역에서도 겹칠 수 있습니다. 그리드 아이템의 페인팅 순서는 인라인 블록과 정확히 동일하며 [CSS2], 단, 원본 문서 순서 대신 order-modified document order가 사용됩니다. 또한 z-index 값이 auto가 아니면, position이 static이어도(실제로 position이 relative인 것처럼 동작) stacking context가 생성됩니다. 따라서 z-index 속성으로 그리드 아이템의 Z축 순서를 쉽게 제어할 수 있습니다.

참고: 그리드 아이템 바깥에 위치한 자손도 그리드 아이템이 만든 stacking context에 참여합니다.

다음 그림은 여러 그리드 아이템이 겹치는 모습을 보여주며, 암묵적 소스 순서와 명시적 z-index를 조합하여 stacking 순서를 제어합니다.

<style type="text/css">
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}
#A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
#B { grid-column: 1; grid-row: 1; z-index: 10; }
#C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
#E { grid-column: 1 / span 2; grid-row: 1 / span 2;
     z-index: 5; justify-self: center; align-self: center; }
</style>

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>

6.6. 그리드 아이템의 자동 최소 크기

참고: 이 섹션(및 명세 전체)에서 사용되는 크기 지정 용어의 대부분은 CSS 본질적 및 외부 크기 지정 [CSS-SIZING-3]에서 정의되어 있습니다.

최소 크기의 보다 합리적인 기본값을 그리드 아이템에 제공하기 위해, 특정 축에서 자동 최소 크기의 사용값은 아래 모든 조건을 만족하면 콘텐츠 기반 최소 크기가 됩니다:

• 계산된 overflow가 스크롤 가능한 오버플로우 값이 아닐 때

• 해당 축에서 하나 이상의 트랙을 스팬하며, 그 트랙의 최소 트랙 크기 지정 함수가 auto일 때

• 해당 축에서 둘 이상의 트랙을 스팬할 경우, 그 트랙 중에 유연 트랙(flexible)이 없어야 합니다.

그 외의 경우에는 자동 최소 크기가 일반적으로 0입니다.

참고: 콘텐츠 기반 최소 크기는 본질적 크기 기여의 한 종류이므로, CSS Sizing 3 § 5.2 본질적 기여의 규정이 적용됩니다.

콘텐츠 기반 최소 크기는 특정 차원에서 그리드 아이템의 지정 크기 제안이 있으면 그것을 사용하고, 없으면 전이 크기 제안이 있고 그 요소가 치환 요소일 때 그것을 사용합니다. 그렇지 않으면 콘텐츠 크기 제안을 사용합니다(아래 참조). 단, 특정 차원에서 그리드 아이템이 고정 트랙(고정 최대 트랙 크기 지정 함수)만 스팬하는 경우, 해당 차원의 지정 크기 제안 및 콘텐츠 크기 제안(그리고 반대 차원의 전이 크기 제안으로의 입력)은 해당 차원에서 stretch fit으로 그리드 영역의 최대 크기 이하로 클램프됩니다. 즉, 해당 트랙의 최대 트랙 크기 지정 함수의 합과 사이의 고정 구터를 더한 값 이하로 제한됩니다.

모든 경우에, 크기 제안은 해당 축의 최대 크기가 확정적(definite)이면 추가로 클램프됩니다. 만약 아이템이 압축 가능한 치환 요소이고, 해당 축에 확정적 선호 크기나 최대 크기가 있다면, 크기 제안은 해당 크기 값으로 제한됩니다. 이때 해당 크기 내에 불확정적 백분율이 있으면 0으로 처리되어 확정적으로 간주됩니다.

참고: fit-content()의 인수는 콘텐츠 기반 최소 크기를 고정 최대 트랙 크기 지정 함수와 같은 방식으로 클램프하지 않습니다.

콘텐츠 크기 제안, 지정 크기 제안, 전이 크기 제안은 이 계산에서 관련 min/max/선호 크기 속성 값을 반영하여, 콘텐츠 기반 최소 크기가 작성자가 지정한 제약 조건을 방해하지 않도록 하며, 아래와 같이 정의됩니다:

지정 크기 제안

해당 축의 선호 크기가 확정적이면, 지정 크기 제안은 해당 크기입니다. 그렇지 않으면 정의되지 않습니다.

전이 크기 제안

아이템에 선호하는 종횡비가 있고, 반대 축의 선호 크기가 확정적이면, 전이 크기 제안은 그 크기(반대 축의 최소, 최대 크기가 확정적이면 그 값으로 클램프됨)를 종횡비로 변환한 값입니다. 그렇지 않으면 정의되지 않습니다.

아이템에 해당 축의 확정적 선호 크기 또는 최대 크기가 있다면, 전이 크기 제안은 그 값으로 제한됩니다; 이때 해당 값에 불확정적 백분율이 있으면 0으로 처리되어 확정적으로 간주합니다.

콘텐츠 크기 제안

콘텐츠 크기 제안은 해당 축의 min-content 크기이며, 선호하는 종횡비가 있으면 반대 축의 확정적 최소, 최대 크기 값을 종횡비로 변환한 값으로 추가로 클램프됩니다.

박스의 본질적 크기를 계산할 목적(예: 박스의 min-content 크기)에서는, 콘텐츠 기반 최소 크기가 그 축의 박스 크기를 불확정적으로 만듭니다 (예: width 속성이 확정적 크기여도). 즉, 이 크기를 기준으로 계산되는 백분율은 auto처럼 동작합니다.

본질적 크기 계산 외의 목적에서는, 콘텐츠 기반 최소 크기(명시적 min-content/etc 최소 크기와 달리) 박스의 크기를 불확정적으로 만들지 않습니다. 단, 이 최소값 적용 전의 박스 크기를 기준으로 계산된 백분율이 있다면, 적용 후의 새 크기 기준으로 다시 계산해야 합니다.

7. 그리드 정의

7.1. 명시적 그리드

세 가지 속성 grid-template-rows, grid-template-columns, grid-template-areas는 명시적 그리드의 명시적 그리드 트랙을 지정하여 그리드 컨테이너를 정의합니다. 최종 그리드는 명시적 그리드 밖에 그리드 아이템이 배치되면 더 커질 수 있으며, 이 경우 암묵적 트랙이 생성됩니다. 암묵적 트랙의 크기는 grid-auto-rows, grid-auto-columns 속성으로 지정합니다.

명시적 그리드의 크기는 grid-template-areas로 정의된 행/열 수와, grid-template-rows/grid-template-columns로 크기 지정된 행/열 수 중 더 큰 값으로 결정됩니다. grid-template-areas로 정의되었으나 grid-template-rows/grid-template-columns로 크기 지정되지 않은 행/열은 grid-auto-rows/grid-auto-columns 속성에서 크기를 가져옵니다. 이 속성이 명시적 트랙을 하나도 정의하지 않아도, 명시적 그리드에는 각 축에 하나의 그리드 선이 포함됩니다.

grid-placement 속성의 숫자 인덱스는 명시적 그리드의 가장자리부터 셉니다. 양수 인덱스는 시작 측에서부터(가장 시작쪽 명시적 선을 1부터 시작), 음수 인덱스는 끝 측에서부터(가장 끝쪽 명시적 선을 -1부터 시작) 셉니다.

grid, grid-template 속성은 세 가지 명시적 그리드 속성(grid-template-rows, grid-template-columns, grid-template-areas)을 한 번에 설정할 수 있는 단축 속성입니다. grid 단축 속성은 암묵적 그리드 제어 속성도 초기화하고, grid-template 속성은 암묵적 그리드 관련 속성은 변경하지 않습니다.

7.2. 명시적 트랙 크기 지정: grid-template-rows 및 grid-template-columns 속성

이 속성들은 트랙 목록을 공백으로 구분된 형태로 지정하며, 라인 이름과 트랙 크기 지정 함수를 그리드에 지정합니다. grid-template-columns는 그리드의 열 트랙 목록을, grid-template-rows는 행 트랙 목록을 지정합니다.

값의 의미는 다음과 같습니다:

none

이 속성에 의해 명시적 그리드 트랙이 생성되지 않음을 나타냅니다 (단, 명시적 그리드 트랙은 grid-template-areas에 의해 생성될 수 있음).

참고: 명시적 그리드가 없을 경우 행/열은 암묵적으로 생성되며, 그 크기는 grid-auto-rows 및 grid-auto-columns 속성에 의해 결정됩니다.

<track-list> | <auto-track-list>

트랙 목록을 트랙 크기 지정 함수와 라인 이름의 시퀀스로 지정합니다. 각 트랙 크기 지정 함수는 길이, 그리드 컨테이너의 크기에 대한 백분율, 해당 열 또는 행을 차지하는 콘텐츠의 측정값, 또는 그리드 내의 여유 공간의 분수로 지정할 수 있습니다. minmax() 표기법을 사용하면 위의 방법들을 조합해 열이나 행의 최소, 최대 트랙 크기 지정 함수를 각각 지정할 수 있습니다.

트랙 목록의 문법은 다음과 같습니다…

<track-list>          = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list>     = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
                        [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

<track-size>          = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage [0,∞]> )
<fixed-size>          = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<track-breadth>       = <length-percentage [0,∞]> | <flex [0,∞]> | min-content | max-content | auto
<inflexible-breadth>  = <length-percentage [0,∞]> | min-content | max-content | auto
<fixed-breadth>       = <length-percentage [0,∞]>
<line-names>          = '[' <custom-ident>* ']'

각 구성 값의 정의는 다음과 같습니다…

7.2.1. 트랙 크기

<length-percentage [0,∞]>

음수가 아닌 길이 또는 백분율. CSS3 Values에서 정의됨. [CSS-VALUES-3]

<percentage> 값은 열 그리드 트랙의 경우 내부 인라인 크기 기준, 행 그리드 트랙의 경우 내부 블록 크기 기준입니다. 그리드 컨테이너의 크기가 트랙 크기에 의존한다면, <percentage>는 auto로 처리해야 하며, 그리드 컨테이너의 본질적 크기 계산 시 사용되고, 그 후 그리드 컨테이너의 최종 크기를 기준으로 그리드와 아이템을 레이아웃합니다.

<flex [0,∞]>

fr 단위를 사용하는 음수가 아닌 크기로, 트랙의 flex factor를 지정합니다. 각 <flex>로 크기 지정된 트랙은 남은 공간을 flex factor 비율로 나눠 가집니다. 예를 들어 1fr 2fr로 지정하면 두 트랙은 각각 남은 공간의 ⅓, ⅔씩 차지합니다. 자세한 내용은 § 7.2.4 fr 단위 참고.

참고: flex factor의 합이 1 미만이면, 남은 공간의 일부만 차지하고 전체를 채우지 않습니다.

minmax() 표기법 밖에서 쓰이면 자동 최소값(즉, minmax(auto, <flex>))을 의미합니다.

minmax(min, max)

min 이상 max 이하의 크기 범위를 정의합니다. 만약 max가 min보다 작으면, max는 min에 맞춰 바닥 처리되어(minmax(min, min)과 같음) 적용됩니다. <flex> 값은 최대값으로만 지정 가능하며, 최소값으로는 사용할 수 없습니다.

참고: 향후 명세에서는 <flex> 최소값도 허용될 수 있으며, 그에 따라 트랙 크기 지정 알고리즘도 업데이트될 예정입니다.

auto

최대값으로: 해당 max-content 기여값 중 가장 큰 값을 의미하며, 그리드 아이템이 차지하는 그리드 트랙에 적용됩니다. max-content와 달리, align-content 및 justify-content 속성에 의해 트랙이 확장될 수 있습니다.

최소값으로: 해당 최소 크기 (min-width/min-height로 지정됨) 중 가장 큰 값이 그리드 아이템이 차지하는 그리드 트랙에 적용됩니다. (초기값은 보통 min-content 최소값과 같지만 항상 그런 것은 아님—​§ 6.6 그리드 아이템의 자동 최소 크기 참고.)

minmax() 표기법 밖에서 쓰이면 minmax(auto, auto)와 같으며, 위에서 설명한 최소와 최대의 범위를 나타냅니다. (기본적인 경우에는 minmax(min-content, max-content)와 비슷하게 동작하지만, 추가 기능이 있습니다.)

max-content

해당 max-content 기여값 중 가장 큰 값을 의미하며, 그리드 아이템이 차지하는 그리드 트랙에 적용됩니다.

min-content

해당 min-content 기여값 중 가장 큰 값을 의미하며, 그리드 아이템이 차지하는 그리드 트랙에 적용됩니다.

fit-content( <length-percentage> )

아래 수식에 해당함: max(minimum, min(limit, max-content)), 여기서 minimum은 auto 최소값 (대부분의 경우 min-content와 같음), limit은 트랙 크기 지정 함수로, fit-content() 인수로 전달됨. 본질적으로 minmax(auto, max-content)와 minmax(auto, limit) 중 더 작은 값과 같음.

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

/* 유효한 트랙 정의 예시 */
grid-template-rows: 1fr minmax(min-content, 1fr);
grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
grid-template-rows: calc(4em - 5px);

참고: 그리드의 크기는 트랙 크기의 단순 합만이 아니며, row-gap, column-gap 그리고 justify-content, align-content가 트랙 사이에 추가 공간을 만들 수 있습니다.

7.2.2. 그리드 선 이름 지정: [<custom-ident>*] 문법

그리드 선은 항상 숫자 인덱스로 참조할 수 있지만, 선 이름을 사용하면 grid-placement 속성의 이해와 유지 관리가 쉬워집니다. 선 이름은 명시적으로 할당할 수 있으며, grid-template-rows와 grid-template-columns 속성에서 지정하거나, 이름이 지정된 그리드 영역과 grid-template-areas 속성으로 암묵적으로 할당할 수도 있습니다.

예를 들어, 아래 코드에서는 그리드의 모든 선에 의미 있는 이름을 부여합니다. 일부 선은 여러 이름을 갖는다는 점에 주의하세요.

#grid {
  display: grid;
  grid-template-columns: [first nav-start] 150px [main-start] 1fr [last];
  grid-template-rows: [first header-start] 50px [main-start] 1fr [footer-start] 50px [last];
}

선 이름으로 span 또는 auto는 사용할 수 없습니다. 즉, <custom-ident>는 <line-names>에서 span과 auto 키워드를 제외합니다.

7.2.3. 행과 열 반복: repeat() 문법

repeat() 문법은 트랙 목록의 일부를 반복해서, 일정한 패턴을 가진 많은 열이나 행을 더 간결하게 작성할 수 있게 해줍니다.

grid-template-columns: 10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end]
                       10px [col-start] 250px [col-end] 10px;
/* 위와 동일하지만 더 간단하게 작성됨 */
grid-template-columns: repeat(4, 10px [col-start] 250px [col-end]) 10px;

7.2.3.1. repeat() 문법

repeat()의 일반적인 문법은 대략 다음과 같습니다:

repeat( [ <integer [1,∞]> | auto-fill | auto-fit ] , <track-list> )

첫 번째 인자는 반복 횟수, 두 번째 인자는 트랙 목록으로, 해당 패턴이 반복됩니다. 단, 몇 가지 제한이 있습니다:

• repeat() 문법은 중첩해서 사용할 수 없습니다.

• 자동 반복(auto-fill, auto-fit) 은 완전히 내재적 또는 유연 크기와 조합할 수 없습니다(문법 참고).

따라서 repeat() 문법의 정확한 형태는 여러 가지가 있습니다:

<track-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<auto-repeat>  = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

• <track-repeat> 변형은 모든 <track-size>의 반복을 나타낼 수 있지만, 반복 횟수는 고정되어 있습니다.

• <auto-repeat> 변형은 공간을 채우도록 자동 반복이 가능하지만, 반복 횟수를 계산할 수 있도록 반드시 확정적 트랙 크기가 필요합니다. 트랙 목록에는 한 번만 나타날 수 있으며, 동일한 트랙 목록에 <fixed-repeat>도 포함될 수 있습니다.

repeat() 함수가 두 <line-names>을 나란히 배치하게 될 경우, 이름 목록은 병합됩니다. 예를 들어, repeat(2, [a] 1fr [b])는 [a] 1fr [b a] 1fr [b]와 같습니다.

7.2.3.2. 채우기 반복: auto-fill 및 auto-fit 반복

repeat()의 반복 횟수로 auto-fill이 지정되면, 그리드 컨테이너의 해당 축에 확정적 선호 크기 또는 최대 크기가 있으면, 반복 횟수는 그리드가 콘텐츠 박스를 넘치지 않는 최대 양의 정수로 결정됩니다(gap도 고려). 반복이 넘치면 1회만 반복합니다. 해당 축에 확정적 최소 크기가 있으면, 반복 횟수는 최소 요건을 만족하는 가장 작은 양의 정수입니다. 그렇지 않으면 지정된 트랙 목록은 한 번만 반복됩니다.

이 경우, 각 트랙은 최대 트랙 크기 지정 함수가 확정적이면 그 값, 아니면 최소 트랙 크기 지정 함수가 확정적이면 그 값으로 취급합니다. 둘 다 확정적이면 최대 트랙 크기 지정 함수를 최소 트랙 크기 지정 함수로 바닥 처리합니다. 둘 다 확정적이 아니면 반복 횟수는 1입니다.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
}

auto-fit 키워드는 auto-fill과 동일하게 동작하지만, 그리드 아이템 배치 후에 비어있는 반복 트랙은 collapse 처리됩니다. 비어있는 트랙은 흐름에 있는 그리드 아이템이 들어가거나 스팬되지 않은 트랙을 의미합니다. (모든 트랙이 collapse될 수도 있습니다.)

collapse 된 그리드 트랙은 0px의 고정 트랙 크기 지정 함수로 처리되며, 양 옆의 구터도 분배 정렬에 의해 할당된 공간 포함하여 collapse 처리됩니다.

자동 반복 트랙의 개수를 찾기 위해, UA는 트랙 크기를 UA가 지정한 값(예: 1px)으로 바닥 처리해야 하며, 이는 0으로 나누는 오류를 방지하기 위한 것입니다.

7.2.3.3. repeat()의 보간/조합

첫 번째 인자(반복 횟수)와 두 번째 인자(트랙 목록)의 트랙 개수가 동일한 두 repeat() 문법을 결합할 때는, 계산된 트랙 목록의 각 구성 요소를 계산값 기준으로 결합합니다(최상위 트랙 목록 결합과 동일). 그렇지 않으면 이산적(discrete)으로 결합합니다.

7.2.4. 유연한 길이: fr 단위

유연한 길이 또는 <flex>는 fr 단위를 사용하는 치수로, 그리드 컨테이너의 남은 공간의 분수를 나타냅니다. fr 단위로 크기 지정된 트랙은 유연 트랙이라 하며, 남은 공간에 따라 flexbox의 flex item처럼 공간을 채웁니다.

남은 공간의 분배는 모든 비유연 트랙 크기 지정 함수가 최대에 도달한 뒤 발생합니다. 해당 행/열의 전체 크기를 사용 가능한 공간에서 빼서 남은 공간을 구하고, 그 후 유연 크기(tracks)로 지정된 행/열에 flex factor 비율대로 분배됩니다.

각 행/열이 남은 공간에서 차지하는 몫은 <flex> * <leftover space> / <모든 flex factor의 합>입니다.

사용 가능한 공간이 무한할 때 (그리드 컨테이너의 너비·높이가 불확정적일 때), fr 단위로 크기 지정된 그리드 트랙은 각각의 콘텐츠 크기 비율을 유지하면서 크기가 결정됩니다. 각 fr 트랙의 사용 크기는 해당 트랙의 max-content 크기를 구해 flex factor로 나누어 "가상의 1fr 크기"를 결정합니다. 그 중 최대값이 1fr의 최종 길이(flex fraction)이 되고, 각 트랙의 flex factor만큼 곱해서 최종 크기를 결정합니다.

참고: <flex> 값은 <length>가 아니며 (<length>와 일부 <percentage> 값처럼 호환되지 않음), 따라서 calc()에서 다른 단위와 조합하거나 표현할 수 없습니다.

7.2.5. 트랙 목록의 계산값

계산된 트랙 목록은 list(목록)으로, 선 이름 집합(line name sets)과 트랙 섹션(track sections)이 번갈아 나타나며, 첫 번째와 마지막 항목은 항상 선 이름 집합(line name sets)입니다.

선 이름 집합(line name set)은 (비어있을 수도 있는) 선 이름을 나타내는 식별자들의 순서 있는 집합(ordered set)입니다.

트랙 섹션(track section)은 다음 중 하나입니다:

• 각 트랙의 크기를 나타내는 minmax() 함수 표기이며, 각각의 <length-percentage>가 계산값으로 처리됨 (계산된 트랙 크기(computed track size))

• 반복되는 트랙 목록 섹션을 나타내는 repeat() 함수 표기이며, 반복 횟수 <integer>는 계산값, 반복되는 <track-list>는 계산된 트랙 목록으로 표현됨 (계산된 repeat 표기(computed repeat notation))

7.2.6. 트랙 목록의 확정값

grid-template-rows와 grid-template-columns 속성은 확정값 특례 속성입니다. [CSSOM]

요소가 그리드 컨테이너 박스를 생성하면, 해당 요소의 확정값(resolved value)은 grid-template-rows 또는 grid-template-columns 속성의 사용값(used value)이며, 다음과 같이 직렬화됩니다:

• 모든 트랙이 각각 개별적으로 나열됨(암묵적 또는 명시적), repeat() 문법은 사용하지 않음.
• 모든 트랙의 크기는 픽셀 단위의 길이로 표시됨(크기 지정 함수와 무관).
• 인접한 선 이름은 하나의 대괄호 집합으로 합쳐짐.

const s = getComputedStyle(gridEl);
gridEl.style.gridTemplateRows = s.gridTemplateRows;
// 이런 코드는 원래 아무 일도 없어야 하지만,
// 암묵적 행이 있으면
// explicit 행으로 변환되어
// 그리드 아이템 위치나 전체 그리드 크기가 바뀔 수 있음!

그 외의 경우(예: 요소에 display: none 이 있거나 그리드 컨테이너가 아니면) 확정값은 단순히 계산값(computed value)입니다.

<style>
#grid {
  width: 500px;
  grid-template-columns:
    [a]     auto
    [b]     minmax(min-content, 1fr)
    [b c d] repeat(2, [e] 40px)
            repeat(5, auto);
}
</style>
<div id="grid">
  <div style="grid-column-start: 1; width: 50px"></div>
  <div style="grid-column-start: 9; width: 50px"></div>
</div>
<script>
  var gridElement = document.getElementById("grid");
  getComputedStyle(gridElement).gridTemplateColumns;
  // [a] 50px [b] 320px [b c d e] 40px [e] 40px 0px 0px 0px 0px 50px
</script>

참고: 일반적으로 확정값(resolved value)은 계산값(computed value)이지만, 일부 2.1 레거시 속성에서는 다릅니다. 하지만 이 모듈의 초기 구현과의 호환성을 위해 grid-template-rows와 grid-template-columns는 사용값(used value)을 반환하도록 정의되어 있습니다.

CSS WG에서는 grid-placement 속성에도 사용값을 반환할지 검토 중이며, 특히 구현자들의 의견을 구하고 있습니다. 자세한 내용은 논의를 참고하세요.

7.3. 명명된 영역: grid-template-areas 속성

이 속성은 이름이 지정된 그리드 영역을 지정합니다. 이 영역은 특정 그리드 아이템과 연결되어 있지 않지만, grid-placement 속성에서 참조할 수 있습니다. grid-template-areas 속성의 문법은 그리드의 구조를 시각적으로 보여주어, 그리드 컨테이너의 전체 레이아웃을 이해하기 쉽게 만듭니다.

값의 의미는 다음과 같습니다:

none

이름이 지정된 그리드 영역도, 명시적 그리드 트랙도 정의되지 않았음을 나타냅니다 (단, 명시적 그리드 트랙은 grid-template-columns 또는 grid-template-rows에서 지정될 수 있음).

참고: 명시적 그리드가 없으면, 행/열은 암묵적으로 생성되며, 그 크기는 grid-auto-rows와 grid-auto-columns 속성에 의해 결정됩니다.

<string>+

grid-template-areas 속성에 나열된 각 문자열마다 행이 생성되고, 각 문자열의 셀마다 열이 생성됩니다. 파싱 방법:

문자열을 아래 토큰 목록으로 tokenize합니다(가장 긴 일치 우선):

• ident code points의 연속: 이름 셀 토큰(named cell token)으로, 해당 코드 포인트로 이름이 지정됨
• "."(U+002E FULL STOP)이 한 개 이상 연속: null 셀 토큰으로 처리됨
• 공백 연속: 아무것도 생성하지 않음(토큰 생성 X)
• 기타 모든 문자 연속: 쓰레기 토큰(trash token)으로 처리

참고: 이러한 규칙 때문에 "1st 2nd 3rd"처럼 <ident> 문법과 맞지 않는 셀 이름이 생성될 수 있습니다. 이런 경우 다른 속성에서 해당 영역을 참조할 때 escape가 필요합니다(예: grid-row: \31st;).

• null 셀 토큰은 그리드 컨테이너에서 이름 없는 영역을 나타냅니다.
• 이름 셀 토큰은 동일한 이름의 이름이 지정된 그리드 영역을 생성합니다. 행/열 내 여러 이름 셀 토큰은 해당 이름이 지정된 그리드 영역을 여러 그리드 셀에 걸쳐 스팬시킵니다.
• 쓰레기 토큰은 문법 오류이며, 선언 전체가 무효가 됩니다.

모든 문자열은 반드시 동일한 수의 셀 토큰(이름 셀 토큰 및/또는 null 셀 토큰)을 정의해야 하며, 최소 하나의 셀 토큰을 포함해야 합니다. 그렇지 않으면 선언이 무효입니다. 이름이 지정된 그리드 영역이 여러 그리드 셀에 걸쳐 있지만, 그 셀들이 하나의 사각형을 채우지 않으면 선언이 무효입니다.

참고: 향후 명세에서는 비사각형 또는 연결되지 않은 영역도 허용될 수 있습니다.

#grid {
  display: grid;
  grid-template-areas: "head head"
                       "nav  main"
                       "foot ...."
}
#grid > header { grid-area: head; }
#grid > nav    { grid-area: nav; }
#grid > main   { grid-area: main; }
#grid > footer { grid-area: foot; }

7.3.1. 템플릿 문자열의 직렬화

지정값 또는 계산값으로 <string> 값의 grid-template-areas를 직렬화할 때, 각 null 셀 토큰은 "."(U+002E FULL STOP) 하나로 직렬화되고, 연속된 셀 토큰은 공백(U+0020 SPACE) 하나로 구분하며, 그 외 모든 공백은 생략됩니다.

7.3.2. 암묵적으로 할당된 선 이름

grid-template-areas 속성은 템플릿 내 이름이 지정된 그리드 영역에서 암묵적으로 할당된 선 이름을 생성합니다. 각 이름이 지정된 그리드 영역 foo에 대해 네 개의 암묵적으로 할당된 선 이름이 만들어집니다: 두 개의 foo-start는 이름이 지정된 그리드 영역의 행 시작/열 시작 선을, 두 개의 foo-end는 이름이 지정된 그리드 영역의 행 끝/열 끝 선을 나타냅니다.

이 암묵적으로 할당된 선 이름은 다른 선 이름과 동일하게 동작하지만, grid-template-rows 또는 grid-template-columns 값에는 나타나지 않습니다. 동일한 이름의 명시적으로 할당된 선 이름이 정의되어 있어도, 암묵적으로 할당된 선 이름은 같은 이름의 선이 더 생긴 것일 뿐입니다.

7.3.3. 암묵적으로 이름 붙은 영역

이름이 지정된 그리드 영역은 자신이 생성한 암묵적으로 할당된 선 이름으로 참조되므로, 동일한 형태의 명명된 선(foo-start/foo-end)을 명시적으로 추가하면 이름이 지정된 그리드 영역이 효과적으로 만들어집니다. 이런 암묵적으로 이름 붙은 영역은 grid-template-areas 값에는 나타나지 않지만, grid-placement 속성에서는 참조 가능합니다.

7.4. 명시적 그리드 단축 속성: grid-template 속성

grid-template 속성은 단축 속성으로, grid-template-columns, grid-template-rows, grid-template-areas를 한 번에 선언할 수 있습니다. 여러 가지 문법 형태를 지원합니다:

none

세 속성을 모두 초기값(none)으로 설정합니다.

<'grid-template-rows'> / <'grid-template-columns'>

grid-template-rows와 grid-template-columns에 지정값을 설정하고, grid-template-areas는 none으로 설정합니다.

grid-template: auto 1fr / auto 1fr auto;

위 선언은 다음과 동일합니다:

grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-areas: none;

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

• grid-template-areas에 문자열을 설정합니다.

• grid-template-rows에 각 문자열 뒤의 <track-size>를 설정하고 (크기가 없으면 auto로 채움), 각 크기 앞뒤의 명명된 라인도 splice합니다.

• grid-template-columns에는 슬래시 뒤에 지정된 트랙 목록을 설정합니다. (지정되지 않으면 none으로 처리)

이 문법은 작성자가 트랙 이름과 크기를 해당 그리드 영역과 인라인으로 쉽게 정렬할 수 있게 합니다.

grid-template: [header-top] "a   a   a"     [header-bottom]
                 [main-top] "b   b   b" 1fr [main-bottom]
                          / auto 1fr auto;

위 선언은 다음과 동일합니다:

grid-template-areas: "a a a"
                     "b b b";
grid-template-rows: [header-top] auto [header-bottom main-top] 1fr [main-bottom];
grid-template-columns: auto 1fr auto;

그리고 다음과 같은 그리드를 만듭니다:

참고: track 목록에는 repeat() 함수 사용 불가. ASCII 아트의 행/열과 1:1로 시각적으로 정렬되도록 하기 위함.

참고: grid 단축 속성도 같은 문법을 허용하지만, 암묵적 그리드 관련 속성을 모두 초기값으로 초기화합니다. 별도로 cascade를 원하지 않는다면 grid를 grid-template 대신 사용하는 것이 권장됩니다.

7.5. 암묵적 그리드

grid-template-rows, grid-template-columns, grid-template-areas 속성은 명시적 그리드를 구성하는 고정된 트랙 수를 정의합니다. 그리드 아이템이 이러한 경계 밖에 배치될 때, 그리드 컨테이너는 암묵적 그리드 트랙을, 암묵적 그리드 선을 그리드에 추가하여 생성합니다. 이 선들과 명시적 그리드가 합쳐져 암묵적 그리드를 형성합니다. grid-auto-rows 및 grid-auto-columns 속성은 이 암묵적 그리드 트랙의 크기를 지정하며, grid-template-areas로 생성되었지만 grid-template-rows 또는 grid-template-columns로 명시적으로 크기 지정되지 않은 명시적 그리드 트랙에도 적용됩니다.

grid-auto-flow 속성은 명시적 위치가 없는 그리드 아이템의 자동 배치를 제어합니다. 명시적 그리드가 모두 채워졌거나(혹은 명시적 그리드가 없을 때) 자동 배치 또한 암묵적 그리드 트랙을 생성하게 됩니다.

grid 단축 속성은 암묵적 그리드 속성(grid-auto-flow, grid-auto-rows, grid-auto-columns)과 명시적 그리드 속성을 한 번에 선언할 수 있게 해줍니다.

7.6. 암묵적 트랙 크기 지정: grid-auto-rows, grid-auto-columns 속성

grid-auto-columns, grid-auto-rows 속성은 grid-template-rows, grid-template-columns로 크기 지정되지 않은 트랙의 크기를 지정합니다. 여러 트랙 크기가 주어진 경우, 패턴이 반복되어 해당 트랙의 크기를 결정합니다. 명시적으로 크기 지정된 마지막 트랙 뒤의 첫 번째 트랙은 첫 번째 지정 크기를, 그 이후는 차례대로 지정 크기를 받습니다; 그리고 명시적 그리드 직전의 마지막 암묵적 그리드 트랙은 마지막 지정 크기를 받고, 그 이전은 역순으로 적용됩니다.

참고: 그리드 아이템이 grid-template-rows, grid-template-columns 또는 grid-template-areas에서 명시적으로 선언되지 않은 행/열에 배치될 경우, 암묵적 그리드 트랙이 생성됩니다. 이는 범위를 벗어난 행/열에 명시적으로 배치하거나, 자동 배치 알고리즘이 추가 행/열을 생성할 때 발생할 수 있습니다.

<style>
  #grid {
    display: grid;
    grid-template-columns: 20px;
    grid-auto-columns: 40px;
    grid-template-rows: 20px;
    grid-auto-rows: 40px;
  }
  #A { grid-column: 1; grid-row: 1; }
  #B { grid-column: 2; grid-row: 1; }
  #C { grid-column: 1; grid-row: 2; }
  #D { grid-column: 2; grid-row: 2; }
</style>

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
</div>

7.7. 자동 배치: grid-auto-flow 속성

그리드 아이템이 명시적으로 배치되지 않은 경우, 그리드 컨테이너 내의 비어 있는 공간에 자동 배치 알고리즘에 의해 자동으로 배치됩니다. grid-auto-flow는 자동 배치 알고리즘의 동작 방식을 제어하며, 자동 배치된 아이템이 그리드에 어떻게 흐르는지 지정합니다. 자동 배치 알고리즘의 자세한 동작은 § 8.5 그리드 아이템 배치 알고리즘을 참고하세요.

row

자동 배치 알고리즘이 각 행을 순서대로 채우며, 필요한 만큼 새 행을 추가합니다. row 또는 column이 모두 생략되면, row가 기본값입니다.

column

자동 배치 알고리즘이 각 열을 순서대로 채우며, 필요한 만큼 새 열을 추가합니다.

dense

지정하면 자동 배치 알고리즘이 "dense" 포장 방식(빈 공간을 우선 채우는 방식)을 사용합니다. 즉, 나중에 작은 아이템이 나오면 앞쪽의 빈 칸을 채우려 하며, 이로 인해 아이템 순서가 바뀔 수 있습니다.

생략하면 "sparse" 알고리즘(오직 앞으로만 이동, 빈 칸을 다시 채우지 않음)이 사용되어, 모든 자동 배치 아이템이 순서대로 나타나고, 이후 아이템이 채울 수 있는 빈 칸이 남더라도 채우지 않습니다.

참고: 향후 명세에서는 자동 배치된 아이템을 하나의 "기본" 셀에 모아 흐르게 하는 값을 추가할 예정입니다.

자동 배치는 그리드 아이템을 order-modified document order로 처리합니다.

다음 예시는 각 열이 콘텐츠 크기에 맞게 자동 크기 지정된 세 개의 컬럼이 있습니다. 명시적으로 정의된 행은 없습니다. grid-auto-flow 속성은 row로 설정되어, 그리드가 첫 번째 행부터 세 개의 열을 가로로 탐색하고, 이후 행을 추가하여 자동 배치된 그리드 아이템의 위치를 맞춥니다.

자동 배치로 정렬된 폼 예시

<style type="text/css">
form {
  display: grid;
  /* 세 개의 컬럼을 모두 콘텐츠 크기에 맞게 정의하고,
     각 컬럼 선에 이름을 지정 */
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
}
form > label {
  /* 모든 label을 "labels" 컬럼에 배치하고,
     자동으로 다음 사용 가능한 행에 위치시킴 */
  grid-column: labels;
  grid-row: auto;
}
form > input, form > select {
  /* 모든 컨트롤을 "controls" 컬럼에 배치하고,
     자동으로 다음 사용 가능한 행에 위치시킴 */
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  /* 이 아이템을 "oversized" 컬럼의
     세 행을 스팬하는 영역에 자동 배치,
     이미 배치된 아이템과 겹치지 않는 첫 번째 행에 위치 */
  grid-column: oversized;
  grid-row: span 3;
}

/* 폼의 모든 버튼을
   명시적으로 정의된 그리드 영역에 배치 */
#buttons {
  grid-row: auto;

  /* 버튼 영역이 인라인 축 전체를 스팬하도록 지정 */
  grid-column: 1 / -1;
  text-align: end;
}
</style>
<form>
  <label for="firstname">이름:</label>
  <input type="text" id="firstname" name="firstname">
  <label for="lastname">성:</label>
  <input type="text" id="lastname" name="lastname">
  <label for="address">주소:</label>
  <input type="text" id="address" name="address">
  <label for="address2">주소2:</label>
  <input type="text" id="address2" name="address2">
  <label for="city">도시:</label>
  <input type="text" id="city" name="city">
  <label for="state">주:</label>
  <select type="text" id="state" name="state">
    <option value="WA">워싱턴</option>
  </select>
  <label for="zip">우편번호:</label>
  <input type="text" id="zip" name="zip">

  <div id="department-block">
    <label for="department">부서:</label>
    <select id="department" name="department" multiple>
      <option value="finance">재무</option>
      <option value="humanresources">인사</option>
      <option value="marketing">마케팅</option>
    </select>
  </div>

  <div id="buttons">
    <button id="cancel">취소</button>
    <button id="back">뒤로</button>
    <button id="next">다음</button>
  </div>
</form>

7.8. 그리드 정의 단축 속성: grid 속성

grid 속성은 단축 속성으로, 모든 명시적 그리드 속성(grid-template-rows, grid-template-columns, grid-template-areas) 와 모든 암묵적 그리드 속성(grid-auto-rows, grid-auto-columns, grid-auto-flow) 를 한 번에 선언합니다. (gutter 속성은 초기화하지 않음)

문법은 grid-template와 일치하며, 자동 배치 그리드를 정의하는 추가 문법도 포함합니다:

<'grid-template'>

grid-template 장황 속성을 grid-template과 동일하게 설정하고, grid-auto-* 장황 속성은 초기값으로 설정합니다.

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

자동 배치(오토플로우)를 설정하며, 한 축의 트랙을 명시적으로 지정하고 (즉, grid-template-rows 또는 grid-template-columns를 지정값으로 설정, 나머지는 none으로 설정), 다른 축의 트랙은 어떻게 자동 반복할지 지정합니다 (즉, grid-auto-rows 또는 grid-auto-columns를 지정값으로 설정, 나머지는 auto로 설정). grid-auto-flow는 해당 축에 따라 row 또는 column으로 설정하며, dense가 지정되면 함께 설정합니다.

나머지 grid 하위 속성은 모두 초기값으로 리셋됩니다.

참고: 하나의 grid 선언에서 명시적 또는 암묵적 그리드 속성만 지정할 수 있습니다. 지정하지 않은 하위 속성은 단축 속성의 일반 규칙에 따라 초기값으로 설정됩니다.

grid-template: none / 100px;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-auto-columns: auto;

grid-template: none;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-auto-columns: 1fr;

직렬화할 때, grid-auto-* 장황 속성이 모두 초기값이면, grid-template 문법이 사용됩니다.

8. 그리드 아이템 배치

모든 그리드 아이템은 그리드 영역과 연결되어 있으며, 그리드 아이템이 차지하는 인접한 그리드 셀의 직사각형 집합입니다. 이 그리드 영역은 그리드 아이템의 포함 블록을 정의하며, 그 안에서 자기 정렬 속성(justify-self와 align-self)이 실제 위치를 결정합니다. 그리드 아이템이 차지하는 셀은 그리드의 행과 열 크기에도 영향을 줍니다. 자세한 내용은 § 11 그리드 레이아웃 알고리즘 참고.

그리드 아이템의 그리드 영역이 그리드 내에서 어디에 위치하는지는 해당 아이템의 배치(placement)에 의해 결정되며, 그리드 위치(grid position)와 그리드 span으로 구성됩니다:

그리드 위치(grid position)

그리드 아이템의 각 축에서의 그리드 내 위치. 그리드 위치는 확정적(definite)(명시적으로 지정됨) 또는 자동(automatic)(자동 배치(automatic placement)에 의해 결정됨)일 수 있습니다.

그리드 span

그리드 트랙 중 그리드 아이템이 각 축에서 차지하는 개수. Level 1에서는, 그리드 아이템의 그리드 span은 항상 확정적(definite)이며, 축별로 값을 결정할 수 없으면 기본값 1이 사용됩니다.

grid-placement 속성—​즉, grid-row-start, grid-row-end, grid-column-start, grid-column-end 및 이들의 단축 속성 grid-row, grid-column, grid-area—​를 사용하면 작성자가 그리드 아이템의 배치(placement)를 다음 여섯 가지 정보를 임의로(혹은 일부만) 지정해 조절할 수 있습니다:

해당 축에서 Start, End, Span 중 두 개에 대해 확정값이 있으면 세 번째도 확정값이 됩니다.

다음 표는 그리드 위치/span이 확정적 또는 자동이 되는 조건을 요약합니다:

8.1. 그리드 배치의 일반적인 패턴

이 절은 정보 제공용입니다.

grid-placement 속성 장황 속성은 세 가지 단축 속성으로 구성됩니다:

8.1.1. 명명된 영역

아이템은 이름이 지정된 그리드 영역(예: grid-template-areas 템플릿에서 생성된 영역)에, grid-area에 영역 이름을 지정함으로써 배치할 수 있습니다:

article {
  grid-area: main;
  /* "main"이라는 이름의 영역에 아이템 배치 */
}

아이템을 이름이 지정된 그리드 영역에 부분적으로 맞추고, 다른 엣지는 다른 선에 맞출 수도 있습니다:

.one {
  grid-row-start: main;
  /* "main" 이름 영역의 시작 엣지에 행 시작 엣지를 맞춤 */
}

8.1.2. 숫자 인덱스와 span

그리드 아이템은 숫자로 위치와 크기를 지정할 수 있으며, 이는 스크립트 기반 레이아웃에서 특히 유용합니다:

.two {
  grid-row: 2;    /* 두 번째 행에 배치 */
  grid-column: 3; /* 세 번째 열에 배치 */
  /* grid-area: 2 / 3; 과 동일 */
}

기본적으로 그리드 아이템의 span은 1입니다. 명시적으로 span을 다르게 지정할 수도 있습니다:

.three {
  grid-row: 2 / span 5;
  /* 2번째 행에서 시작,
     아래로 5행을 span함(7번째 행에서 끝남) */
}

.four {
  grid-row: span 5 / 7;
  /* 7번째 행에서 끝나고,
     위로 5행을 span함(2번째 행에서 시작) */
}

참고: 그리드 인덱스는 쓰기 모드 기준임에 주의하세요. 예를 들어, 아랍어처럼 오른쪽-왼쪽 언어에서는 첫 번째 열이 가장 오른쪽 열입니다.

8.1.3. 명명된 선과 span

선을 숫자로 세는 대신, 선 이름으로 참조할 수도 있습니다:

.five {
  grid-column: first / middle;
  /* "first" 선에서 "middle" 선까지 span */
}

참고: 명명된 그리드 영역과 선 이름이 동일한 이름을 가지면, 배치 알고리즘은 명명된 그리드 영역의 선을 우선 사용합니다.

동일한 이름의 선이 여러 개 있으면, 사실상 명명된 그리드 선 집합이 생성되며, 이름으로 필터링해서 인덱스 지정이 가능합니다:

.six {
  grid-row: text 5 / text 7;
  /* "text"라는 이름의 5번째 선과 7번째 선 사이 span */
  grid-row: text 5 / span text 2;
  /* 위와 동일 - "text" 이름의 5번째 선에서 시작,
     이후 두 개의 "text" 선을 span하여 7번째까지 */
}

8.1.4. 자동 배치

그리드 아이템은 다음 사용 가능한 빈 그리드 셀에 자동으로 배치될 수 있으며, 공간이 부족하면 그리드가 확장됩니다.

.eight {
  grid-area: auto; /* 초기값 */
}

이 방식은 예를 들어 상품 목록을 그리드 형태로 나열하는 데 사용할 수 있습니다.

자동 배치에 명시적 span을 결합하여, 여러 셀을 차지하도록 할 수도 있습니다:

.nine {
  grid-area: span 2 / span 3;
  /* 자동 배치된 아이템, 두 행과 세 열을 차지 */
}

자동 배치 알고리즘이 행을 탐색하며 추가할지, 열을 탐색하며 추가할지는 grid-auto-flow 속성으로 제어됩니다.

참고: 기본적으로 자동 배치 알고리즘은 그리드를 선형으로 앞에서 뒤로 탐색합니다; 더 큰 아이템을 배치하기 위해 빈 칸을 건너뛰는 경우, 해당 빈 칸으로 다시 돌아가지 않습니다. 이 동작을 바꾸려면, dense 키워드를 grid-auto-flow에 지정하세요.

8.2. 그리드 아이템 배치 vs. 소스 순서

“큰 힘에는 큰 책임이 따른다.”

grid-placement 속성의 기능 덕분에, 그리드 내 콘텐츠를 자유롭게 배열하고 순서를 변경할 수 있어, 시각적 표현이 문서 소스 순서와 크게 달라질 수 있습니다. 이러한 기능은 다양한 기기와 표시 모드(e.g. 미디어 쿼리 사용)에 맞춰 렌더링을 맞추는 데 큰 자유를 줍니다. 하지만 올바른 소스 순서를 대체하는 것은 아닙니다.

올바른 소스 순서는 음성, 순차 탐색(예: 키보드 탐색), 그리고 CSS를 지원하지 않는 UA(검색 엔진, 촉각 브라우저 등)에 중요합니다. 그리드 배치는 오직 시각적 표현에만 영향을 줍니다! 따라서 작성자는 비시각적/비CSS 인터랙션 모드에 맞게 문서 소스를 최적화하고, 그리드 배치를 이용해 시각적 표현만 조정하여 소스 순서를 유지할 수 있습니다.

8.3. 선 기반 배치: grid-row-start, grid-column-start, grid-row-end, grid-column-end 속성

<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

grid-row-start, grid-column-start, grid-row-end, grid-column-end 속성은 그리드 아이템의 그리드 내 위치와 크기를 결정하며, 각 속성이 선, span, 또는 자동(지정하지 않음)을 배치에 기여합니다. 이를 통해 inline-start, block-start, inline-end, block-end 엣지도 지정됩니다. 자세한 내용은 grid area를 참조하세요.

값의 의미는 다음과 같습니다:

<custom-ident>

먼저 grid area의 엣지를 명명된 그리드 영역에 맞추려 시도합니다: <custom-ident>-start(grid-*-start용) / <custom-ident>-end(grid-*-end용)인 grid line이 있으면, 해당 선 중 첫 번째를 grid item의 배치에 사용합니다.

참고: 명명된 그리드 영역은 자동으로 이런 형식의 암묵적으로 할당된 선 이름을 생성하므로, grid-row-start: foo를 지정하면 해당 명명된 영역의 시작 엣지를 선택합니다(이전에 명시적으로 foo-start라는 이름의 선이 있으면 그쪽이 우선).

그 외에는, 정수 1이 해당 <custom-ident>와 함께 지정된 것처럼 처리합니다.

[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?

N번째 grid line을 grid item의 배치에 사용합니다. 음수 정수는 반대 방향(끝에서 시작)으로 센다는 뜻입니다. 명시적 그리드의 끝 엣지부터 시작합니다.

이름(<custom-ident>)이 있으면, 해당 이름의 선만 셉니다. 충분한 이름의 선이 없으면, 위치를 찾기 위해 모든 암묵적 그리드 선이 해당 이름을 가진 것으로 간주합니다.

정수 0은 선언을 무효화합니다.

span && [ <integer [1,∞]> || <custom-ident> ]

grid span을 grid item의 배치에 기여하며, 해당 grid item의 grid area의 해당 엣지가 반대쪽 엣지에서 N개의 선 만큼 떨어지게 함. 예시: grid-column-end: span 2는 grid-column-start 선에서 끝 방향으로 두 번째 선을 의미합니다.

이름(<custom-ident>)이 지정된 경우, 해당 이름의 선만 셉니다. 충분한 선이 없으면, 해당 방향의 암묵적 그리드 선이 모두 해당 이름을 가진 것으로 간주합니다.

예를 들어, 다음 선언이 있다고 가정합니다:

.grid { grid-template-columns: 100px; }
.griditem { grid-column: span foo / 4; }

grid container에 명시적 그리드가 2개의 grid line(1, 2)로 있습니다. grid item의 column-end는 4번 선으로 지정되어, 끝 방향으로 두 개의 선이 암묵적 그리드에 생성됩니다.

column-start는 4번 선의 시작 방향에서 찾을 수 있는 첫 번째 "foo" 선이어야 하며, 그리드에는 "foo" 선이 없으므로 암묵적 그리드에 새로 생성된 선만 가능성이 있습니다. 3번 선은 명시적 그리드의 끝 방향이므로 후보가 아니고, grid-column-start의 span은 시작 방향으로 검색을 강제하므로, 결국 암묵적 그리드가 명시적 그리드 시작 방향에 선을 생성해야 합니다.

정수(<integer>) 생략 시 기본값은 1입니다. 음수 또는 0은 무효입니다.

auto

해당 속성이 grid item의 배치에 아무것도 기여하지 않음, 즉 자동 배치 또는 기본 span 1을 의미함. (상단 § 8 그리드 아이템 배치 참고)

위의 모든 생산식에서, <custom-ident>는 span과 auto 키워드를 제외합니다.

1  2  3  4  5  6  7  8  9
+--+--+--+--+--+--+--+--+
|  |  |  |  |  |  |  |  |
A  B  C  A  B  C  A  B  C
|  |  |  |  |  |  |  |  |
+--+--+--+--+--+--+--+--+

grid-column-start: 4; grid-column-end: auto;
/* 4번 선에서 5번 선까지 */

grid-column-start: auto; grid-column-end: 6;
/* 5번 선에서 6번 선까지 */

grid-column-start: C; grid-column-end: C -1;
/* 3번 선에서 9번 선까지 */

grid-column-start: C; grid-column-end: span C;
/* 3번 선에서 6번 선까지 */

grid-column-start: span C; grid-column-end: C -1;
/* 6번 선에서 9번 선까지 */

grid-column-start: span C; grid-column-end: span C;
/* 오류: 끝 span은 무시되고, 자동 배치 아이템이 명명된 선까지 span할 수 없음.
   실질적으로 'grid-column: span 1;'과 동일함. */

grid-column-start: 5; grid-column-end: C -1;
/* 5번 선에서 9번 선까지 */

grid-column-start: 5; grid-column-end: span C;
/* 5번 선에서 6번 선까지 */

grid-column-start: 8; grid-column-end: 8;
/* 오류: 8번 선에서 9번 선까지 */

grid-column-start: B 2; grid-column-end: span 1;
/* 5번 선에서 6번 선까지 */

8.3.1. 그리드 배치 충돌 처리

배치가 그리드 아이템에 대해 두 개의 선을 포함할 경우, start 선이 end 선보다 더 끝 방향(end-ward)이면, 두 선을 서로 교환합니다. start 선과 end 선이 동일하면, end 선을 제거합니다.

배치에 두 개의 span이 포함된 경우, end grid-placement 속성이 기여한 span을 제거합니다.

배치에 이름이 있는 선에 대한 span만 포함된 경우, 해당 span을 1로 대체합니다.

8.4. 배치 단축 속성: grid-column, grid-row, grid-area 속성

grid-row와 grid-column 속성은 각각 grid-row-start/grid-row-end 및 grid-column-start/grid-column-end의 단축 속성입니다.

두 개의 <grid-line> 값이 지정된 경우, grid-row-start/grid-column-start 장황 속성은 슬래시 앞의 값으로, grid-row-end/grid-column-end 장황 속성은 슬래시 뒤의 값으로 설정됩니다.

두 번째 값이 생략된 경우, 첫 번째 값이 <custom-ident>이면, grid-row-end/grid-column-end 장황 속성도 해당 <custom-ident>으로 설정; 그렇지 않으면 auto로 설정됩니다.

grid-area 속성은 단축 속성으로, grid-row-start, grid-column-start, grid-row-end, grid-column-end를 설정합니다.

네 개의 <grid-line> 값이 지정된 경우, grid-row-start는 첫 번째 값, grid-column-start는 두 번째 값, grid-row-end는 세 번째 값, grid-column-end는 네 번째 값으로 설정됩니다.

grid-column-end가 생략된 경우, grid-column-start가 <custom-ident>이면, grid-column-end도 해당 <custom-ident>으로 설정; 그렇지 않으면 auto로 설정됩니다.

grid-row-end가 생략된 경우, grid-row-start가 <custom-ident>이면, grid-row-end도 해당 <custom-ident>으로 설정; 그렇지 않으면 auto로 설정됩니다.

grid-column-start가 생략된 경우, grid-row-start가 <custom-ident>이면, 네 개의 장황 속성 모두 해당 값으로 설정됩니다. 그렇지 않으면 auto로 설정됩니다.

참고: 이 단축 속성의 해석 순서는 row-start/column-start/row-end/column-end로, LTR 페이지에서는 CCW 방향입니다. 이는 margin 등 물리적 방향을 사용하는 4-엣지 속성과 반대 방향입니다.

8.5. 그리드 아이템 배치 알고리즘

다음 그리드 아이템 배치 알고리즘은 자동 위치의 그리드 아이템을 확정적 위치로 해석하여, 모든 그리드 아이템이 레이아웃할 grid area를 명확히 가지도록 합니다. (Grid span은 특별한 해석 필요 없음; 명시적으로 지정되지 않으면 기본값 1입니다.)

참고: 이 알고리즘으로 암묵적 그리드에 새로운 행/열이 생성될 수 있습니다. 명시적 그리드에 자동 위치 그리드 아이템을 배치할 공간이 없으면 발생합니다.

모든 grid cell(명시적, 암묵적 그리드 모두)은 점유됨(occupied) 또는 비어있음(unoccupied)일 수 있습니다. 셀이 점유됨이란 grid area가 확정적 위치를 가진 그리드 아이템에 의해 덮여 있을 때, 아니면 비어있음입니다. 셀의 점유됨/비어있음 상태는 알고리즘 진행 중에 바뀔 수 있습니다.

명확성을 위해, 이 알고리즘은 grid-auto-flow가 row로 지정되어 있다고 가정합니다. column이면, 알고리즘 내의 행/열, 인라인/블록 등 모든 언급을 교체해서 해석하세요.

참고: 자동 배치 알고리즘은 그리드 아이템을 order-modified document order로 처리합니다(원본 문서 순서 아님).

0. 익명 그리드 아이템 생성: § 6 Grid Items 참고. (익명 그리드 아이템은 항상 자동 배치됨, 이 박스들은 grid-placement 속성을 지정할 수 없으므로.)

1. 자동 배치가 아닌 아이템 배치.

2. 특정 행에 고정된 아이템 처리.

   확정적 행 위치(즉, grid-row-start와 grid-row-end 속성이 확정적 위치를 정의함)를 가진 그리드 아이템에 대해, order-modified document order 순서로:

   “sparse” 포장(기본 동작)

   해당 아이템의 배치의 column-start line을 이 행에 이미 배치된 아이템 이후로, 중첩되지 않는 가장 빠른(가장 작은 양의 인덱스) line index로 설정.

   “dense” 포장(dense 지정 시)

   해당 아이템의 배치의 column-start line을 중첩되지 않는 가장 빠른(가장 작은 양의 인덱스) line index로 설정.

3. 암묵적 그리드의 열 결정.

   암묵적 그리드에 열을 생성:

   1. 명시적 그리드의 열로 시작.

   2. 모든 확정적 열 위치를 가진 아이템(명시적 위치 아이템, 이전 단계에서 배치된 아이템, 아직 배치되지 않았지만 확정적 열을 가진 아이템 포함)을 고려하여, 암묵적 그리드의 시작과 끝에 필요한 만큼 열을 추가.

   3. 확정적 열 위치가 없는 아이템 중 가장 큰 열 span이 암묵적 그리드의 너비보다 크면, 해당 열 span을 수용할 수 있도록 암묵적 그리드 끝에 열을 추가.

   예시:

   #grid {
     display: grid;
     grid-template-columns: repeat(5, 100px);
     grid-auto-flow: row;
   }
   #grid-item {
     grid-column: 4 / span 3;
   }
   

   필요한 열의 개수는 6개입니다. 명시적 그리드는 5개의 열(1~6번 선)을 제공하지만, #grid-item의 column-end가 7번 선이 되므로, 암묵적 그리드 끝에 추가 열이 필요합니다.

4. 남은 그리드 아이템 위치 지정.

   자동 배치 커서는 그리드 내 현재 “삽입 위치”를 정의하며, 행과 열 grid line 쌍으로 지정됨. 초기에 자동 배치 커서는 암묵적 그리드의 시작 행과 열 선으로 설정됨.

   grid-auto-flow 값에 따라 아이템 배치 방식 결정:

   “sparse” 포장(기본 동작)

   이전 단계에서 배치되지 않은 그리드 아이템에 대해, order-modified document order 순서로:

   아이템에 확정적 열 위치가 있는 경우:

   1. 커서의 열 위치를 해당 아이템의 column-start line으로 설정. 이 값이 이전 커서 열 위치보다 작으면 행 위치를 1 증가.

   2. 커서의 행 위치를, 아이템의 grid area가 점유됨 셀과 겹치지 않고, 해당 행에 이전에 배치된 아이템 이후가 되는 위치까지 증가(필요하면 암묵적 그리드에 행 생성).

   3. 아이템의 row-start line을 커서의 행 위치로 설정, span에 따라 row-end line도 설정.

   두 축 모두 자동 위치인 경우:

   1. 자동 배치 커서의 열 위치를 증가시켜, 해당 아이템의 grid area가 점유됨 셀과 겹치지 않거나, 커서의 열 위치+아이템의 열 span이 암묵적 그리드의 열 개수를 넘을 때까지 반복(알고리즘 앞부분에서 결정된 값).

   2. 이전 단계에서 중첩되지 않는 위치를 찾으면, 아이템의 row-start/column-start line을 커서 위치로 설정. 그렇지 않으면, 자동 배치 커서의 행 위치를 증가(필요시 암묵적 그리드에 행 추가), 열 위치를 암묵적 그리드의 시작 열로 리셋하고, 이전 단계로 돌아감.

   “dense” 포장(dense 지정 시)

   이전 단계에서 배치되지 않은 그리드 아이템에 대해, order-modified document order 순서로:

   아이템에 확정적 열 위치가 있는 경우:

   1. 커서의 행 위치를 암묵적 그리드의 시작 행으로 설정. 커서의 열 위치를 해당 아이템의 column-start line으로 설정.

   2. 자동 배치 커서의 행 위치를, 아이템의 grid area가 점유됨 셀과 겹치지 않을 때까지 증가(필요시 행 추가).

   3. 아이템의 row-start line 인덱스를 커서의 행 위치로 설정. (row-end line은 span에 따라 암묵적으로 설정됨)

   두 축 모두 자동 위치인 경우:

   1. 커서의 행/열 위치를 암묵적 그리드의 시작 행/열로 설정.

   2. 자동 배치 커서의 열 위치를 증가시켜, 해당 아이템의 grid area가 점유됨 셀과 겹치지 않거나, 커서의 열 위치+아이템의 열 span이 암묵적 그리드의 열 개수를 넘을 때까지 반복.

   3. 이전 단계에서 중첩되지 않는 위치를 찾으면, 아이템의 row-start/column-start line을 커서 위치로 설정. 그렇지 않으면, 자동 배치 커서의 행 위치를 증가(필요시 암묵적 그리드에 행 추가), 열 위치를 암묵적 그리드의 시작 열로 초기화하고, 이전 단계로 돌아감.

9. 절대 위치 지정

9.1. 그리드 컨테이너를 포함 블록으로 사용할 때

절대 위치 지정된 요소의 포함 블록이 그리드 컨테이너에 의해 생성된 경우, 포함 블록은 해당 요소의 grid-placement 속성으로 결정되는 그리드 영역에 해당합니다. 오프셋 속성(top, right, bottom, left) 는 평소처럼 해당 포함 블록의 엣지 기준으로 안쪽으로의 오프셋을 나타냅니다.

참고: 절대 위치 지정된 요소를 그리드 컨테이너에 정렬시키는 것은 해당 컨테이너의 그리드 선에 맞출 수 있게 해주지만, 이 요소들은 공간을 차지하거나 그리드 레이아웃에 관여하지 않습니다.

.grid {
  grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
  /* 그리드 컨테이너를 채우는 동일한 높이의 4행,
     각각 10rem 너비의 4열 */
  justify-content: center;
  /* 그리드 컨테이너 내에서 그리드를 수평 중앙 정렬 */
  position: relative;
  /* 절대 위치 포함 블록(containing block) 설정 */
}

.abspos {
  grid-row-start: 1;     /* 1번 그리드 행 선 = 그리드 컨테이너의 상단 */
  grid-row-end: span 2;  /* 3번 그리드 행 선 */
  grid-column-start: 3;  /* 3번 그리드 열 선 */
  grid-column-end: auto; /* 오른쪽 패딩 엣지 */
  /* 포함 블록은 그리드 컨테이너의 오른쪽 상단 1/4을 덮음 */

  position: absolute;
  top: 70px;
  bottom: 40px;
  left: 100px;
  right: 30px;
}

참고: 그리드 및 grid-placement 속성은 플로우 상대(flow-relative)이고, 오프셋 속성(left, right, top, bottom)은 물리적(physical)이므로, direction 또는 writing-mode 속성이 변경되면, 그리드는 변화하지만 오프셋 값은 변화하지 않습니다.

자동 배치 대신, auto 값이 grid-placement 속성에 사용되면, grid container의 해당 패딩 엣지 위치에 해당하는 특별한 선이 배치에 기여합니다(스크롤 영역의 패딩 엣지 기준, grid container가 오버플로우 시). 이 선들은 절대 위치 요소 배치에 사용되는 확장 그리드(augmented grid)의 처음과 끝(0번째, -0번째)이 됩니다.

참고: 기본적으로 절대 위치 박스의 포함 블록은 grid container의 패딩 엣지와 일치하며, 블록 컨테이너와 동일합니다.

절대 위치 지정은 그리드 및 플로우 내(in-flow) 콘텐츠의 레이아웃이 완료된 후에 발생하며, 그리드 트랙의 크기 산정이나 그리드의 크기/구성에 영향 주지 않습니다. grid-placement 속성이 존재하지 않는 선(명시적으로 지정하거나 기존 암묵적 그리드를 벗어난 span)로 참조될 경우, 새로운 암묵적 그리드 선을 생성하는 대신 auto로 처리합니다.

참고: 암묵적 선은 모든 선 이름을 가진 것으로 간주되므로, 참조된 선이 명시적으로 이름이 없더라도 존재할 수 있습니다.

배치에 이름 있는 선에 대한 span만 있으면, 해당 축에서 두 개의 auto 선으로 대체합니다. (이는 한 축의 두 grid-placement 속성 모두 span을 기여했으나, § 8.3.1 그리드 배치 충돌 처리로 두 번째 span이 무시된 경우 발생합니다.)

9.2. 그리드 컨테이너를 부모로 사용할 때

그리드 컨테이너의 절대 위치 지정 자식은 플로우 밖(out-of-flow)이며 그리드 아이템이 아니므로, 다른 아이템의 배치나 그리드 크기에 영향을 주지 않습니다.

static position [CSS2]은 그리드 컨테이너의 절대 위치 자식에 대해, 해당 자식이 grid container의 콘텐츠 엣지와 일치하는 grid area의 유일한 그리드 아이템인 것처럼 동작하여 결정됩니다.

참고: 이 위치는 자식의 justify-self, align-self 값에 영향을 받으며, 대부분의 다른 레이아웃 모델과 마찬가지로, 절대 위치 자식은 포함 블록의 크기나 레이아웃에 영향을 주지 않습니다.

10. 정렬 및 간격

그리드 컨테이너의 그리드 트랙 크기가 산정되고, 모든 그리드 아이템의 크기가 확정된 후, 그리드 아이템은 자신의 그리드 영역 내에서 정렬될 수 있습니다.

margin 속성으로 블록 레이아웃에서처럼 아이템을 정렬할 수 있습니다. 그리드 아이템은 박스 정렬 속성(box alignment properties)도 지원하며, CSS Box Alignment Module [CSS-ALIGN-3]에서 정의됨. 이를 통해 행과 열 모두에서 키워드 기반 정렬이 가능합니다.

기본적으로 그리드 아이템은 자신의 그리드 영역을 채웁니다. 하지만 justify-self 또는 align-self 값이 stretch가 아니거나 margin이 auto인 경우, 그리드 아이템은 콘텐츠에 맞게 자동 크기가 됩니다.

10.1. 구터(Gutter): row-gap, column-gap, gap 속성

row-gap과 column-gap 속성 (그리고 gap 단축 속성)은 그리드 컨테이너에 지정될 때, 구터(gutter)를 그리드 행과 그리드 열 사이에 정의합니다. 문법은 CSS Box Alignment 3 § 8 Gaps Between Boxes에서 정의됨.

이 속성들의 효과는 영향을 받은 그리드 선이 두께를 가진 것처럼 동작하게 합니다: 두 그리드 선 사이의 그리드 트랙은 해당 구터 사이의 공간이 됩니다. 트랙 크기 산정 시, 각 구터는 지정 크기의 추가 빈 고정 크기 트랙으로 간주되며, 해당 그리드 선을 span하는 모든 그리드 아이템이 이 구터를 같이 span합니다.

참고: justify-content/align-content에 의해 트랙 사이에 추가 공간이 생길 수 있습니다. § 11.1 그리드 크기 산정 알고리즘 참고. 이 공간은 구터의 크기를 사실상 증가시킵니다.

그리드가 트랙 사이에서 분할(fragmented)된 경우, 해당 트랙 사이의 구터 간격은 없애야 합니다. 구터는 강제 분할 후에도 margin과 달리 무조건 없어진다는 점에 유의하세요(margin과 다름).

구터는 암묵적 그리드의 트랙 사이에만 나타납니다; 첫 번째 트랙 이전이나 마지막 트랙 이후에는 구터가 없습니다. (특히, 구터는 암묵적 그리드의 첫/마지막 트랙과 확장 그리드의 "auto" 선 사이에는 없습니다.)

collapse된 트랙의 구터가 collapse되면, 두 구터가 정확히 겹쳐서 시작과 끝 엣지가 일치합니다. collapse된 트랙의 한쪽에 구터가 없으면(예: 암묵적 그리드의 첫/마지막 트랙), collapse된 구터는 양쪽 모두 구터가 없는 결과가 됩니다.

10.2. auto 마진으로 정렬하기

auto 마진은 그리드 아이템에 대해 블록 레이아웃의 auto 마진과 매우 유사하게 동작합니다:

• 그리드 트랙 크기 계산 시 auto 마진은 0으로 처리됨.
• 인라인 축의 블록 레이아웃에서(CSS2§10.3.3 참고), 두 축 중 어느 쪽이든 auto 마진은 정렬 전 양의 여유 공간을 흡수하며, 이로 인해 해당 축의 self-alignment 속성 효과가 비활성화됨.
• 오버플로우하는 그리드 아이템은 auto 마진을 0으로 정렬하고, 박스 정렬 속성에 따라 오버플로우 처리됨.

10.3. 인라인 축 정렬: justify-self, justify-items 속성

그리드 아이템은 justify-self 속성을 그리드 아이템에, justify-items 속성을 그리드 컨테이너에 사용하여 인라인 방향으로 정렬할 수 있습니다([CSS-ALIGN-3] 참고).

베이스라인 정렬(baseline alignment)이, 해당 축에서 크기가 내재적으로 크기가 결정되는 트랙에 의존하는 그리드 아이템에 지정된 경우 (즉, 아이템의 크기와 베이스라인 정렬이 서로에게 의존하는 순환 의존성이 생김), 해당 아이템은 베이스라인 정렬에 참여하지 않고, 대신 fallback alignment를 원래 지정된 것처럼 사용합니다. 이때 <flex> 트랙 크기는 해당 축의 그리드 컨테이너가 불확정 크기(indefinite size)일 때 "내재적 크기"로 간주합니다.

참고: fallback alignment의 사용 여부는 레이아웃 과정에서 변하지 않습니다. 순환 의존성이 있으면 항상 있습니다.

10.4. 블록 축 정렬: align-self, align-items 속성

그리드 아이템은 블록 방향(인라인 방향에 수직)으로도 align-self 속성을 그리드 아이템에, align-items 속성을 그리드 컨테이너에 사용하여 정렬할 수 있습니다([CSS-ALIGN-3] 참고).

베이스라인 정렬(baseline alignment)이, 해당 축에서 크기가 내재적으로 크기가 결정되는 트랙에 의존하는 그리드 아이템에 지정된 경우 (즉, 아이템의 크기와 베이스라인 정렬이 서로에게 의존하는 순환 의존성이 생김), 해당 아이템은 베이스라인 정렬에 참여하지 않고, 대신 fallback alignment를 원래 지정된 것처럼 사용합니다. 이때 <flex> 트랙 크기는 해당 축의 그리드 컨테이너가 불확정 크기(indefinite size)일 때 "내재적 크기"로 간주합니다.

10.5. 그리드 정렬: justify-content, align-content 속성

그리드의 외부 엣지가 그리드 컨테이너의 콘텐츠 엣지와 일치하지 않는 경우(예: flex 크기의 컬럼이 없을 때), 그리드 트랙은 grid container의 콘텐츠 박스 내에서 justify-content, align-content 속성에 따라 정렬됩니다.

예를 들어, 아래 그리드는 수직 중앙에 위치하며, grid container의 오른쪽 엣지에 정렬되어 있습니다:

.grid {
  display: grid;
  grid: 12rem 12rem 12rem 12rem / 10rem 10rem 10rem 10rem;
  justify-content: end;
  align-content: center;
  min-height: 60rem;
}

트랙이 없는 경우(명시적 그리드가 비어 있고, 암묵적 그리드에서도 트랙이 생성되지 않은 경우), 각 축의 유일한 그리드 선은 grid container의 시작 엣지에 맞춰 정렬됩니다.

특정 justify-content, align-content 값은 트랙 사이를 더 띄우거나(space-around, space-between, space-evenly) 트랙 크기를 변경(stretch)할 수 있습니다. 그리드가 트랙 사이에서 분할(fragmented)된 경우, 이런 추가 공간은 해당 트랙 사이에서 없애야 합니다.

예를 들어, 아래 그리드에서는 span된 아이템의 그리드 영역이 정렬에 의해 구터에 할당된 추가 공간만큼 커집니다:

.wrapper {
  display: grid;
  /* 3행 4열의 그리드 컨테이너 */
  grid: repeat(3, auto) / repeat(4, auto);
  gap: 10px;
  align-content: space-around;
  justify-content: space-between;
}

.item1 { grid-column: 1 / 5; }
.item2 { grid-column: 1 / 3; grid-row: 2 / 4; }
.item3 { grid-column: 3 / 5; }
/* 마지막 두 아이템은 마지막 두 그리드 셀에 자동 배치됨 */

정렬(그리고 gap 간격과 달리)은 트랙 크기 산정 후에 발생하므로, span된 아이템의 트랙 크기가 해당 아이템의 콘텐츠에 의해 결정되면, 정렬 단계에서 정렬 간격만큼 추가 공간을 갖게 됩니다.

10.6. 그리드 컨테이너 기준선(Baseline)

그리드 컨테이너의 첫 번째(마지막) 기준선은 다음과 같이 결정됩니다:

1. 그리드 컨테이너의 첫 번째(마지막) 행 중, 하나 이상의 그리드 아이템이 포함된 행을 찾습니다.

   이 행을 가로지르는 그리드 아이템 중 해당 행에서 baseline alignment에 참여하는 아이템이 하나라도 있으면, 그리드 컨테이너의 baseline set은 해당 그리드 아이템들의 공유 alignment baseline에서 생성됩니다.

   그렇지 않으면, 그리드 컨테이너의 첫 번째(마지막) baseline set은 행 우선 그리드 순서(grid order)(쓰기 모드에 따름)에 따라 만나는 첫 번째(마지막) 그리드 아이템의 alignment baseline에서 생성됩니다. 그리드 아이템이 그리드의 인라인 축에서 alignment baseline을 가지지 않으면, 먼저 테두리 엣지로부터 합성(synthesize)됩니다.

2. 그리드 컨테이너에 그리드 아이템이 하나도 없으면, 그리드 컨테이너는 첫 번째(마지막) baseline set을 가지지 않으며, 필요시 alignment context의 규칙에 따라 합성됩니다. 이 알고리즘을 종료합니다.

그리드 수정된 문서 순서(grid order)는 그리드 아이템이 그리드의 그리드 셀을 순회할 때 만나는 순서입니다. 동시에 만나는 두 아이템은 order-modified document order로 처리됩니다.

위 규칙에 따라 기준선을 계산할 때, 기준선을 기여하는 박스가 스크롤 가능한 overflow 값을 가진 경우, 기준선 결정 목적상 박스는 초기 스크롤 위치에 있다고 간주해야 합니다.

테이블 셀의 기준선 결정 시, 그리드 컨테이너는 line box나 table-row처럼 기준선을 제공합니다. [CSS2]

기준선에 대한 자세한 내용은 CSS Writing Modes 3 § 4.1 Introduction to Baselines 및 CSS Box Alignment 3 § 9 Baseline Alignment Details를 참고하세요.

11. 그리드 레이아웃 알고리즘

이 절에서는 그리드 레이아웃 알고리즘을 정의합니다. 이 알고리즘은 그리드 컨테이너의 크기를 산정하고, 모든 그리드 트랙의 크기와 위치를 산정하며, 그리드 아이템을 배치하여 grid area에 레이아웃합니다.

1. 그리드 아이템 배치 알고리즘을 실행하여 그리드 내 모든 그리드 아이템의 배치를 해석합니다.

2. 그리드 컨테이너의 크기를 산정합니다(§ 5.2 그리드 컨테이너 크기 산정 참고).

   참고: 이 단계에서는, 트랙 크기에서 순환 <percentage> 값은 auto로 처리합니다.

3. 산정된 그리드 컨테이너 크기를 바탕으로, 그리드 크기 산정 알고리즘(Grid Sizing Algorithm)을 실행하여 그리드 크기를 산정합니다.

   참고: 이 단계에서는, 트랙 크기의 <percentage> 값이 그리드 컨테이너 크기에 따라 해석됩니다.

4. 각 그리드 아이템을 해당 포함 블록에 레이아웃합니다. 각 grid area의 너비와 높이는 이 용도에 대해 확정적(definite)으로 간주합니다.

   참고: 크기가 확정적 값으로만 계산되는 공식(예: stretch fit 공식 등)은 모두 확정적이며, stretch된 그리드 아이템의 크기도 확정적으로 간주합니다.

11.1. 그리드 크기 산정 알고리즘

이 절에서는 그리드 크기 산정 알고리즘을 정의합니다. 이 알고리즘은 모든 그리드 트랙의 크기, 그리고 그리드 전체 크기를 결정합니다.

각 트랙은 최소 및 최대 크기 지정 함수(동일할 수도 있음)가 지정됩니다. 각 크기 지정 함수는 다음 중 하나입니다:

• 고정 크기 함수(<length> 또는 해석 가능한 <percentage>).
• 내재적 크기 함수(min-content, max-content, auto, fit-content()).
• 유연 크기 함수(<flex>).

그리드 크기 산정 알고리즘은 이러한 크기 지정 제약을 최종 트랙 크기로 해석하는 방법을 정의합니다.

1. 먼저, 트랙 크기 산정 알고리즘을 사용해 그리드 열의 크기를 결정합니다.

   이 단계에서 그리드 아이템의 레이아웃이 사용 가능한 공간에 의존한다면, 블록 축의 사용 가능한 공간은, 확정적 최대 트랙 크기 지정 함수를 가진 행은 그 크기로, 나머지는 무한대로 가정하세요. 그리드 컨테이너와 모든 트랙이 확정적 크기를 가지면, align-content도 적용하여 아이템이 span하는 gap의 최종 크기를 결정합니다. 그렇지 않으면 트랙 정렬(align-content)의 효과는 무시합니다.

   더 정확한 초기 추정값을 위한 휴리스틱을 도입하는 것이 도움이 될까요? 예를 들어, 아이템이 실제로 가질 수 있는 사용 가능한 공간을 다음 중 최대값으로 가정:

   • 아이템이 span하는 모든 확정적 트랙 크기의 합 (트랙의 min/max 크기 함수가 모두 확정적이면 최대값 사용, fit-content() 인수도 확정적이면 그 값 사용)
   • 아이템이 span하는 트랙 중 min 크기 함수가 min-content 또는 fit-content()이면 아이템의 min-content 크기
   • 아이템이 span하는 트랙 중 min 크기 함수가 auto이면 아이템의 automatic minimum size
   • 아이템이 span하는 트랙 중 min 크기 함수가 max-content 또는 max 크기 함수가 max-content, auto, <flex>이면 무한대

   이 방식은 재레이아웃 횟수를 줄일 수 있지만, 실제 결과가 달라질 사례가 있을까요? 명세에 포함해야 할까요?

2. 다음으로, 트랙 크기 산정 알고리즘으로 그리드 행 크기를 결정합니다.

   블록 축 크기 기여가 필요한 아이템의 인라인 축 사용 가능한 공간은, 이전 단계에서 계산한 그리드 열 크기를 사용합니다. 그리드 컨테이너의 인라인 크기가 확정적이면 justify-content도 적용하여 최종 열 gap 크기를 반영합니다.

3. 그 다음, 행 크기와 정렬이 2단계에서 산정된 후 어떤 그리드 아이템의 min-content contribution이 바뀌면, 변경된 min-content와 max-content contribution을 가지고 그리드 열 크기를 다시 산정합니다(한 번만).

   인라인 축 크기 기여가 필요한 아이템의 블록 축 사용 가능한 공간은, 이전 단계에서 계산한 그리드 행 크기를 사용합니다. 그리드 컨테이너의 블록 크기가 확정적이면 align-content도 적용하여 최종 행 gap 크기를 반영합니다.

   이 반복은 그리드 아이템의 인라인 크기가, 자신의 grid area의 블록 크기에 따라 달라지는 경우(예: column wrap flex 컨테이너, flex-flow: column wrap, 직교 플로우(writing-mode), 멀티컬럼 컨테이너, 그리고 행 크기에 따라 달라지는 aspect-ratio(또는 자식의 aspect-ratio) 등)에서 필요합니다.
4. 그 다음, 3단계에서 열 크기와 정렬이 산정된 후 어떤 그리드 아이템의 min-content contribution이 바뀌면, 변경된 min-content와 max-content contribution을 가지고 그리드 행 크기를 다시 산정합니다(한 번만).

   블록 축 크기 기여가 필요한 아이템의 인라인 축 사용 가능한 공간은, 이전 단계에서 계산한 그리드 열 크기를 사용합니다. 그리드 컨테이너의 인라인 크기가 확정적이면, justify-content도 적용하여 최종 열 gap 크기를 반영합니다.

5. 마지막으로, 그리드 컨테이너 내에서 트랙을 align-content, justify-content에 따라 정렬합니다.

   참고: 이때 트랙 사이에 추가 공간이 생길 수 있으며, gap을 span하는 그리드 아이템의 grid area가 트랙 크기 산정 단계 때보다 더 커질 수 있습니다.

11.2. 트랙 크기 산정 용어

최소 트랙 크기 지정 함수

트랙이 minmax() 함수로 크기 지정되었다면, 함수의 첫 번째 인자. <flex> 값이나 fit-content() 함수로 크기 지정된 경우 auto. 그 외에는 트랙의 크기 지정 함수.

최대 트랙 크기 지정 함수

트랙이 minmax() 함수로 크기 지정되었다면, 함수의 두 번째 인자. 그 외에는 트랙의 크기 지정 함수. 모든 경우에서 auto, fit-content()는 max-content로 취급함(단, fit-content()는 명세에 따라 예외가 있을 수 있음).

사용 가능한 그리드 공간

각 차원별로, 사용 가능한 그리드 공간은 다음과 같습니다:

• 그리드 컨테이너 크기가 확정적이면, 콘텐츠 박스의 크기 사용.

• 그리드 컨테이너가 min-content constraint 또는 max-content constraint 아래에서 크기 산정 중이면, 해당 제약이 사용 가능한 그리드 공간이 되며(불확정적).

참고: 콘텐츠 기반 크기를 나타내는 auto 크기(예: 수평 쓰기 모드의 블록 박스 높이)는 max-content와 동일하게 취급합니다.

모든 경우에서, 사용 가능한 그리드 공간은 그리드 컨테이너의 min/max-width/height 속성이 확정적일 때 그에 맞게 clamp합니다.

여유 공간(free space)

사용 가능한 그리드 공간에서, 모든 그리드 트랙의 기준 크기(base size) 합(구터 포함)을 뺀 값(0보다 작으면 0으로 바닥 처리). 사용 가능한 그리드 공간이 불확정적이면, 여유 공간도 불확정적입니다.

span 개수(span count)

해당 차원에서 그리드 아이템이 가로지르는 그리드 트랙 개수.

참고: 구터는 크기 산정 알고리즘에서 고정 크기 트랙(최소/최대 크기 함수 모두 구터의 사용값)으로 처리됩니다. 구터의 너비도 트랙 크기 산정 알고리즘 계산에 포함해야 합니다.

11.3. 트랙 크기 산정 알고리즘

이 절의 나머지는 트랙 크기 산정 알고리즘입니다. 최소 및 최대 트랙 크기 지정 함수로부터 사용된 트랙 크기를 계산합니다. 각 트랙은 기준 크기(base size), 알고리즘 전체에서 증가하며 결국 트랙의 최종 크기가 되는 <length>와, 성장 한계(growth limit), <length>로 기준 크기의 바람직한 최대값을 제공합니다. 5단계로 구성됩니다:

1. 트랙 크기 초기화
2. 내재적 트랙 크기 해석
3. 트랙 최대화
4. 유연 트랙 확장
5. 늘어진 auto 트랙 확장

11.4. 트랙 크기 초기화

각 트랙의 기준 크기와 성장 한계를 초기화합니다. 각 트랙에 대해, 해당 트랙의 최소 트랙 크기 지정 함수가 다음 중 하나일 때:

고정 크기 함수

절대 길이로 해석하고 그 크기를 트랙의 초기 기준 크기로 사용합니다.

참고: 불확정적 길이는 발생하지 않으며, auto로 처리됩니다.

내재적 크기 함수

초기 기준 크기는 0으로 사용합니다.

각 트랙에 대해, 해당 트랙의 최대 트랙 크기 지정 함수가 다음 중 하나일 때:

고정 크기 함수

절대 길이로 해석하고 그 크기를 트랙의 초기 성장 한계로 사용합니다.

내재적 크기 함수

유연 크기 함수

초기 성장 한계는 무한대로 사용합니다.

모든 경우에, 성장 한계가 기준 크기보다 작으면, 성장 한계를 기준 크기에 맞게 증가시킵니다.

참고: 구터(gutter)는 트랙 크기 산정 알고리즘에서 빈 고정 크기 트랙으로 처리됩니다.

11.5. 내재적 트랙 크기 해석

이 단계는 내재적 트랙 크기 지정 함수를 절대 길이로 해석합니다. 먼저 하나의 트랙에 완전히 포함된 아이템을 기준으로 크기를 해석하고, 그 후 여러 트랙을 span하는 아이템의 공간 요구를 점진적으로 추가하며, 가능한 한 그 추가 공간을 해당 트랙에 균등하게 분배합니다.

참고: 이 단계가 완료되면, 모든 내재적 기준 크기와 성장 한계는 절대 길이로 해석됨.

참고: 참고로 fit-content()와 auto 최대 트랙 크기 지정 함수는 명시적으로 별도로 지정하지 않는 한 max-content처럼 취급합니다.

1. 기준선 정렬된 아이템에 shim 추가하여 내재적 크기 기여가 기준선 정렬을 반영하도록 합니다. 각 기준선 공유 그룹의 아이템들에 대해, 각 아이템의 시작/끝 쪽(첫/마지막 기준선 정렬에 따라)에 "shim"(실질적으로 추가 마진)을 추가하여, 함께 시작/끝에 정렬될 때 기준선이 명세대로 정렬되도록 합니다.

   이 shim을 트랙 크기 산정 시 아이템의 내재적 크기 기여에 포함하여 계산합니다. 아이템이 여러 내재적 크기 기여를 사용할 경우, 각 기여마다 shim이 다를 수 있습니다.

   예를 들어, 그리드 컨테이너가 불확정적 크기일 때, 먼저 min/max-content 제약 하에 레이아웃하여 크기를 구한 후, 그 크기로 실제 레이아웃을 진행합니다(퍼센티지 트랙 등에 영향). 각 단계에서 추가되는 shim은 독립적이며, 해당 단계의 레이아웃에만 영향 줍니다.

   참고: baseline self-aligned와 baseline content-aligned 아이템 모두 이 단계에서 고려됩니다.

   참고: 자신의 크기가 내재적 트랙 크기에 의존하는 그리드 아이템은 기준선 정렬에 참여하지 않으므로 shim을 추가하지 않습니다.

2. span 1인 아이템에 맞게 트랙 크기 조정: 내재적 트랙 크기 함수이며 유연 크기 함수가 아닌 트랙에 대해, span이 1인 아이템들을 고려합니다:

   min-content minimum:

   트랙의 min-content 최소 트랙 크기 함수가 있으면, 해당 트랙의 기준 크기를 그 아이템들의 min-content contribution 중 최대값(최소 0)으로 설정.

   max-content minimum:

   트랙의 max-content 최소 트랙 크기 함수가 있으면, 해당 트랙의 기준 크기를 그 아이템들의 max-content contribution 중 최대값(최소 0)으로 설정.

   auto minimum:

   트랙이 auto 최소 트랙 크기 함수이고, 그리드 컨테이너가 min-/max-content constraint 하에서 크기 산정 중이면, 해당 트랙의 기준 크기를 그 아이템들의 limited min-content contributions 중 최대값(최소 0)으로 설정. limited min-/max-content contribution은 아이템의 min-/max-content contribution을 해당 트랙의 최대 트랙 크기 함수(고정일 경우 fit-content() 인자 등)로 제한하고, 마지막으로 minimum contribution 값으로 바닥 처리함.

   그 외의 경우, 트랙의 기준 크기를 그 아이템들의 minimum contributions 중 최대값(최소 0)으로 설정. minimum contribution은 아이템이 가질 수 있는 가장 작은 outer size입니다. 구체적으로, 아이템의 계산된 preferred size가 auto로 동작하거나, 해당 축에서 포함 블록 크기에 의존하면, minimum contribution은 아이템의 사용된 최소 크기(minimum size)를 preferred size로 간주한 결과 outer size입니다; 그렇지 않으면 minimum contribution은 아이템의 min-content contribution입니다. minimum contribution은 보통 아이템의 콘텐츠 크기에 따라 달라지므로, 내재적 크기 기여의 한 종류로 간주됩니다.

   참고: 최소 크기가 auto(초기값)인 아이템의 경우, minimum contribution은 보통 min-content contribution과 동일하지만, § 6.6 그리드 아이템의 자동 최소 크기 참고. 또한, minimum contribution ≤ min-content contribution ≤ max-content contribution입니다.

   min-content maximum:

   트랙의 min-content 최대 트랙 크기 함수가 있으면, 해당 트랙의 성장 한계를 그 아이템들의 min-content contribution 중 최대값으로 설정.

   max-content maximum:

   트랙의 max-content 최대 트랙 크기 함수가 있으면, 해당 트랙의 성장 한계를 그 아이템들의 max-content contribution 중 최대값으로 설정. fit-content() 최대값의 경우, 이 성장 한계를 fit-content() 인자로 clamp함.

   모든 경우에, 트랙의 성장 한계가 기준 크기보다 작으면, 성장 한계를 기준 크기에 맞게 증가시킵니다.

   참고: 이 단계는 아래 span 아이템 처리 단계의 단순화 버전이며, span 1 아이템에 대해 아래 단계와 동일한 동작을 해야 합니다.

3. 내용 기반 크기 트랙을 span하는 아이템에 맞게 크기 증가: span이 2이면서 유연 크기 함수 트랙을 span하지 않는 아이템을 고려합니다.
   1. 내재적 최소값: 먼저 여분 공간 분배를 내재적 최소 트랙 크기 함수인 트랙의 기준 크기에 분배하여, 해당 아이템의 minimum contribution을 수용합니다.

      그리드 컨테이너가 min- 또는 max-content constraint 하에서 크기 산정 중이면, 아이템의 limited min-content contribution을 여기서 minimum contribution 대신 사용. (여러 트랙 span 시, limited min-/max-content contribution의 상한값은 span하는 모든 트랙의 고정 크기 함수 최대 트랙 크기 함수의 합이고, 해당하는 경우에만 적용됩니다.)

   2. 내용 기반 최소값: 다음으로 여분 공간 분배를 min track sizing function이 min-content 또는 max-content인 트랙의 기준 크기에 분배하여, 해당 아이템의 min-content contribution을 수용합니다.
   3. max-content 최소값: 다음으로, 그리드 컨테이너가 max-content constraint 하에서 크기 산정 중이면, 여분 공간 분배를 min track sizing function이 auto 또는 max-content인 트랙의 기준 크기에 분배하여, 해당 아이템의 limited max-content contribution을 수용합니다.

      모든 경우에, 여분 공간 분배를 min track sizing function이 max-content인 트랙의 기준 크기에 분배하여, 해당 아이템의 max-content contribution을 수용합니다.

   4. 이 시점에서 트랙의 성장 한계가 기준 크기보다 작으면, 성장 한계를 기준 크기에 맞게 증가시킵니다.
   5. 내재적 최대값: 다음으로 여분 공간 분배를 내재적 최대 트랙 크기 함수인 트랙의 성장 한계에 분배하여, 해당 아이템의 min-content contribution을 수용합니다. 이 단계에서 성장 한계가 무한대에서 유한대로 바뀐 트랙은 다음 단계에서 무한대로 성장 가능(infinitely growable)으로 표시함.
      왜 무한대로 성장 가능 플래그가 필요한가?

      Peter Salas 설명:

      다음 경우를 생각해보세요:
      
      두 개의 "auto" 트랙(즉, ''minmax(min-content, max-content) minmax(min-content, max-content)'').
      아이템 1은 1번 트랙에 있고, min-content = max-content = 10.
      아이템 2는 1, 2번 트랙을 span하며, min-content = 30, max-content = 100.
      
      첫 번째 아이템의 min-content/max-content 처리 후:
      
      트랙 1: 기준 크기 = 10 성장 한계 = 10
      
      트랙 2: 기준 크기 = 0 성장 한계 = 무한대
      
      그 다음 두 번째 아이템의 min-content/max-content 처리:
      
      1단계에서 트랙 2 기준 크기를 20으로 설정(두 트랙 합이 30).
      2단계는 해당 없음.
      3단계에서 트랙 2 성장 한계를 20으로 설정(두 트랙 성장 한계 합이 30).
      4단계에서 두 트랙 성장 한계 합을 70만큼 증가시켜 아이템 2를 수용.
      
      두 옵션:
      1. 두 트랙 성장 한계를 동일하게 증가시켜 [45, 55]로 만듦.
      2. 두 번째 트랙만 성장 한계를 증가시켜 [10, 90]로 만듦.
      
      방금 설정된 성장 한계를 제약으로 고려하지 않고(즉, 무한대로 간주),
      두 번째 결과(1번 트랙은 첫 아이템에 딱 맞게 유지)를 얻음. 
      

   6. max-content 최대값: 마지막으로 여분 공간 분배를 최대 트랙 크기 함수가 max-content인 트랙의 성장 한계에 분배하여, 해당 아이템의 max-content contribution을 수용합니다.

   span이 더 큰 아이템에 대해 반복적으로 적용해 모든 아이템이 고려될 때까지 반복합니다.

4. 유연 트랙을 span하는 아이템에 맞게 크기 증가: 위 단계와 동일하게 반복하되, 이번엔 유연 크기 함수 트랙을 span하는 아이템만 함께 고려하며,
   • 유연 트랙만 공간 분배(나머지 트랙은 고정 크기 함수로 간주)
   • 아이템이 span하는 모든 유연 트랙의 유연 크기 함수 합이 1 이상이면, 해당 트랙에 각 함수 비율에 따라 공간 분배; 합이 1 미만이면, 그 비율만큼 공간 분배하고 나머지는 균등 분배
5. 아이템이 없는 트랙이나 유연 트랙 등으로 인해 성장 한계가 아직 무한대인 트랙이 있으면, 해당 트랙의 성장 한계를 기준 크기로 설정합니다.

참고: 여러 트랙을 span하는 아이템이 있을 때 내재적 크기 제약을 만족시키는 단일 방법은 없습니다. 이 알고리즘은 실제 사례에서 좋은 결과를 내는 여러 휴리스틱을 내포하고 있습니다. 명세의 "게임" 예시 등에서 활용된 방식입니다. 앞으로 더 발전된 휴리스틱이 나오면 이 알고리즘도 업데이트될 수 있습니다.

11.5.1. Span된 트랙에 여분 공간 분배하기

11.6. 트랙 최대화(Maximize Tracks)

여유 공간이 양수면, 모든 트랙의 기준 크기에 균등하게 분배하고, 트랙이 성장 한계에 도달하면 동결(freeze)하고, 나머지 트랙은 계속 증가시킵니다.

이 단계에서: 그리드 컨테이너를 max-content constraint 하에서 크기 산정하면, 여유 공간은 무한대; min-content constraint 하에서는, 여유 공간은 0입니다.

이로 인해 그리드가 그리드 컨테이너의 내부 크기(inner size)를 max-width/height로 제한한 값보다 커질 경우, 이 단계를 다시 수행하고, 사용 가능한 그리드 공간을 그리드 컨테이너가 내부 크기에 맞춰 크기 산정됐을 때의 값으로 처리하세요.

11.7. 유연 트랙 확장(Expand Flexible Tracks)

이 단계에서는 유연 트랙의 크기를 fr에 할당할 수 있는 가장 큰 값으로 지정하되, 사용 가능한 공간을 넘지 않게 합니다.

먼저, 그리드의 사용된 flex fraction을 찾으세요:

여유 공간이 0이거나, 그리드 컨테이너를 min-content constraint로 크기 산정 중인 경우:

사용된 flex fraction은 0입니다.

그 외에, 여유 공간이 확정적 길이면:

사용된 flex fraction은 모든 그리드 트랙과 채울 공간(space to fill)이 사용 가능한 그리드 공간인 경우의 fr 크기 찾기 결과입니다.

그 외에, 여유 공간이 불확정적 길이면:

사용된 flex fraction은 아래의 최대값입니다:

• 각 유연 트랙에 대해, 트랙의 flex factor가 1보다 크면, 해당 트랙의 기준 크기를 flex factor로 나눈 값; 그렇지 않으면 트랙의 기준 크기
• 각 그리드 아이템이 유연 트랙을 가로지르는 경우, 해당 아이템이 가로지르는 모든 그리드 트랙과 아이템의 채울 공간이 아이템의 max-content contribution인 경우의 fr 크기 찾기 결과

이 flex fraction을 사용해 그리드가 그리드 컨테이너의 min-width/height보다 작아지거나(grid container의 max-width/height를 넘을 경우), 이 단계를 다시 수행하여 여유 공간을 확정적으로 처리하고, 사용 가능한 그리드 공간을 grid container가 내부 크기에 맞춰 크기 산정됐을 때의 값으로 처리하세요(min-width/height, max-width/height).

각 유연 트랙에 대해, 사용된 flex fraction과 트랙의 flex factor 곱이 트랙의 기준 크기보다 크면, 해당 기준 크기를 그 곱으로 설정하세요.

11.7.1. fr 단위 크기 찾기(Find the Size of an fr)

이 알고리즘은 fr 단위가 목표 크기를 넘지 않게 할 수 있는 최대 크기를 찾습니다. 그리드 트랙 집합과 채울 공간(space to fill)을 입력값으로 호출해야 합니다.

1. 남은 공간(leftover space)을 채울 공간에서 비유연 그리드 트랙의 기준 크기 합을 뺀 값으로 설정하세요.
2. flex factor 합(flex factor sum)을 유연 트랙의 flex factor 합으로 설정하세요. 값이 1보다 작으면 1로 설정하세요.
3. 가상 fr 크기(hypothetical fr size)를 남은 공간을 flex factor 합으로 나눈 값으로 설정하세요.
4. 가상 fr 크기와 유연 트랙의 flex factor 곱이 해당 트랙의 기준 크기보다 작으면, 해당 트랙을 비유연으로 간주하고 이 알고리즘을 다시 시작하세요.
5. 가상 fr 크기를 반환하세요.

11.8. auto 트랙 늘리기(Stretch auto Tracks)

content-distribution property가 그리드 컨테이너에서 해당 축에 normal 또는 stretch이면, 이 단계에서 auto 최대 트랙 크기 함수를 갖는 트랙을, 남은 양수의 확정적 여유 공간을 해당 트랙끼리 균등 분배해 늘리세요. 여유 공간이 불확정적이지만, grid container는 확정적 min-width/height를 갖는 경우, 해당 크기로 여유 공간을 산정해 이 단계에 사용하세요.

12. 그리드 레이아웃 분할(Fragmenting Grid Layout)

그리드 컨테이너는 행, 열 또는 아이템 내부에서 페이지 사이로 분할될 수 있습니다. break-* 속성은 그리드 컨테이너에서 해당 포매팅 컨텍스트의 일반 규칙대로 적용됩니다. 이 절에서는 그리드 아이템 및 그 아이템의 콘텐츠에 적용되는 방식을 정의합니다.

아래 분할 규칙은 fragmentation container를 "페이지"로 칭합니다. 동일한 규칙은 다른 분할 컨텍스트(fragmentation context)에도 적용됩니다. (필요시 "페이지"를 해당 fragmentation container 타입으로 대체하세요.) CSS Fragmentation Module [CSS3-BREAK] 참고.

분할된 그리드 컨테이너의 정확한 레이아웃은 이 명세 레벨에서는 정의되어 있지 않습니다. 그러나 그리드 컨테이너 내부 분할은 다음 규칙을 따릅니다:

• break-before, break-after 속성이 그리드 아이템에 지정되면 해당 아이템의 그리드 행에 전파됩니다. 첫 번째 행의 break-before, 마지막 행의 break-after는 그리드 컨테이너에 전파됩니다.
• 강제 분할이 그리드 아이템 내부에서 발생하면 해당 아이템 콘텐츠 크기가 늘어나지만, 형제 아이템 내부에 강제 분할이 일어나지는 않습니다.
• Class A 분할 기회는 (해당 축에 따라) 행 또는 열 사이에서 발생하며, Class C 분할 기회는 첫/마지막 행(열)과 그리드 컨테이너의 콘텐츠 엣지 사이에서 발생합니다. [CSS3-BREAK]
• 그리드 컨테이너가 분할 후 이어질 때, 해당 그리드 아이템이(분할 컨텍스트의 블록 흐름 방향 기준) 사용할 수 있는 공간은 이전 페이지의 그리드 컨테이너 조각이 차지한 공간만큼 줄어듭니다. 그리드 컨테이너 조각이 차지한 공간은 해당 페이지에서의 콘텐츠 박스 크기입니다. 이 조정으로 인해 사용 가능한 공간이 음수가 되면 0으로 설정합니다.
• 앞의 점에 의해 아이템 재배치가 필요한 경우를 제외하고, UA는 분할되지 않은 흐름과 비교해 그리드 컨테이너 왜곡을 최소화해야 합니다.

12.1. 샘플 분할 알고리즘(Sample Fragmentation Algorithm)

이 절은 규범적이지 않습니다.

이는 가능한 분할 알고리즘의 초안이며, [CSS-FLEXBOX-1] 알고리즘과의 일관성을 반드시 교차 검증해야 합니다. 의견 환영, 실제 구현에서는 위의 규칙을 참고하세요.

1. § 11 그리드 레이아웃 알고리즘을 사용해 fragmentation container의 인라인 크기만 한정, 블록 크기는 무제한으로 그리드를 레이아웃하세요. 이 단계에서 모든 grid-row auto 및 fr 값을 반드시 해석해야 합니다.
2. 이전 단계에서 해석된 값으로 그리드 컨테이너를 레이아웃하세요.
3. grid area의 크기가 분할로 인해 변하면(행 span 아이템은 포함하지 않음), 다음 행에 대해 행 크기를 늘리세요:
   • 콘텐츠 min track sizing function을 가진 행
   • 명시적 높이가 없는 그리드에서 해당 행이 유연(flexible)한 경우
4. 그리드 높이가 auto이면, 그리드 높이는 최종 행 크기의 합이어야 합니다.
5. 분할 중 margin collapse로 인해 grid area가 그리드 컨테이너를 넘치면, 해당 grid area를 포함하도록 그리드 컨테이너를 확장하세요(분할로 인한 순환 레이아웃 의존성 방지 목적).

그리드의 높이가 지정된 경우, 3, 4단계에 의해 그리드 행이 그리드를 초과할 수 있습니다.

13. 개인정보 관련 고려사항

Grid Layout은 새로운 개인정보 유출을 초래하지 않습니다.

14. 보안 관련 고려사항

Grid Layout은 새로운 보안 고려사항을 추가하지 않습니다.

감사의 글

이 명세는 다음의 의견 덕분에 만들어질 수 있었습니다. Erik Anderson, Rachel Andrew, Rossen Atanassov, Oriol Brufau, Manuel Rego Casasnovas, Arron Eicholz, Javier Fernandez, Sylvain Galineau, Markus Mielke, Daniel Holbert, John Jansen, Chris Jones, Kathy Kam, Veljko Miljanic, Charbel Nicolas, Mats Palmgren, François Remy, Sergio Villar Senin, Jen Simmons, Christian Stockwell, Eugene Veselov, 그리고 CSS Working Group 구성원들, 특히 Microsoft의 Rossen Atanassov, Alex Mogilevsky, Phil Cupp, Peter Salas에게 초기 제안서 작성에 특별히 감사드립니다. 또한 Eliot Graff에게 편집적 의견에 감사를 표합니다.

변경사항

이 섹션에서는 이전 버전 이후의 변경 사항을 기록합니다.

2020년 12월 18일 CR 이후의 변경사항 18 December 2020 CR

• 유연 트랙 사이의 flex 합이 0과 1 사이일 때, 고유 트랙 공간 분배를 유연 트랙 전체에 걸쳐 비율 기반 분배와 동등 분배 사이에서 보간하도록 변경하여 0부터의 연속성을 제공합니다. (Issue 6078)

  아이템이 span하는 모든 flexible sizing functions의 합이 zero 1 이상 이면, 이러한 트랙에 공간을 분배할 때 flexible sizing functions의 비율에 따라 공간을 분배하며 공간을 동등하게 분배하지 않습니다 ; 그리고 합이 1 미만이면, 해당 비율에 따라 공간의 일부를 분배하고 나머지는 동등하게 분배합니다

• 그리드 아이템의 내용 기반 최소 크기가 내재적 크기 기여도의 한 종류임을 명확히 하였으며, [CSS-SIZING-3]의 관련 규칙에 의해 영향을 받습니다. (Issue 5665)
• transferred size suggestion의 적용을 치환 요소로 명시적으로 제한하였습니다. 이제 비치환 요소도 aspect-ratio를 가질 수 있습니다. [CSS-SIZING-4] (Issue 6069)
• 압축 가능한 치환 요소의 선호 크기 및 최대 크기의 백분율은 0에 대해 해석되어 내용 기반 최소 크기를 제한하도록 정의되었습니다. 따라서 자동 최소 크기가 min-content 기여도보다 크지 않게 됩니다. (Issue #6278)

  모든 경우에, 크기 제안은 영향을 받는 축의 최대 크기로 추가 제한됩니다. 아이템이 압축 가능한 치환 요소이고, 확정 선호 크기 또는 최대 크기를 해당 축에 가진 경우, 크기 제안은 해당 크기로 제한됩니다; 이때 이러한 크기의 불확정 백분율은 0으로 해석됩니다 (그리고 확정으로 간주).

• 선호 크기 및 최대 크기의 백분율이 항상 transferred size suggestion을 제한하도록 정의되어, 해당 축에 적용되는 크기 제약보다 엄격하지 않게 됩니다. (Issue #6278)

  아이템에 선호 aspect-ratio가 있고 반대 축의 선호 크기가 확정인 경우, transferred size suggestion은 해당 크기입니다 (반대 축의 최소 및 최대 크기로 제한된 경우 확정), aspect-ratio를 통해 변환됩니다. 그렇지 않으면 정의되지 않습니다.

  아이템에 확정 선호 크기 또는 최대 크기가 해당 축에 있으면, transferred size suggestion은 해당 크기로 제한됩니다; 이때 이러한 크기의 불확정 백분율은 0으로 해석됩니다 (그리고 확정으로 간주).

• § 10.2 자동 마진으로 정렬을 규범적으로 만들고 용어를 명확히 하였습니다. 이 동작의 일부 측면이 다른 곳에 정의되어 있지 않았기 때문입니다. (part of Issue 5923)
• 관련 내용 분배 속성이 stretch로 동작할 때 § 11.8 Stretch auto Tracks의 조건을 적용하도록 변경하였습니다. 이 조건은 이전 변경에서 알고리즘에 stretch 처리를 더 잘 통합하는 과정에서 누락되었습니다. (Issue 5966)
• fit-content()가 span 아이템을 수용할 때 트랙 성장 제한 방식에 대해 더 정확하게 정의하였습니다. (Issue 4549)

  내재적 최대값: 다음으로 추가 공간 분배를 성장 제한이 있는 트랙에 분배하며, max track sizing function이 max-content인 트랙에 해당 아이템의 max-content 기여도를 수용합니다. 하지만 fit-content() 트랙의 성장은 fit-content() 인수로 제한됩니다.

  space를 제한까지 분배: […]

  base size의 경우, limit는 성장 제한 , fit-content() 인수가 있는 경우 그것으로 제한 . 성장 제한의 경우, limit는 무한대(∞)이며 무한 성장 가능으로 표시된 경우, 그렇지 않으면 성장 제한과 같음 성장 제한이 유한하고 트랙이 무한 성장 가능이 아니라면 성장 제한, 그렇지 않으면 fit-content() 트랙 크기 함수가 있다면 그 인수, 없다면 무한대 .

  space를 제한 이상 분배: […]

  • 성장 제한 내 기여도를 수용할 때: 모든 affected track 내재적 max track sizing function이 있는 affected track만 .

  이 목적을 위해, max track sizing function이 fit-content() 트랙인 경우, max-content로 간주되며 it 해당 트랙이 fit-content() 인수에 도달하면, 이후에는 it 해당 max track sizing function 이 having 되는 것으로 고정 크기 함수가 해당 인수 (이 단계에서 공간을 계속 받는 트랙이 달라질 수 있음) 로 취급합니다.

• static position이 grid-placement 속성에 민감하지 않게 하여, 항상 grid container의 내용 박스를 기준으로 합니다. (Issue 7661)

  static position [CSS2]은 grid container의 절대 위치 자식이 유일한 grid item인 것처럼 grid area의 가장자리와 grid container의 내용 가장자리가 일치하도록 결정됩니다. 단, grid container 부모가 절대 위치 요소의 containing block 생성자인 경우, 대신 § 9.1 그리드 컨테이너를 포함 블록으로 사용에서 결정된 grid area를 사용합니다.

• Grid Sizing Algorithm 개요를 재배치하여 그리드 컨테이너 크기 지정과 그리드 트랙 크기 지정 간의 관계를 더 잘 전달하도록 하였습니다. § 11 Grid Layout Algorithm 참조. (Issue 3418)

2020년 8월 18일 CR 이후의 변경사항 18 August 2020 CR

• 이전 CR에서 § 6.2 Grid Item Sizing이 aspect-ratio와 상호작용을 명확히 하려 했으나 생긴 오류를 수정하였습니다.
• "intrinsic aspect ratio"라는 표현을 더 일반적인 용어인 preferred aspect ratio로 일부 변경하였습니다. (Issue 4962)
• 사소한 편집 및 용어 통일.

2017년 12월 15일 CR 이후의 변경사항 15 December 2017 CR

Disposition of Comments를 제공합니다.

주요 변경사항

• 그리드 아이템 블록 축 마진 및 패딩이 블록 치수에 대해 해석되는 옵션을 제거하였습니다. 블록처럼 인라인 치수로 해석되어야 합니다. (Issue 2085)
• 유연 트랙에 span하는 아이템 처리 방식을 조정하여, 고유 최소값을 가진 유연 트랙의 크기에도 영향을 주도록 하였습니다. (Issue 2177)

  • span하지 않는 아이템에 맞게 트랙 크기 지정: 내재적 트랙 크기 함수가 있고 유연 크기 함수가 없는 각 트랙에 대해, span이 1인 아이템을 고려:
  • …
  • 유연 트랙을 넘는 span 아이템에 맞게 크기 증가: 이전 단계를 반복하되, (span 크기별로 그룹화하지 않고 전체를 함께 고려) 유연 크기 함수를 가진 트랙을 span하는 모든 아이템을 고려하고
    • 유연 트랙을 max track sizing function이 min track sizing function과 같도록 취급
    • 공간은 유연 트랙에만 분배 (즉, 나머지 트랙은 고정 크기 함수를 현재 base size로 취급)
    • 공간은 유연 크기 함수 비율로 분배하며, 동등하게 분배하지 않음

• auto 최소 트랙에 아이템이 기여할 때, 그리드를 min-content/max-content 제약 조건 아래에서 크기 지정할 때 고정 최대값을 넘지 않게 제한하였습니다. (Issue 2303)

  트랙에 auto 최소 트랙 크기 함수가 있고 grid container를 min/max-content 제약 아래에서 크기 지정하는 경우, 트랙의 base size를 아이템의 min/max-content 기여도 최대값으로 설정합니다. 각각 max track sizing function이 고정이면 그 값 이하로 제한, 그리고 궁극적으로 최소 기여도 이상으로 바닥 처리합니다.

  ISSUE: span 아이템 처리 필요.

• 트랙 정렬 (align-content/justify-content)을 트랙 크기 지정 알고리즘에 더 잘 통합하였습니다. (Issue 2557, Issue 2697)
• 사용된 트랙 목록 값을 repeat() 표기법 없이 직렬화해야 함을 요구하였습니다. (Issue 2427)
• UA가 지원해야 하는 최소 트랙 수를 명시하였습니다 (메모리 압박 등 특별한 경우 제외). (Issue 2261)

  메모리가 제한되어 있으므로, UA는 grid의 가능한 크기를 UA가 정의한 한계 내로 제한할 수 있습니다 ([-10000, 10000] 범위 내 라인을 수용해야 함) , 그 한계를 벗어난 모든 라인은 생략됩니다. 그리드 아이템이 해당 한계를 벗어난 곳에 배치될 경우, 해당 아이템의 그리드 영역은 한계 내로 클램프되어야 합니다.

• auto가 라인 이름 <custom-ident>에서 제외됨을 명시하였습니다. (Issue 2856)
• specified value가 grid-template-areas의 null cell token 및 공백을 정규화해야 함을 요구하였습니다. (Issue 3261)

  specified value 및 computed value 모두, <string> 값의 grid-template-areas는 각 null cell token을 단일 "."(U+002E FULL STOP)으로, 각 공백 시퀀스를 단일 공백(U+0020 SPACE)으로 직렬화합니다.

• 그리드 컨테이너 자식의 static position은 패딩 가장자리 대신 내용 가장자리에 대해 해석되어야 함을 명시하였습니다. (Issue 3020)

  static position [CSS2]은 grid container의 절대 위치 자식이 유일한 grid item인 것처럼 grid area의 가장자리가 padding content 가장자리와 일치하도록 결정됩니다. grid container.

• 그리드와 주변 패딩이 스크롤 가능한 오버플로우 영역에 포함됨을 명시하였습니다. § 5.3 스크롤 가능한 그리드 오버플로우 참조. (Issue 3638, Issue 3665)
• 추가 공간 분배 시 유연 트랙의 유연 크기 함수 합이 0일 때 0으로 나누지 않도록 변경하였습니다. (Issue 3694)

  아이템이 span하는 모든 유연 크기 함수의 합이 0보다 크면, 이러한 트랙에 공간을 분배할 때 유연 크기 함수의 비율에 따라 공간을 분배하며, 공간을 동등하게 분배하지 않습니다

• 유연 트랙의 성장 제한을 내재적 크기로 계산하지 않도록 변경하였습니다; 내재적 트랙 크기 지정 끝에 base size로 설정하여 Maximize Tracks 단계에서 성장하지 않게 하였습니다 (auto 최소 트랙 크기 함수와 최대 트랙 크기 함수 해석 차이 등 때문). (Issue 3693)

  • 유연 트랙을 max track sizing function이 min track sizing function과 같도록 무한 성장 제한으로 취급

  트랙에 여전히 무한 성장 제한이 남아 있다면 (예: 아이템이 배치되지 않았거나 유연 트랙 인 경우), 성장 제한을 base size로 설정합니다.

• 유연 트랙 확장 시 min-content 제약을 자유 공간 0과 동일하게 취급하도록 하였습니다. (Issue 3683)

  free space가 0이거나 grid container를 min-content 제약 아래에서 크기 지정하는 경우 :

  사용된 flex fraction은 0입니다.

• 그리드 아이템이 여러 트랙에 span할 때, 그 중 하나라도 유연 트랙이면 자동 최소 기여도를 0으로 처리하도록 변경하였습니다. (Issue 4783)

  최소 크기의 더 합리적인 기본값을 제공하기 위해, grid item의 사용된 an its 자동 최소 크기는 주어진 축에서 on a grid item that is not a scroll container and that spans at least one track in that axis whose min track sizing function is auto 내용 기반 최소 크기입니다 ; 다음 조건을 모두 만족하는 경우:

  • scroll container가 아님
  • 해당 축에서 track을 하나 이상 span하며, 그 중 min track sizing function이 auto인 트랙을 span함
  • 해당 축에서 둘 이상의 트랙을 span하는 경우, 해당 트랙 중 유연 트랙이 없어야 함

  그 외에는, 사용된 자동 최소 크기는 otherwise 평소처럼 0입니다.

사소한 변경사항

• 그리드 컨테이너의 기준선(baseline)을 찾을 때 첫 번째 행 이후의 아이템을 무시하도록 했던 의도하지 않은 변경을 되돌렸습니다. 또한 탐색 순서를 명확히 하였습니다. (Issue 3645)

  • 그 외에, 그리드 컨테이너에 하나 이상의 grid item이 있다면 whose area intersects the first (last) row , 그리드 컨테이너의 첫 번째(마지막) 기준선 집합은 생성됩니다 첫 번째(마지막) alignment baseline을 가진 such grid item을 행 우선 grid order로 (writing mode에 따라 grid container 기준) 찾습니다. 아이템이 그리드의 인라인 축에서 alignment baseline을 가지고 있지 않다면, 경계선으로부터 먼저 합성됩니다.

• auto-fit 또는 auto-fill 반복 횟수를 계산할 때, 최대 트랙 크기 함수를 최소 트랙 크기 함수로 바닥 처리(floor)하도록 하였습니다. (Issue 4043)

  … (각 트랙을 max track sizing function으로 취급하되, 확정이면 해당 값으로, 그렇지 않으면 최소 트랙 크기 함수로, 둘 다 확정일 경우 max track sizing function을 min track sizing function으로 바닥 처리 그리고 gap을 고려) …

• 유연 트랙의 growth limit을 처음에는 base size로 설정했다가 나중에 변경하는 대신, 처음부터 무한대로 초기화하도록 하였습니다. (Issue 4313)

  고유 크기 함수

  유연 크기 함수

  초기 growth limit을 무한대로 사용합니다.

  유연 크기 함수

  트랙의 초기 base size를 초기 growth limit로 사용.

  • 유연 트랙을 무한 growth limit을 갖는 것으로 처리

  이 변경은 편집상 변경이며, 구현에는 영향을 주지 않습니다.
• grid-template-areas <string> 값에서 공백이 정규화됨을 명확히 하였습니다. (Issue 4335) § 7.3.1 템플릿 문자열 직렬화 참조.
• "기준선 정렬 아이템 사용 가능하면 사용"과 "첫 번째 행에 없어도 등장하는 첫 아이템 사용" 조건이 올바르게 조합되었음을 명확히 하였습니다. 즉, 첫 행에 아무것도 없고 두 번째 행에 기준선 정렬 아이템만 있다면, 그 아이템을 사용합니다(해당 행의 첫 아이템만 사용하는 것이 아니라). (Issue 3645 일부)

  1. 최초(마지막) grid container 행에서 하나 이상의 grid item을 찾습니다.

     이 행과 교차하는 grid items 중 baseline alignment에 참여하는 것이 있다면, 이 행과 교차하는 grid items 중 해당 행에서 baseline alignment에 참여하는 것이 있다면, 그리드 컨테이너의 baseline set은 생성되며 해당 alignment baseline을 공유하는 grid items 기준으로 합니다.

     그 외에, 그리드 컨테이너에 하나 이상의 grid item이 있다면, 그 외에는, 그리드 컨테이너의 최초(마지막) 기준선 집합은 생성되며 행 우선 grid order로 첫 번째(마지막) grid item의 alignment baseline을 기준으로 합니다(writing mode에 따라 grid container 기준). 아이템에 alignment baseline이 없다면, grid item이 그리드의 인라인 축에서 alignment baseline을 가지고 있지 않다면, 경계선에서 먼저 합성됩니다.

  2. 그 외에는, 그리드 컨테이너에 첫(마지막) baseline set이 없습니다, grid container에 grid items이 하나도 없다면, 그리드 컨테이너에 첫(마지막) baseline set이 없습니다, 필요하다면 합성되어 alignment context 규칙에 따릅니다.

• 올바른 기준선 정렬에 참여하는 아이템만 찾도록 제한함을 명확히 하였습니다. (Issue 5293)

  이 행과 교차하는 grid items 중 그 행에서 baseline alignment에 참여하는 경우, 그리드 컨테이너의 baseline set은 생성되며 해당 grid items의 공유된 alignment baseline을 기준으로 합니다.

• grid-template-areas가 그리드 내에 적어도 하나의 셀을 정의해야 함을 요구합니다; grid-template-areas: "" "";는 유효하지 않습니다. (Issue 5110)

  모든 문자열은 동일한 개수의 columns 셀 토큰 (named cell tokens 또는 null cell tokens), 그리고 최소 한 개의 셀 토큰이 있어야 하며, 그렇지 않으면 선언이 무효입니다.

• 고유 max track sizing function의 공간 분배에서 min-content contribution을 minimum contribution으로 잘못 변경했던 부분을 되돌렸습니다. (Issue 4790)

  고유 최대값: 다음으로 growth limit을 증가시키며, 고유 max track sizing function을 가진 트랙에 필요한 추가 공간을 분배하여 해당 아이템의 minimum min-content 기여도를 반영합니다.

• automatic minimum size가 computed value의 overflow 값에 조건적으로 결정되도록 하여, scroll container 여부에 의존하지 않게 하였습니다. 예를 들어 치환 요소의 scrollable overflow value가 non-scrollable used value로 결정되는 경우를 방지합니다. (7714)

명확화

• grid-auto-rows와 grid-auto-columns가 explicit grid tracks 중 grid-template-areas에 의해 생성되었으나 grid-template-rows 또는 grid-template-columns로 크기가 지정되지 않은 트랙에도 적용됨을 명확히 하였습니다. (Issue 4914)

  … 이 라인들과 explicit grid가 함께 implicit grid를 형성합니다. grid-auto-rows와 grid-auto-columns 속성은 이 implicit grid tracks의 크기를 지정합니다 , 그리고 explicit grid tracks 중 grid-template-areas에 의해 생성되었으나 grid-template-rows 또는 grid-template-columns로 명시적으로 크기가 지정되지 않은 트랙에도 적용됩니다

  grid-auto-columns와 grid-auto-rows 속성은 크기를 지정하지 않은 암시적 트랙 grid-template-rows 또는 grid-template-columns로 크기가 지정되지 않은 트랙 의 크기를 지정합니다.

  여러 트랙 크기가 주어지면, 패턴이 반복되어 암시적 영향받는 트랙의 크기를 찾습니다. explicit grid 트랙 이후 첫 implicit grid 트랙이 첫 번째 지정된 크기를 받고, 그 이후로 계속 적용됩니다; 마지막 implicit grid track은 explicit grid 전에 마지막 지정된 크기를 받고, 그 이후로 뒤쪽에도 적용됩니다.

• track sizing algorithm에서 gutter가 고정 크기 트랙으로 처리됨을 상기시키는 내용을 추가하였고, span 아이템과의 관계(물론 해당 라인을 span하는 아이템이 gutter도 span함)를 명확히 하였습니다. (Issue 2201)

  트랙 크기 지정 시, 각 gutter는 추가적인, 비어 있는 , 고정 크기 트랙으로 지정된 크기로 취급되며 , 해당 grid line을 span하는 grid items가 gutter도 span합니다 .

  참고: gutter는 그리드 크기 알고리즘에서 고정 크기 트랙(최소 및 최대 크기 함수가 gutter의 사용된 크기로 모두 지정된 트랙)으로 처리됨을 상기하세요. gutter의 너비는 track sizing algorithm 계산에 반드시 포함되어야 합니다.

• 고유 크기 지정 중 트랙 크기가 0 이하로 내려가지 않도록 하였습니다. (Issue 2655)
• 각 속성, 특히 grid-template-rows 및 grid-template-columns의 계산값 및 애니메이션 타입 라인을 더 명확히 정의하였습니다. (PR 3198, Issue 3201)
• minimum contribution이 intrinsic size contribution의 한 종류임을 명확히 하였습니다. (Issue 3660)

  minimum contribution은 intrinsic size contribution의 한 종류로 간주되며, 아이템의 외부 크기입니다…

• 성장 제한을 넘어 공간을 분배하는 조건을 올바른 단계와 명확히 매칭하도록 하였습니다. (Issue 3621)

  • 다음의 경우 min-content 또는 auto 최소값을 가진 트랙의 base size 처리 최소 기여도 또는 min-content 기여도 수용 : 해당 단계에서 고유 max track sizing function을 가진 트랙은 모두, 그렇지 않으면 모든 영향을 받는 트랙.
  • 다음의 경우 max-content 최소값을 가진 트랙의 base size 처리 max-content 기여도 수용 : 해당 단계에서 max-content max track sizing function을 가진 트랙은 모두, 그렇지 않으면 모든 영향을 받는 트랙.

• minimum contribution이 최소 크기에서 결정되는 경우를 명확히 하였습니다. (Issue 3612)

  minimum contribution은 아이템이 가질 수 있는 가장 작은 외부 크기입니다. 구체적으로, 아이템의 사용된 minimum size(관련 축에 따라 min-width 또는 min-height)를 preferred size(width 또는 height, 관련 축에 따라)에 적용하여 계산한 외부 크기입니다. 만약 computed preferred size가 auto로 동작하거나 해당 축에서 컨테이너 크기에 의존한다면 ; 그렇지 않으면 아이템의 min-content contribution이 됩니다. minimum size는 아이템의 콘텐츠 크기에 따라 달라지는 경우가 많으므로, intrinsic size contribution의 한 종류로 간주됩니다.

• display: contents 속성을 가진 중간 요소를 거쳐 블록화가 발생함을 명확히 하였고, grid 또는 inline-grid 요소가 실제로 grid container 박스를 생성하는지 여부는 고려하지 않는다고 명확히 하였습니다. (Issue 4065)

  그리드 아이템의 display 값은 blockified된다: grid container를 생성하는 요소의 in-flow 자식의 지정된 display가 inline-level 값이면 block-level로 계산됨. 가장 가까운 상위 요소의 computed display 값이 (display:contents 상위는 건너뛰고) grid 또는 inline-grid이면, 해당 요소의 display 값은 blockified됨.

  참고: 블록화는 flex 또는 inline-flex 요소가 실제로 flex container 박스를 생성하지 않아도(예: 치환되거나 display: none 하위 트리에 있을 때) 발생합니다.

• fit-content()의 인수가 automatic minimum size를 clamp하지 않는다는 점을 상기시키는 내용이 추가되었습니다. (Issue 4549)

  fit-content()의 인수는 content-based minimum size를 고정 max track sizing function처럼 clamp하지 않습니다.

• § 11.7 유연 트랙 확장에서 유연 트랙의 선행조건을 명확히 하였습니다.

  사용된 flex fraction은 다음 중 최대값입니다:

  • 각 유연 트랙에 대해, 트랙의 flex factor가 1보다 크면 base size를 flex factor로 나눈 값, 그렇지 않으면 base size.
  • 유연 트랙을 교차하는 각 grid item에 대해, 해당 아이템이 교차하는 모든 grid track과 아이템의 max-content contribution을 채우는 공간을 사용하여 fr 크기를 찾은 값.

• item-incurred increase의 초기 계산을 더 읽기 쉽게 하였습니다. (Issue 5351)

  공간을 base sizes에서 growth limits까지 분배: 영향받는 크기를 가진 span 트랙마다 item-incurred increase를 찾습니다: 해당 트랙들에 공간을 동등하게 분배하고, 트랙의 item-incurred increase가 영향받는 크기 + item-incurred increase가 growth limit limit 에 도달하면 freeze(고정)합니다 (필요하면 고정되지 않은 트랙을 계속 증가시킵니다).

  이 단계에서 트랙이 무한 성장 가능으로 표시되었다면, growth limit을 무한대로 처리합니다 (이후에는 표시 해제).

  base sizes의 경우, limit는 해당 growth limit입니다. growth limits의 경우, limit는 무한 성장 가능으로 표시되어 있으면 무한대, 그렇지 않으면 growth limit입니다.

  참고: 영향받는 크기가 growth limit일 경우 그리고 해당 트랙이 무한 성장 가능으로 표시되어 있지 않으면, 각 item-incurred increase는 0이 됩니다 이 단계는 효과가 없습니다 .

2016년 9월 29일 CR 이후의 변경사항 29 September 2016 CR

의견 처리 결과도 제공됩니다.

주요 변경사항

• subgrid 기능을 구현 부족 및 추가 논의 필요로 인해 2단계로 연기함. (Issue 958)
• grid-row-gap 및 grid-column-gap을 grid 축약형에서 리셋되는 속성 목록에서 제거함. (Issue 1036)
• grid-row-gap, grid-column-gap 및 grid-gap 속성을 제거하고, row-gap, column-gap, gap으로 대체함 이제 CSS Box Alignment에서 정의됨. (Issue 1696)
• 자동 크기 지정이 적용된 그리드 아이템(예: 이미지)의 자연 치수를 정렬 속성이 normal일 때(기본값) 항상 유지하도록 변경함. (Issue #523) § 6.2 Grid Item Sizing 참고(원본과 비교).
• <percentage> 트랙이 그 크기가 해당 트랙 크기에 의존하는 grid container 내부에서 구현을 맞추기 위해 auto로 크기 지정 후, 결과 grid container 크기에 비율을 적용하도록 동작을 변경함. auto 트랙과 동일하게 처리하거나, grid container 크기와 함께 증가시켜 비율을 오버플로우 없이 맞추는 대신, auto 크기에서 증가시킵니다. 이로 인해 grid container를 오버플로우하거나, 트랙의 콘텐츠가 트랙을 오버플로우할 수 있습니다. <percentage> 크기가 fit-content 크기를 가진 grid containers (예: auto 크기의 인라인 또는 플로트 grid containers)에서 자주 발생함. (이런 문제를 피하려면, 비율을 유지하면서 오버플로우를 방지하는 <flex> 단위를 사용하세요.)

  grid container의 크기가 트랙 크기에 따라 결정되는 경우, <percentage>는 auto로 취급해야 하며 그리드 컨테이너의 고유 크기를 계산할 때는 이렇게 하고, 그 후 그 크기에 대해 그리드와 아이템을 레이아웃할 때 비율을 적용해야 함 . UA는 트랙의 고유 크기 기여도를 그리드 컨테이너 크기에 맞게 조정하고, 비율을 맞추기 위해 트랙의 최종 크기를 최소한으로 증가시킬 수 있음.

주요 조정 및 수정

• flex factor가 1로 클램핑되는 동작을 불확정(indefinite) 경우에도 적용함 (Issue 26, 논의 참고):

  각 유연 트랙의 base size를 flex factor로 나눈 값 유연 트랙의 flex factor가 1보다 크면, 트랙의 base size를 flex factor로 나눈 값; 그렇지 않으면 트랙의 base size를 사용.

• stretch 트랙 크기 지정을 트랙 크기 알고리즘에 더 잘 통합함. (Issue 1150, Issue 1866)

  트랙들은 grid container 내에서 align-content 및 justify-content 속성에 따라 정렬됨. 참고: 이로 인해 트랙 내 혹은 트랙 사이에 추가 공간이 생길 수 있습니다. 트랙 내에 공간이 생길 때는, auto max track sizing function을 가진 트랙만 공간을 받음.

  트랙 사이에 추가 공간이 생길 수 있으며, gap을 span하는 그리드 아이템의 그리드 영역이 트랙 크기 지정 시 할당된 공간을 초과해서 커질 수 있습니다.

  단계는 4 5 가지입니다:

  1. 트랙 크기 초기화
  2. 고유 트랙 크기 결정
  3. 트랙 최대화
  4. 유연 트랙 확장
  5. Stretched auto 트랙 확장

  Stretch auto 트랙

  이 단계에서는 auto max track sizing function을 가진 트랙을 남은 양의 양수 definite free space를 트랙에 똑같이 분배하여 크기를 키웁니다. free space가 indefinite이지만, grid container에 definite min-width/height가 있으면, 해당 크기를 이 단계에서 free space 계산에 사용함.

• 기준선 정렬을 트랙 크기 알고리즘에 더 잘 통합하였고, 순환(cyclic) 상황은 포함되지 않도록 함. (Issue 1039, Issue 1365,)

  baseline alignment가 grid item에 지정되어 있고, 해당 축의 크기가 고유 크기 트랙에 의존하는 경우(즉, 아이템 크기와 기준선 정렬이 서로 순환 의존성을 만듦), 그 아이템은 기준선 정렬에 참여하지 않고, 대신 fallback alignment를 사용함.

  기준선 정렬된 아이템에 shim(추가 마진)을 적용하여 고유 크기 기여도가 기준선 정렬을 반영하도록 함. 각 baseline-sharing group의 아이템에 대해, 시작/끝(최초/최종 기준선 정렬)에 추가 마진(shim)을 더하여 함께 기준선 정렬될 때 명시된 기준선에 맞게 정렬됨.

  이 shim은 트랙 크기 지정을 위해 아이템의 고유 크기 기여도의 일부로 간주함. 아이템이 고유 크기 기여도가 여러 개 있으면, 각각 다른 shim을 가질 수 있음.

  참고: baseline self-aligned와 baseline content-aligned 아이템 모두 이 단계에서 고려됨.

  참고: 자신의 크기가 고유 크기 트랙에 의존하는 grid item은 기준선 정렬에 참여하지 않으므로, shim이 적용되지 않음.

• 그리드 아이템의 자동 최소 크기가 auto 트랙에 span될 때만 트리거되도록 조정함 (Issue 12) 아이템에 aspect-ratio가 있을 때 transferred size에도 올바르게 반영되도록 함 (Issue 11) 이로 인해 최소값이 오버플로우를 강제하지 않도록 함:

  … auto 값의 min-width/min-height도 지정된 축에서 automatic minimum size를 적용하며, grid items 중 overflow 값이 visible이며 그리고 span된 트랙 중 min track sizing function이 auto인 트랙이 하나 이상일 때 . …

  하지만 grid item이 grid tracks 중 max track sizing function이 fixed인 것만 span하는 경우, 해당 automatic minimum size 지정 크기 및 콘텐츠 크기 해당 차원에서 (다른 차원의 transferred size 입력도) stretch fit의 grid area 크기 이하로 클램프됨 (automatic minimum size가 고정 크기 그리드 영역을 오버플로우시키는 것을 방지) .

• 그리드 아이템의 자동 최소 크기가 content size와 transferred size 중 더 작은 값이 아니라 transferred size를 우선 사용하도록 조정함. (Issue #1149)

  … 이 효과는 automatic minimum size가 flex items에 적용되는 것과 유사함.) [CSS-FLEXBOX-1]

  automatic minimum size는 해당 차원에서 grid item에 대해 지정 크기가 있으면 그 값, 없으면 transferred size, 그마저도 없으면 content size를 사용함. 각 값은 [CSS-FLEXBOX-1]에서 정의됨. 하지만 grid item이 grid tracks 중 max track sizing function이 fixed인 것만 span하면 …

• 알고리즘에서 auto min track size 처리 시 max-content 제약을 올바르게 다루지 못하는 오류를 수정함; 편집적 개선도 추가함. (Issue 5)

  2. span 아이템에 맞게 크기 증가: span이 2인 아이템 중 flexible sizing function이 없는 트랙만 span하는 아이템을 고려 , min track sizing function이 auto인 경우, 그리드 컨테이너가 min-content/max-content로 크기 지정될 때 각각 그 값으로 취급함 :
     1. …
     2. 내용 기반 최소값: base size를 계속 증가시켜 min track sizing function이 min-content 또는 max-content인 트랙에 , 그리고 min track sizing function이 auto인 트랙이 그리드 컨테이너가 min-content constraint로 크기 지정될 때 추가 공간을 분배하여 해당 아이템의 min-content contribution을 반영함.
     3. max-content 최소값: base size를 계속 증가시켜 min track sizing function이 max-content인 트랙에 , 그리고 max track sizing function이 auto인 트랙이 그리드 컨테이너가 max-content constraint로 크기 지정될 때 추가 공간을 분배하여 해당 아이템의 max-content contribution을 반영함.

• 추가 공간 분배 알고리즘에서 누적이 아이템별이 아니라 트랙 집합별로 적용되며, 아이템별 분배 공간은 계획된 증가치에 더하는 것이 아니라 max()로 처리해야 함을 명확히 함. (Issue #1729)

  2. 각 아이템을 고려하여,
     1. …
     2. 성장 제한까지 base size에 공간 분배: 각 span된 트랙의 계획된 증가치에 공간을 동등하게 분배함 각 span된 트랙마다 영향 크기가 있는 경우 item-incurred increase를 찾고 공간을 동등하게 분배함 , 트랙 크기가 growth limit에 도달하면 freeze(고정)하며, 고정되지 않은 트랙을 필요에 따라 계속 증가시킴. …
     3. 성장 제한 이상에 공간 분배: 모든 트랙이 freeze된 후 공간이 남으면, unfreeze 후 계속 공간을 item-incurred increase에 분배함 …
     4. 각 영향받는 트랙마다, 트랙의 item-incurred increase가 트랙의 planned increase보다 크면, planned increase를 그 값으로 설정.
  3. [번호 변경 2.4 → 3] 트랙의 영향 크기를 업데이트하여 planned increase를 더함. (영향 크기가 무한 growth limit이면, 트랙의 base size에 planned increase를 더해 설정.)

• 트랙 크기 지정이 끝난 후 grid areas를 definite로 간주하여 grid items 레이아웃에 적용하도록 명시함. (Issue 1319, Issue 1320)

  각 grid area의 크기가 정해지면, grid items을 각각의 containing block에 레이아웃함. grid area의 너비와 높이는 이 목적상 definite로 간주됨.

  참고: definite 크기만으로 계산된 공식(예: stretch fit 공식)은 definite이므로, stretched된 grid item의 크기도 definite로 간주됨.

• block-level grid container 크기 정의 오류를 수정함: in-flow block-level grid containers는 stretch-fit size를 사용하고, out-of-flow block-level grid는 fit-content size를 사용함. 이는 치환되지 않은 block boxes와 동일함. (Issue 1734)

  block-level 박스가 block formatting context에 있을 때, block box처럼 크기가 지정되며, auto inline size는 in-flow 치환되지 않은 block box와 동일하게 계산됨.

• implicit grid track 크기 계산에 패턴 반복 오류를 수정함. (Issue 1356)

  여러 트랙 크기가 주어지면, 패턴을 반복하여 암시적 트랙 크기를 찾음. 첫 번째 implicit grid track은 before explicit grid 이후에 첫 번째 지정 크기를 받고, 이후로 계속 적용; 마지막 implicit grid track은 explicit grid 전 마지막 지정 크기를 받고, 이후로 뒤쪽에도 적용됨.

명확화

• fit-content()가 stretch align-content/justify-content에 영향을 받지 않는다는 점을 명확히 함. (Issue 1732)

  다음 공식에 해당함: min(max-content, max(auto, argument)), 계산 방식은 auto와 유사함 auto와 비슷함(즉, minmax(auto, max-content) ) , 단 트랙 크기가 argument가 auto 최소값보다 크면 argument로 clamp됨.

• minimum contribution 정의를 명확히 함. (Issue #507)

  그 외에는, base size를 각 아이템의 minimum contributions 최대값으로 설정 : . minimum contribution은 해당 아이템의 각각의 값으로 지정됨 최소 크기를 지정 크기로 가정하여 얻어지는 외부 크기임 min-width 또는 min-height 값 (관련 축에 따라) 을 지정 크기로 가정 지정 크기가 (width 또는 height, 관련 축에 따라) auto라면, 아니면 아이템의 min-content contribution을 사용.

• distributed alignment로 할당된 공간도 gutter이며, gutter가 접히면 함께 접힌다는 점을 명확히 함. (Issue #1140)

  collapsed track은 0px 고정 트랙 크기 함수로 취급하며, 양쪽 gutter는 —​distributed alignment로 할당된 공간 포함—​ collapse됨.

  CSS Box Alignment의 변경사항도 참고:

  Alignment Subject(s): 해당 축의 non-collapsed grid tracks. 해당 축의 grid tracks 전체, 트랙 사이에 삽입된 공간은 해당 gutter에 포함, collapsed gutter는 하나의 공간 삽입 기회로 취급.

• flexible length의 설명에서 "leftover space"로 용어 변경(기존 "free space"와의 혼동 방지). (Issue #1120)
• Maximize Tracks 단계가 트랙의 base sizes를 키운다는 점을 명확히 함. (Issue #1120)

  free space가 양수면, 모든 트랙에 base sizes를 기준으로 동등하게 분배함, 트랙 크기가 growth limits에 도달하면 freeze(고정)하고, 필요하면 고정되지 않은 트랙을 계속 키움.

• 기타 사소한 오류 수정 및 편집 개선.