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

이 그리드 레이아웃 모듈과 Flexible Box Layout Module 사이에 불일치가 있는 것을 발견하시면, 이는 오류일 가능성이 있으므로 CSSWG에 보고해 주시기 바랍니다.

1. 소개

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

그리드 레이아웃은 박스와 그 내용의 크기 및 위치 지정을 강력하게 제어할 수 있는 CSS용 레이아웃 모델입니다. 단일 축 지향인 Flexible Box Layout과 달리, 그리드 레이아웃은 두 차원 레이아웃(두 축 모두에서 콘텐츠 정렬이 필요한 경우)에 최적화되어 있습니다.

또한, 항목을 그리드에 명시적으로 배치할 수 있는 능력 덕분에, 그리드 레이아웃은 시각적 레이아웃 구조를 극적으로 변경하더라도 대응하는 마크업 변경을 요구하지 않습니다. 미디어 쿼리와 그리드 컨테이너 및 그 자식의 레이아웃을 제어하는 CSS 속성을 결합하여, 저자는 장치 형식, 방향 및 사용 가능한 공간의 변화에 맞춰 레이아웃을 조정하면서도 여러 프레젠테이션에 걸쳐 더 이상적인 의미적 구조(semantic structuring)를 유지할 수 있습니다.

많은 레이아웃은 Grid 또는 Flexbox로 모두 표현할 수 있지만, 각 기술은 전문성이 다릅니다. Grid는 2차원 정렬을 강제하고, 상위-하위(Top-down) 방식으로 레이아웃을 사용하며, 항목의 명시적 중첩(overlapping)을 허용하고, 더 강력한 스팬(spanning) 기능을 제공합니다. Flexbox는 축 내 공간 분배에 초점을 맞추고, 더 단순한 하위-상향(Bottom-up) 방식을 사용하며, 보조 축을 제어하기 위해 콘텐츠 크기 기반의 줄바꿈(line-wrapping) 시스템을 사용할 수 있고, 더 복잡한 레이아웃을 구성하기 위해 기본 마크업 계층 구조에 의존합니다. 두 기술 모두 CSS 저자에게 유용하고 상호 보완적인 도구가 될 것으로 예상됩니다.

Grid 레벨 2는 subgrid 기능을 추가합니다: 서브그리드된 축은 요소의 부모 그리드의 선과 자신의 그리드 선을 맞추고, 부모 그리드와의 통합을 통해 트랙 크기를 결정하는 축입니다.

1.1. 배경 및 동기

웹사이트가 단순 문서에서 복잡한 인터랙티브 애플리케이션으로 발전함에 따라, 예를 들어 float 같은 문서 레이아웃 기술은 애플리케이션 레이아웃에 반드시 적합하지 않았습니다. 테이블, 자바스크립트 또는 float된 요소에 대한 정교한 측정을 조합하여, 저자들은 원하는 레이아웃을 얻기 위한 우회 방법을 발견했습니다. 사용 가능한 공간에 맞춰 조정되는 레이아웃은 종종 취약했고, 공간이 제한될 때 직관에 반하는 동작을 초래했습니다. 대안으로 많은 웹 애플리케이션 저자들은 고정 레이아웃을 선택했으며, 이는 화면의 사용 가능한 렌더링 공간 변경을 활용할 수 없습니다.

그리드 레이아웃의 기능은 이러한 문제를 해결합니다. 이는 저자가 예측 가능한 크기 동작 집합을 사용하여 레이아웃을 위한 사용 가능한 공간을 열과 행으로 나눌 수 있는 메커니즘을 제공합니다. 그런 다음 저자는 애플리케이션의 구성 요소 요소들을 이러한 열과 행의 교차점이 정의하는 그리드 영역에 정확히 위치시키고 크기를 지정할 수 있습니다. 다음 예제들은 그리드 레이아웃의 적응 능력과, 콘텐츠와 스타일의 더 깔끔한 분리를 어떻게 허용하는지를 보여줍니다.

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

그리드 레이아웃은 웹페이지 내 요소들을 지능적으로 크기 조정하는 데 사용될 수 있습니다. 인접한 그림들은 게임 레이아웃의 다섯 주요 구성 요소를 나타냅니다: 게임 제목, 통계 영역, 게임 보드, 점수 영역 및 컨트롤 영역. 저자의 의도는 게임을 위한 공간을 다음과 같이 나누는 것입니다:

• 통계 영역은 항상 게임 제목 바로 아래에 나타납니다.
• 게임 보드는 통계 및 제목의 오른쪽에 나타납니다.
• 게임 제목의 상단과 게임 보드의 상단은 항상 정렬되어야 합니다.
• 게임이 최소 높이에 도달했을 때 게임 보드의 하단과 통계 영역의 하단이 정렬됩니다. 그 외의 경우에는 게임 보드는 사용 가능한 모든 공간을 활용하기 위해 확장됩니다.
• 컨트롤은 게임 보드 아래에서 가운데 정렬됩니다.
• 점수 영역의 상단은 컨트롤 영역의 상단과 정렬됩니다.
• 점수 영역은 통계 영역 아래에 위치합니다.
• 점수 영역은 통계 영역 아래의 컨트롤과 정렬됩니다.

다음 그리드 레이아웃 예제는 저자가 모든 크기, 배치 및 정렬 규칙을 선언적으로 어떻게 달성할 수 있는지를 보여줍니다.

/**
 * Define the space for each grid item by declaring the grid
 * on the grid container.
 */
#grid {
  /**
   * Two columns:
   *  1. the first sized to content,
   *  2. the second receives the remaining space
   *     (but is never smaller than the minimum size of the board
   *     or the game controls, which occupy this column [Figure 4])
   *
   * Three rows:
   *  3. the first sized to content,
   *  4. the middle row receives the remaining space
   *     (but is never smaller than the minimum height
   *      of the board or stats areas)
   *  5. the last sized to content.
   */
  display: grid;
  grid-template-columns:
    /* 1 */ auto
    /* 2 */ 1fr;
  grid-template-rows:
    /* 3 */ auto
    /* 4 */ 1fr
    /* 5 */ auto;
}

/* Specify the position of each grid item using coordinates on
 * the 'grid-row' and 'grid-column' properties of each grid item.
 */
#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">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

참고: 그리드의 구조를 지정하고 그리드 항목을 배치 및 크기 지정하는 방법에는 여러 가지가 있으며, 각 방법은 서로 다른 시나리오에 최적화되어 있습니다.

1.1.2. 소스 순서 독립성

앞선 예제를 이어서, 저자는 게임이 다양한 장치에 적응하도록 하기를 원합니다. 또한 게임은 세로 또는 가로 방향(그림 6 및 7)에서 볼 때 구성 요소의 배치를 최적화해야 합니다. 그리드 레이아웃과 미디어 쿼리를 결합함으로써, 저자는 동일한 의미적 마크업을 사용하면서도 요소의 시각적 배치를 소스 순서와 독립적으로 재배열하여 두 방향 모두에서 원하는 레이아웃을 달성할 수 있습니다.

다음 예제는 그리드 레이아웃의 공간 이름 지정 기능을 사용합니다. 이를 통해 그리드 정의가 변경되더라도 저자는 그리드 항목에 대한 규칙을 다시 작성할 필요가 없습니다.

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

    /* The rows, columns and areas of the grid are defined visually
     * using the grid-template-areas property.  Each string is a row,
     * and each word an area.  The number of words in a string
     * determines the number of columns. Note the number of words
     * in each string must be identical. */
    grid-template-areas: "title stats"
                         "score stats"
                         "board board"
                         "ctrls ctrls";

    /* The way to size columns and rows can be assigned with the
     * grid-template-columns and grid-template-rows properties. */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr auto;
  }
}

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

    /* Again the template property defines areas of the same name,
     * but this time positioned differently to better suit a
     * landscape orientation. */
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";

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

/* The grid-area property places a grid item into a named
 * area of the grid. */
#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">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

참고: 그리드 레이아웃의 재배치 기능은 의도적으로 시각적 렌더링에만 영향을 미치며, 음성 순서 및 내비게이션은 소스 순서를 기반으로 유지됩니다. 이는 저자가 시각적 표현을 조작하더라도 소스 순서를 비 CSS 사용자 에이전트 및 음성/순차 내비게이션과 같이 선형 모델에 최적화된 상태로 그대로 둘 수 있게 합니다.

그리드 항목의 배치 및 재배치는 문서의 접근성을 해칠 수 있으므로 올바른 소스 순서를 대신하여 사용해서는 안 됩니다.

1.2. 값 정의

이 명세는 CSS 속성 정의 관례([CSS2])를 따르며, 값 정의 문법([CSS-VALUES-3])을 사용합니다. 이 명세에서 정의되지 않은 값 유형은 CSS Values & Units [CSS-VALUES-3]에 정의되어 있습니다. 다른 CSS 모듈과의 결합으로 이러한 값 유형의 정의가 확장될 수 있습니다.

각 속성의 정의에 나열된 속성별 값들 외에도, 이 명세에서 정의된 모든 속성은 CSS-wide 키워드를 속성 값으로 허용합니다. 가독성을 위해 여기서는 그것들을 명시적으로 반복하지 않았습니다.

2. 개요

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

그리드 레이아웃은 그리드를 사용하여 그 내용의 레이아웃을 제어합니다: 수평 및 수직 선들의 교차 집합으로, 그리드 컨테이너의 내용에 대한 크기 및 위치 좌표계를 생성합니다. 그리드 레이아웃의 특징은 다음과 같습니다.

• 고정, 유연 및 콘텐츠 기반의 트랙 크기 지정 함수
• 정방향(양수) 및 역방향(음수) 수치 그리드 좌표, 명명된 그리드 선, 명명된 그리드 영역을 통한 명시적 항목 배치; 빈 영역으로의 자동 항목 배치(및 order로 재정렬 포함)
• 공간에 민감한 트랙 반복 및 추가 콘텐츠를 수용하기 위한 행/열의 자동 추가
• 여백, 구터 및 정렬 속성을 통한 정렬 및 간격 제어
• 콘텐츠 중첩 능력 및 레이어링 제어(z-index)

그리드 컨테이너들은 중첩되거나 필요에 따라 플렉스 컨테이너와 혼합되어 더 복잡한 레이아웃을 만들 수 있습니다.

2.1. 그리드 선언

트랙(행 및 열)은 그리드에서 명시적 그리드 속성을 통해 명시적으로 선언되고 크기 지정되거나, 항목이 명시적 그리드 밖에 배치될 때 암시적으로 생성됩니다. grid 축약형과 그 하위 속성들은 그리드의 매개변수를 정의합니다. § 7 그리드 정의

2.2. 항목 배치

그리드 컨테이너의 내용은 개별 그리드 항목(플렉스 항목과 유사)으로 구성되며, 그런 다음 미리 정의된 영역에 할당됩니다. 항목은 grid-placement 속성들을 통해 좌표로 명시적으로 배치할 수 있고, 자동 배치를 사용해 빈 영역에 암시적으로 배치할 수도 있습니다. § 8 그리드 항목 배치

grid-area: a;          /* Place into named grid area “a”     */
grid-area: auto;       /* Auto-place into next empty area    */
grid-area: 2 / 4;      /* Place into row 2, column 4         */
grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */
grid-area: header-start / sidebar-start / footer-end / sidebar-end;
                       /* Place using named lines            */

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;
/* Equivalent to grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; */

grid-area: 1 / 3 / -1;
/* Equivalent to grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; */

2.3. 그리드 크기 지정

일단 그리드 항목들이 배치되면, 그리드 트랙(행 및 열)의 크기가 계산되며, 그리드 정의에 지정된 대로 그 내용 및/또는 사용 가능한 공간의 크기를 고려합니다.

계산된 그리드는 정렬되어 그리드 컨테이너 내에 배치되며, 이는 해당 그리드 컨테이너의 align-content 및 justify-content 속성에 따릅니다. § 11 정렬 및 간격

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. 그리드 레이아웃 개념 및 용어

그리드 레이아웃에서, 그리드 컨테이너의 내용은 위치 지정 및 정렬을 통해 그리드에 배치됩니다. 그리드는 수평 및 수직의 교차하는 그리드 선들의 집합으로, 그리드 컨테이너의 공간을 그리드 영역으로 나눕니다. 그리드 항목(grid items, 즉 그리드 컨테이너의 내용)을 해당 영역에 배치할 수 있습니다. 두 세트의 그리드 선이 존재합니다: 하나는 열을 정의하며 블록 축을 따라 달리고, 다른 하나는 직교하는 세트로 행을 인라인 축을 따라 정의합니다. [CSS3-WRITING-MODES]

3.1. 그리드 선

그리드 선은 그리드의 수평 및 수직 분할선입니다. 열 또는 행의 양쪽에 각각 그리드 선이 존재합니다. 그리드 선은 숫자 인덱스나 저자가 지정한 이름으로 참조할 수 있습니다. 그리드 항목은 그리드 선을 참조하여 그리드 내에서 자신의 위치를 grid-placement 속성들로 결정합니다.

#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; }

/* equivalent layout to the prior example, but using named lines */
#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;  /* two columns */
  grid-template-rows: 50px 1fr 50px; /* three rows  */
}

3.3. 그리드 영역

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

/* using the template syntax */
#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 }

/* Align items 2 and 3 at different points in the grid area "b".  */
/* By default, grid items are stretched to fit their grid area    */
/* and these items would layer one over the other. */
#item2 { align-self: start; }
#item3 { justify-self: end; align-self: end; }

그리드 항목의 그리드 영역은 그것이 배치되는 포함 블록을 형성합니다. 동일한 그리드 영역에 배치된 그리드 항목들은 서로의 레이아웃에 직접적인 영향을 주지 않습니다. 그러나 간접적으로는, 그리드 항목이 그리드 트랙에 놓이고 그 트랙이 내적 크기 지정 함수를 가질 경우 해당 트랙의 크기에 영향을 미칠 수 있고(따라서 그 경계인 그리드 선의 위치도), 이는 다른 그리드 항목의 위치나 크기에 영향을 줄 수 있습니다.

3.4. 중첩 항목 vs. 서브그리드 항목

그리드 항목 자신이 그리드 컨테이너가 될 수 있으며, 이때 display: grid를 부여합니다. 일반적인 경우에 이 중첩 그리드의 내용 레이아웃은 그것이 참여하는 상위 그리드의 레이아웃과 독립적입니다.

그러나 경우에 따라 여러 그리드 항목의 내용이 서로 정렬되어야 할 필요가 있을 수 있습니다. 중첩 그리드는 그 행 및/또는 열 정의를 부모 그리드 컨테이너에 위임하여 서브그리드가 될 수 있습니다. 이 경우, 서브그리드의 그리드 항목들은 상위 그리드의 크기 지정에 참여하여 두 그리드의 내용이 정렬되도록 합니다. 자세한 내용은 § 9 서브그리드를 참조하십시오.

서브그리드는 subgrid 키워드로 설정되며, 이는 grid-template-rows 또는 grid-template-columns에서 사용되며, 어느 축(또는 양 축)에서든 서브그리드 처리될 수 있습니다. 서브그리드 처리된 축이 없는 그리드는 독립형 그리드입니다.

<ul>
  <li><label>Name:</label> <input name=fn>
  <li><label>Address:</label> <input name=address>
  <li><label>Phone:</label> <input name=phone>
</ul>

ul {
  display: grid;
  grid: auto-flow / auto 1fr;
}
li {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  border: solid;
}
label {
  grid-column: 1;
}
input {
  grid-column: 2;
}

4. 재정렬 및 접근성

그리드 레이아웃은 저자에게 문서를 재배치할 수 있는 강력한 도구를 제공합니다. 그러나 이것이 문서 소스의 올바른 순서를 대신할 수는 없습니다. order 속성과 grid placement는 비시각적 매체(예: speech)에서의 순서에 영향을 주지 않습니다. 마찬가지로, 그리드 항목을 시각적으로 재배치해도 순차적 내비게이션 모드(예: 링크를 순환하는 경우, 예: tabindex [HTML])의 기본 탐색 순서에는 영향을 주지 않습니다.

저자는 반드시 order 및 grid-placement properties를 콘텐츠의 논리적 재정렬이 아닌 시각적 재정렬에만 사용해야 합니다. 이러한 기능을 사용하여 논리적 재정렬을 수행하는 스타일시트는 비준수입니다.

참고: 이는 비시각적 매체 및 비 CSS 사용자 에이전트가 일반적으로 콘텐츠를 선형으로 제공하므로 논리적 소스 순서를 신뢰할 수 있게 하기 위한 것입니다. 그리드 레이아웃의 배치 및 정렬 기능은 시각적 배열을 맞추기 위해 사용되어야 합니다. (시각적 지각은 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 properties를 사용하여 재정렬을 수행해서는 안 됩니다.

5. 그리드 컨테이너

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

grid

이 값은 요소가 그리드 컨테이너 상자를 생성하게 하며, 그 상자는 flow layout에 배치될 때 블록 레벨입니다.

inline-grid

이 값은 요소가 그리드 컨테이너 상자를 생성하게 하며, 그 상자는 flow layout에 배치될 때 인라인 레벨입니다.

grid container가 subgrid가 아닐 경우, 그 내용에 대해 독립적인 그리드 포매팅 컨텍스트를 생성합니다. 이는 독립적인 블록 포매팅 컨텍스트를 생성하는 것과 같으나, 블록 레이아웃 대신 그리드 레이아웃이 사용된다는 차이점이 있습니다: float 요소는 그리드 컨테이너에 침범하지 않으며, 그리드 컨테이너의 마진은 그 내용의 마진과 겹치지 않습니다. grid container의 내용은 grid로 배치되며, grid line이 각 grid item의 포함 블록 경계를 형성합니다.

일반적인 중첩 그리드와 달리, subgrid의 내용은 부모 그리드 포매팅 컨텍스트에 참여합니다; 따라서 subgrid는 독립적인 포매팅 컨텍스트를 생성하지 않습니다.

그리드 컨테이너는 블록 컨테이너가 아니므로, 블록 레이아웃을 가정하여 설계된 일부 속성들은 그리드 레이아웃에서는 적용되지 않습니다. 특히 다음과 같습니다:

• float 및 clear는 그리드 항목에 영향을 미치지 않습니다. 그러나 float 속성은 여전히 그리드 컨테이너의 자식에 대한 display의 계산값에 영향을 미치며, 이는 그리드 항목이 결정되기 이전에 발생합니다.
• vertical-align은 그리드 항목에 영향을 미치지 않습니다.
• ::first-line 및 ::first-letter 의사요소는 그리드 컨테이너에 적용되지 않으며, 그리드 컨테이너는 조상에게 첫 서식 줄이나 첫 글자를 기여하지 않습니다.

만약 요소의 지정된 display가 inline-grid이고 요소가 float되거나 절대 위치인 경우, display의 계산값은 grid가 됩니다. 따라서 CSS 2.1 챕터 9.7의 표는 추가 행을 포함하도록 수정되며, "Specified Value" 열에는 inline-grid이, "Computed Value" 열에는 grid가 들어갑니다.

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

참고: 이 절의 용어 정의는 [CSS-SIZING-3]를 보십시오.

그리드 컨테이너는 그것이 참여하는 포매팅 컨텍스트의 규칙을 사용하여 크기가 지정됩니다:

• 블록 레벨 상자일 때는 block formatting context에서 포매팅 컨텍스트를 설정하는 block box처럼 크기가 지정되며, auto inline size는 비대체 블록 상자에 대해 계산되는 방식과 동일하게 계산됩니다.
• 인라인 포매팅 컨텍스트의 인라인 레벨 상자일 때는, 그것은 인라인-블록과 같은 원자적 인라인 레벨 상자로서 크기가 지정됩니다.

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

블록 레이아웃 명세가 이것을 정의해야 할 것 같지만, 아직 작성되지 않았습니다.

max-content 크기 (min-content 크기)는 그리드 컨테이너의 해당 축에서의 트랙 크기(구터 포함)의 합입니다. 이는 그리드가 max-content 제약(또는 min-content 제약)을 받는 경우입니다.

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

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

위의 내용처럼(§ 5.2 그리드 컨테이너 크기 지정 참조) 그리드는 또한 그리드 컨테이너의 스크롤 가능한 오버플로우 영역에 포함됩니다.

참고: 그리드 컨테이너가 스크롤 컨테이너인 경우 패딩과의 상호작용에 주의하십시오: 필요에 따라 스크롤 가능한 콘텐츠의 place-content: end 정렬을 가능하게 하기 위해 스크롤 가능한 오버플로우 사각형에 추가 패딩이 더해지도록 정의됩니다. 자세한 내용은 CSS Overflow 3 § 2.2 Scrollable Overflow를 보십시오.

5.4. 큰 그리드 제한

메모리는 제한되어 있으므로, UA는 암시적 그리드(implicit grid)의 가능한 크기를 UA가 정의한 한도(예: 선 범위를 [-10000, 10000]로 수용할 수 있는 범위) 내로 제한할 수 있으며, 그 한도 바깥의 모든 선을 제거할 수 있습니다. 만약 그리드 항목이 이 한도 밖에 배치된다면, 그 항목의 그리드 영역은 이 제한된 그리드 내로 강제 조정(clamped)되어야 합니다.

그리드 영역을 강제 조정(clamp a grid area)하려면:

• 만약 그 그리드 영역이 제한된 그리드 밖으로 걸쳐(span) 나간다면, 그 스팬은 제한된 그리드의 마지막 선으로 강제 조정됩니다.

• 만약 그 그리드 영역이 제한된 그리드 바깥에 완전히 배치된다면, 그 스팬은 1로 잘려야 하며(절단되어야 하며), 그 영역은 그리드의 해당 쪽에 있는 마지막 그리드 트랙으로 재배치되어야 합니다.

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

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

6. 그리드 아이템

느슨하게 말하면, 그리드 항목은 그리드 컨테이너의 인플로우 내용을 나타내는 박스입니다.

각 인플로우 자식은 그리드 컨테이너의 그리드 항목이 되며, 각 자식 텍스트 시퀀스는 익명 블록 컨테이너 그리드 항목으로 래핑됩니다. 다만, 텍스트 시퀀스가 오직 공백 (즉 white-space 속성의 영향을 받을 수 있는 문자)만 포함하는 경우에는 렌더링되지 않습니다(마치 해당 텍스트 노드가 display:none인 것처럼).

<div style="display: grid">

  <!-- grid item: block child -->
  <div id="item1">block</div>

  <!-- grid item: floated element; floating is ignored -->
  <div id="item2" style="float: left;">float</div>

  <!-- grid item: anonymous block box around inline content -->
  anonymous item 3

  <!-- grid item: inline child -->
  <span>
    item 4
    <!-- grid items do not split around blocks -->
    <q style="display: block" id=not-an-item>item 4</q>
    item 4
  </span>
</div>

참고: 요소 간 공백은 사라집니다: 그것은 자체 그리드 항목이 되지 않지만, 요소 간 텍스트는 익명 그리드 항목으로 래핑된다는 점에 유의하십시오.

참고: 익명 항목의 상자는 스타일을 적용할 수 없습니다, 왜냐하면 스타일 규칙을 지정할 요소가 없기 때문입니다. 다만 그 내용은 그리드 컨테이너로부터 (예: 글꼴 설정과 같은) 스타일을 상속받습니다.

6.1. 그리드 아이템 디스플레이

만약 그것이 서브그리드가 아니라면, 그리드 항목은 그 내용에 대해 독립적인 포매팅 컨텍스트를 설정합니다. 그러나 그리드 항목은 블록 레벨 박스가 아니라 그리드-레벨 박스입니다: 그것들은 블록 포매팅 컨텍스트가 아니라 컨테이너의 그리드 포매팅 컨텍스트에 참여합니다.

요소의 가장 가까운 조상 요소의 계산된(computed) display 값이 (display:contents 조상을 건너뛴 뒤) grid 또는 inline-grid이면, 해당 요소의 자체 display 값은 블록화(blockified)됩니다. (이러한 display 값 변환에 관한 자세한 내용은 관련 문서를 참조하십시오.)

참고: 블록화는 해당 grid 또는 inline-grid 요소가 실제로 그리드 컨테이너 박스를 생성하지 않는 경우에도 발생합니다, 예: 그것이 대체 요소이거나 display: none 하위 트리가 있는 경우.

참고: 일부 display 값들은 원래 박스 주위에 익명 박스를 생성합니다. 만약 그러한 박스가 그리드 항목이라면, 먼저 블록화되므로 익명 박스 생성은 일어나지 않습니다. 예를 들어 연속된 두 개의 그리드 항목이 display: table-cell이면, 하나의 익명 테이블로 감싸지지 않고 두 개의 별도 display: block 그리드 항목이 됩니다.

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

그리드 항목은 그가 속한 그리드 영역이 정의하는 포함 블록 내에서 크기가 정해집니다.

그리드 항목의 자동 크기(automatic sizes) 계산은 그들의 자체 정렬 값에 따라 달라집니다:

normal

만약 그리드 항목이 관련 축에 대해 선호 종횡비를 가지지 않거나, 대체 요소가 아닌 경우 관련 축에서의 자연 크기가 없으면, 그 그리드 항목은 align-self: stretch처럼 크기가 지정됩니다.

그렇지 않으면, 해당 그리드 항목은 해당 축에 대해 블록 레벨 요소의 크기 계산 규칙에 일치하도록 크기가 지정됩니다.

stretch

비대체 박스의 경우 인라인 크기 계산 규칙을 사용합니다, 즉 stretch-fit 크기를 사용합니다.

참고: 이것은 만약 항목이 선호 종횡비를 가지고 있고 다른 축에서 크기가 제한되어 있다면, 종횡비가 왜곡될 수 있습니다.

기타 모든 값

항목을 fit-content로 크기 지정합니다.

참고: auto 값은 min-width 및 min-height의 트랙 크기 계산에 영향을 미치며, 이는 플렉스 항목의 주 크기에 영향을 주는 방식과 유사합니다. 자세한 내용은 § 6.6 그리드 항목의 자동 최소 크기를 참조하십시오.

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

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

플렉스 항목의 재정렬과 마찬가지로, order 속성은 시각적 순서가 음성 및 내비게이션 순서와 동기화되지 않아야 할 때만 사용해야 합니다; 그렇지 않으면 기본 문서 소스를 재정렬해야 합니다. 자세한 내용은 관련 문서를 참조하십시오.

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

인접한 그리드 항목들은 각자 자신의 그리드 영역이 형성하는 포함 블록 내에 독립적으로 포함되므로, 인접한 그리드 항목의 마진은 서로 병합되지 않습니다.

그리드 항목의 백분율 마진 및 패딩은 블록 박스의 경우와 마찬가지로, 포함 블록의 인라인 크기를 기준으로 해석됩니다. 예: 좌/우/상/하 백분율은 모두 포함 블록의 너비를 기준으로 해석됩니다(쓰기 모드에 따라).

자동 마진은 해당 차원에서 여분의 공간을 흡수하여 확장되며, 정렬에 사용할 수 있습니다. 자세한 내용은 § 11.2 자동 마진을 사용한 정렬을 참조하십시오.

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

그리드 항목은 서로 교차하는 그리드 영역에 배치되었을 때 겹칠 수 있으며, 음수 마진이나 포지셔닝 때문에 교차하지 않는 영역에 배치되었을 때에도 겹칠 수 있습니다. 그리드 항목의 페인팅 순서는 인라인 블록의 그것과 정확히 동일합니다, 다만 원시 문서 순서 대신 order로 수정된 문서 순서가 사용되고, z-index가 auto가 아닌 값일 때에는 position이 static이더라도 스태킹 컨텍스트를 생성합니다. 따라서 z-index 속성은 그리드 항목의 z축 순서를 제어하는 데 쉽게 사용할 수 있습니다.

참고: 그리드 항목 밖으로 포지셔닝된 자손들도 그리드 항목이 설정한 스태킹 컨텍스트에 계속 참여합니다.

다음 다이어그램은 여러 겹치는 그리드 항목을 보여주며, 암시적 소스 순서와 명시적 z-index의 조합으로 스태킹 순서를 제어하는 예입니다.

<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 Intrinsic and Extrinsic Sizing([CSS-SIZING-3])에 정의되어 있습니다.

그리드 항목에 대해 더 합리적인 기본 최소 크기를 제공하기 위해, 특정 축에서의 자동 최소 크기(automatic minimum size)의 사용된 값은 다음 모든 조건이 참일 때 콘텐츠 기반 최소 크기입니다:

• 그 항목의 계산된(computed) overflow가 스크롤 가능한 오버플로우 값이 아닌 경우

• 그 축에서 그 항목이 걸치는 트랙들 중 적어도 하나의 최소 트랙 크기 지정 함수가 auto인 경우

• 그 축에서 여러 트랙을 걸치는 경우, 그 중 어느 것도 유연한 트랙이 아닌 경우

그렇지 않으면 자동 최소 크기는 일반적으로 0입니다.

참고: 콘텐츠 기반 최소 크기는 내재적 크기 기여의 한 유형이며, 따라서 관련 규정이 적용됩니다.

특정 차원에서의 콘텐츠 기반 최소 크기는 해당 항목의 지정된 크기 제안이 있으면 그 값이고, 그렇지 않으면 대체 요소인 경우 전이된 크기 제안이 있으면 그 값이고, 그렇지 않으면 콘텐츠 크기 제안입니다. 다만, 만약 그리드 항목이 특정 차원에서 고정된 최대 트랙 크기 지정 함수만 가진 트랙들만 걸친다면, 그 차원에서의 지정된/콘텐츠 크기 제안(및 반대 축으로의 입력)은 그 그리드 영역의 최대 크기(트랙들의 max 합계와 중간 구터 포함)에 대한 stretch fit 이하로 추가로 제한됩니다.

모든 경우에, 크기 제안은 해당 축의 최대 크기에 의해 추가로 제한되며, 만약 그것이 definite이면 적용됩니다. 만약 항목이 압축 가능한 대체 요소(compressible replaced element)이고 관련 축에 definite한 선호 크기나 최대 크기를 가지고 있으면, 크기 제안은 그 크기로 상한됩니다; 이 목적을 위해 이러한 크기에 포함된 불확정 백분율은 0을 기준으로 해석되어 definite로 간주됩니다.

참고: fit-content()의 인수는 고정(max) 트랙 크기와 동일한 방식으로 콘텐츠 기반 최소 크기를 제한하지 않습니다.

이 계산에 사용되는 콘텐츠 크기 제안, 지정된 크기 제안, 및 전이된 크기 제안은 관련 min/max/선호 크기 속성을 고려하여 콘텐츠 기반 최소 크기가 저자가 제공한 제약과 충돌하지 않도록 합니다.

지정된 크기 제안

만약 항목의 관련 축에 대한 선호 크기가 definite이면, 지정된 크기 제안은 그 크기입니다. 그렇지 않으면 정의되지 않습니다.

전이된 크기 제안

항목이 선호 종횡비을 가지고 있고 반대 축에서의 선호 크기가 definite이면, 전이된 크기 제안은 그 크기(반대 축의 min/max에 의해 제한될 수 있음)를 종횡비로 변환한 값입니다. 그렇지 않으면 정의되지 않습니다.

만약 항목이 관련 축에 대해 definite한 선호 크기나 최대 크기를 가지고 있다면, 전이된 크기 제안은 그 크기로 상한됩니다; 이 경우 불확정 백분율은 0을 기준으로 해석되어 definite로 간주됩니다.

콘텐츠 크기 제안

콘텐츠 크기 제안은 관련 축에서의 min-content 크기이며, 선호 종횡비가 있는 경우에는 반대 축의 definite min/max에 의해 종횡비 변환을 통해 제한됩니다.

박스의 내재적 크기(예: 박스의 min-content 크기)를 계산할 때, 콘텐츠 기반 최소 크기는 해당 축에서 박스의 크기를 불확정(indefinite)하게 만듭니다 (예: width 속성이 definite 크기를 지정하더라도). 이는 이 크기를 기준으로 계산된 백분율이 auto처럼 동작하게 함을 의미합니다.

내재적 크기 계산을 제외한 모든 목적에서, 콘텐츠 기반 최소 크기는(명시적 min-content 등과 달리) 박스의 크기를 불확정으로 강제하지 않습니다. 다만 이 최소값이 적용되기 전에 해당 박스의 크기를 기준으로 해석된 백분율이 있다면, 최소값 적용 후에 그 백분율을 다시 해석해야 합니다.

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() 표기법을 사용하여 범위로 지정할 수도 있으며, 위에 언급된 여러 메커니즘을 조합하여 열 또는 행의 최소 및 최대 트랙 크기 함수를 별도로 지정할 수 있습니다.

subgrid <line-name-list>?

subgrid 값은 그리드가 해당 축에서 부모 그리드에서 걸친 부분을 채택함을 의미합니다 (subgridded 축). 명시적으로 지정하지 않고, 그리드의 행/열 크기는 부모 그리드 정의에서 가져오며, subgrid의 아이템은 내재적 크기 계산(CSS Grid Layout 1 § 11.5 내재적 트랙 크기 결정) 에 참여합니다. 즉, subgrid를 통해 그리드 파라미터를 중첩된 요소에 전달하고, 콘텐츠 기반 크기 정보를 부모 그리드로 다시 올릴 수 있습니다.

<line-name-list> 인자는 부모 그리드와 공유되는 그리드 라인에 로컬 이름을 지정할 수 있습니다: <line-name-list>가 주어지면, 지정된 <line-names>들은 subgrid의 명시적 그리드의 라인에 하나씩, 1번 라인부터 할당됩니다. 초과된 <line-names>는 무시됩니다.

만약 부모 그리드가 없거나, 그리드 컨테이너가 독립적인 포맷 컨텍스트가 되어야 하는 경우(예: 레이아웃 컨테인먼트 [CSS-CONTAIN-2] 또는 절대 위치 [CSS-POSITION-3] 등), 사용된 값은 초기값인 none이 되고, 그리드 컨테이너는 subgrid가 아닙니다.

subgridded가 아닌 축은 독립 축입니다.

트랙 리스트의 문법은 다음과 같습니다:

<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>?

<line-name-list>      = [ <line-names> | <name-repeat> ]+
<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 값에서 정의한 음수가 아닌 길이나 백분율입니다. [CSS-VALUES-3]

<percentage> 값은 열 그리드 트랙에서 내부 인라인 크기 기준, 행 그리드 트랙에서는 내부 블록 크기 기준입니다. 만약 그리드 컨테이너의 크기가 트랙 크기에 따라 결정된다면, <percentage>는 auto로 처리되어야 하며, 그리드 컨테이너의 내재적 크기를 먼저 계산한 뒤, 해당 그리드 컨테이너 크기에 대해 그리드 및 아이템을 레이아웃할 때 값을 결정합니다.

<flex [0,∞]>

fr 단위를 가진 음수가 아닌 크기로, 트랙의 flex factor를 지정합니다. 각 <flex> 크기를 가진 트랙은 남은 공간을 flex factor에 비례하여 나눠 가집니다. 예를 들어 1fr 2fr로 지정한 경우, 해당 트랙은 남은 공간의 1/3과 2/3을 차지합니다. 자세한 내용은 § 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 factor가 되며, 최소값에는 사용할 수 없습니다.

참고: 향후 스펙에서는 <flex> 최소값도 허용될 수 있으며, 트랙 크기 알고리즘이 이에 맞게 업데이트될 예정입니다.

auto

최대값으로: max-content contribution의 최대값을 의미하며, 그리드 아이템이 해당 그리드 트랙을 차지할 때 적용됩니다. 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 contribution의 최대값을 의미하며, 그리드 아이템이 그리드 트랙을 차지할 때 적용됩니다.

min-content

min-content contribution의 최대값을 의미하며, 그리드 아이템이 그리드 트랙을 차지할 때 적용됩니다.

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> production에서 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>? )
<name-repeat> = repeat( [ <integer [1,∞]> | auto-fill ], <line-names>+)

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

• <auto-repeat> 변형은 공간을 채울 때까지 자동으로 반복할 수 있지만, 반복 횟수를 계산할 수 있도록 확정적인 트랙 크기가 필요합니다. 트랙 리스트에서 한 번만 나타날 수 있으며, 동일한 트랙 리스트에는 <fixed-repeat>도 포함될 수 있습니다.

• <name-repeat> 변형은 라인 이름을 subgrid에 추가할 때 사용합니다. subgrid 키워드와 함께만 사용하며, 트랙 크기는 지정할 수 없고 라인 이름만 지정합니다.

repeat() 함수(단, <name-repeat>이 아닌 경우)가 두 개의 <line-names>를 인접하게 배치하면, 이름 리스트가 병합됩니다. 예를 들어, repeat(2, [a] 1fr [b])는 [a] 1fr [b a] 1fr [b]와 동일합니다.

7.2.3.2. 공간을 채우는 반복: auto-fill 및 auto-fit 반복

subgridded 축에서는, auto-fill 키워드는 <line-name-list>마다 한 번만 유효하며, 이름 리스트가 subgrid에 지정된 grid span과 일치할 때까지 반복됩니다(이미 충족된 경우 0으로 대체).

그 외의 독립 축에서는, auto-fill이 반복 횟수로 주어지면, 그리드 컨테이너가 해당 축에서 확정적인 선호 크기나 최대 크기를 갖고 있으면, 반복 횟수는 그리드가 컨텐츠 박스를 넘치지 않는 가장 큰 양수 정수(여기서 gap도 고려됨)가 됩니다. 만약 어떤 반복 횟수도 넘친다면, 1회만 반복합니다. 그 외에 그리드 컨테이너가 해당 축에서 확정적인 최소 크기를 갖고 있다면, 반복 횟수는 최소 요구 조건을 만족하는 가장 작은 양수 정수입니다. 그렇지 않을 경우, 지정된 트랙 리스트는 한 번만 반복됩니다.

이 목적을 위해, 각 트랙은 최대 트랙 크기 함수가 확정적이면 그것으로, 그렇지 않으면 최소 트랙 크기 함수가 확정적이면 그것으로 처리합니다. 둘 다 확정적이면 최대 트랙 크기 함수를 최소 트랙 크기 함수로 바닥 처리합니다. 둘 다 확정적이지 않으면 반복 횟수는 1입니다.

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

auto-fit 키워드는 auto-fill과 동일하게 동작하지만, 그리드 아이템 배치 이후에 비어있는 반복 트랙은 축소됩니다. 비어있는 트랙이란 해당 트랙에 flow 내 그리드 아이템이 놓이거나 걸치지 않은 트랙입니다. (모든 트랙이 모두 축소될 수도 있습니다.)

축소된 그리드 트랙은 고정 트랙 크기 함수 0px로 간주되며, 해당 트랙 양쪽의 gutter도(분배 정렬 공간 포함) 축소됩니다.

독립 축에서 자동 반복 트랙의 개수 계산 시, UA는 트랙 크기를 UA가 지정한 값으로 바닥 처리해야 하며, 0으로 나누는 것을 방지하기 위해 1px으로 바닥치는 것이 권장됩니다.

7.2.3.3. repeat()의 보간/결합

두 개의 repeat() 표기법이 첫 번째 인자(반복 횟수)가 같고, 두 번째 인자(트랙 리스트)의 트랙 개수도 같다면, 각 계산된 트랙 리스트의 구성 요소를 계산값 기준으로 결합합니다(최상위 트랙 리스트 결합 방식과 동일). 그렇지 않으면 불연속적으로 결합합니다.

7.2.4. 유연한 길이: fr 단위

유연한 길이 또는 <flex>는 fr 단위를 갖는 치수로, 남은 공간의 일부를 의미합니다(그리드 컨테이너 기준). fr 단위로 크기가 지정된 트랙은 유연 트랙이라 하며, 남은 공간에 따라 유연하게 늘어나거나 줄어듭니다(마치 flex item이 0 base size일 때 flex container의 공간을 채우는 방식과 비슷).

남은 공간의 분배는 모든 비유연 트랙 크기 함수가 최대치에 도달한 후에 발생합니다. 해당 행이나 열의 전체 크기를 가용 공간에서 빼서 남은 공간을 구하고, 그 후 flex 크기를 가진 행과 열에 flex factor에 비례하여 나눠줍니다.

각 행이나 열이 남은 공간에서 차지하는 비율은 <flex> * <leftover space> / <전체 flex factor 합>으로 계산할 수 있습니다.

사용 가능한 공간이 무한대인 경우 (즉, grid container의 너비 또는 높이가 indefinite일 때), flex 크기를 가진 grid track은 해당 콘텐츠에 맞게 각각의 비율을 유지하면서 크기가 결정됩니다. 각 flex 크기 grid track의 사용된 크기는 각 flex 크기 grid track의 max-content 크기를 구한 뒤, 해당 flex factor로 나누어 “가상 1fr 크기”를 정합니다. 이 중 최대값이 최종적으로 결정되는 1fr 길이(flex fraction)로 사용되며, 이 값에 각 grid track의 flex factor를 곱해 최종 크기가 결정됩니다.

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

7.2.5. 트랙 리스트의 계산값

비-subgrid 축의 계산된 트랙 리스트는 리스트로, 라인 이름 집합과 트랙 섹션이 번갈아 나타나며, 첫 번째와 마지막 항목이 라인 이름 집합입니다.

라인 이름 집합은 (비어 있을 수도 있는) 식별자 집합으로, 라인 이름을 나타냅니다.

트랙 섹션은 다음 중 하나입니다:

• 각 minmax() 함수형 표기법으로 단일 트랙의 크기를 나타내며, <length-percentage>는 계산되어 (계산된 트랙 크기)

• 각 repeat() 함수형 표기법으로 반복 트랙 리스트 섹션을 나타내며, <integer>는 계산되고, <track-list>는 계산된 트랙 리스트로 나타냅니다 (계산된 repeat 표기법)

계산된 트랙 리스트는 subgrid 축의 경우 subgrid 키워드 다음에, 해당 축에 지정된 라인 이름을 나타내는 리스트와 라인 이름 집합, 계산된 repeat 표기법이 옵니다.

7.2.6. 트랙 리스트의 해석된 값

grid-template-rows와 grid-template-columns 속성은 해석된 값 특수 사례 속성입니다. [CSSOM]

7.2.6.1. 독립 트랙 리스트의 해석된 값

요소가 그리드 컨테이너 박스를 생성할 때, 해석된 값은 grid-template-rows 또는 grid-template-columns 속성에서 독립 축에 대해, 사용된 값이 됩니다. 직렬화 방법:

• 모든 트랙을 개별적으로 나열하며, 암시적으로 또는 명시적으로 생성된 것 모두 포함, repeat() 표기법을 사용하지 않음.
• 모든 트랙 크기를 픽셀 단위의 길이로 표시, 크기 함수와 관계없이.
• 인접한 라인 이름을 하나의 괄호로 묶어서 병합.

const s = getComputedStyle(gridEl);
gridEl.style.gridTemplateRows = s.gridTemplateRows;
// 이런 코드는 아무 변화 없어야 하지만,
// 암시적 행이 있으면,
// 암시적 행이 명시적 행으로 바뀌고,
// 그리드 아이템 배치가 달라질 수 있으며
// 그리드 전체 크기도 달라질 수 있습니다!

그 외의 경우(예: 요소가 display: none 이거나 그리드 컨테이너가 아닌 경우) 해석된 값은 계산값입니다.

<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>

참고: 일반적으로 해석된 값은 계산값과 동일하지만, 일부 옛날 2.1 속성만 예외입니다. 그러나 이 모듈의 초기 구현과의 호환성 때문에 grid-template-rows와 grid-template-columns는 사용된 값을 반환하도록 정의되어 있습니다.

CSS Working Group은 grid-placement 속성도 사용된 값을 반환할지 검토 중이며, 구현자들의 피드백을 기다리고 있습니다. 토론 보기.

7.2.6.2. subgrid 트랙 리스트의 해석된 값

요소가 그리드 컨테이너 박스를 생성하고 subgrid일 때, 해석된 값은 grid-template-rows와 grid-template-columns 속성에서 사용된 열의 개수를 나타내며, subgrid 키워드와 해당 축의 각 라인을 라인 이름 집합 리스트로 직렬화합니다. 이 집합에는 subgrid에서 명시적으로 정의된 이름만 포함되며, 부모 그리드에서 상속된 이름은 포함되지 않습니다. repeat() 표기법은 사용하지 않습니다.

specified: subgrid [a] repeat(auto-fill, [b]) [c]
resolved:  subgrid [a] [b] [b] [b] [c]

specified: subgrid [a] [a] [a] [a] repeat(auto-fill, [b]) [c] [c]
resolved:  subgrid [a] [a] [a] [a] [c]

specified: subgrid [] [a]
resolved:  subgrid [] [a] [] [] []

specified: subgrid [a] [b] [c] [d] [e] [f]
resolved:  subgrid [a] [b] [c] [d] [e]

참고: 이것은 일반적인 "가장 짧은 동등 직렬화" 원칙을 위반합니다. 마지막에 비어 있는 라인 이름 집합을 직렬화하기 때문입니다. 이 라인 이름 집합은 subgrid가 몇 개의 트랙을 걸치는지에 대한 정보를 제공할 수 있습니다.

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 속성에 나열된 각 문자열마다 행이 생성되고, 각 문자열의 셀마다 열이 생성됩니다. 파싱 방법:

문자열을 아래 토큰 리스트로 토큰화합니다(가장 긴 일치 우선):

• ident 코드 포인트 시퀀스: 이름 셀 토큰을 나타내며, 코드 포인트로 이름을 생성.
• "."(U+002E FULL STOP) 하나 이상 시퀀스: 널 셀 토큰을 나타냄.
• 공백 시퀀스: 아무 것도 나타내지 않음(토큰 생성 안 함).
• 기타 모든 문자 시퀀스: 쓰레기 토큰을 나타냄.

참고: 이 규칙으로 <ident> 문법과 일치하지 않는 셀 이름이 생성될 수 있음(예: "1st 2nd 3rd"), 다른 속성에서 해당 영역을 참조할 때는 이스케이프 필요 (예: grid-row: \31st;로 1st 영역 참조).

• 널 셀 토큰은 그리드 컨테이너에서 이름 없는 영역을 의미.
• 이름 셀 토큰은 동일한 이름의 이름 있는 그리드 영역을 생성. 한 행 또는 여러 행의 이름 셀 토큰이 같은 이름의 그리드 영역을 만들어 해당 그리드 셀을 모두 포함.
• 쓰레기 토큰이 있으면 문법 오류로 선언이 무효.

모든 문자열은 동일한 셀 토큰 개수(이름 셀 토큰 및/또는 널 셀 토큰)와 최소 하나의 셀 토큰을 정의해야 하며, 그렇지 않으면 선언이 무효. 이름 있는 그리드 영역이 여러 그리드 셀을 걸치지만, 이들이 하나의 채워진 사각형이 아니면 선언이 무효입니다.

참고: 비사각형 또는 끊어진 영역은 추후 버전에서 허용될 수 있습니다.

#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에서 직렬화할 경우, 각 널 셀 토큰은 "."(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로 채움), 그리고 각 크기 앞뒤의 이름 라인을 삽입합니다.

• 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;

그리고 아래와 같은 그리드를 만듭니다:

참고: 여기서 repeat() 함수는 사용할 수 없습니다. 이 트랙 리스트는 “ASCII art”에서 행/열과 1:1로 대응되어야 하기 때문입니다.

참고: grid 축약형도 같은 구문을 허용하지만, 암시적 그리드 속성도 초기값으로 초기화합니다. 따로 속성을 계단식으로 적용할 필요가 없다면, 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에 따라 처리합니다.

아래 예시에서는 3개의 열이 있고, 각 열은 내용에 따라 자동 크기가 지정됩니다. 행은 명시적으로 정의되지 않았습니다. 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 {
  /* 모든 input/select을 "controls" 열에 배치하고,
     자동으로 다음 사용 가능한 행을 찾음. */
  grid-column: controls;
  grid-row: auto;
}

#department-block {
  /* 이 아이템을 "oversized" 열에 자동 배치하며,
     3개 행을 걸치는 영역에서
     명시적으로 배치된 아이템이나
     이전에 자동 배치된 아이템과 겹치지 않는 첫 번째 행에 놓음. */
  grid-column: oversized;
  grid-row: span 3;
}

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

  /* 버튼 영역이 그리드 요소의 전체 인라인 축을 걸치도록 함. */
  grid-column: 1 / -1;
  text-align: end;
}
</style>
<form>
  <label for="firstname">First name:</label>
  <input type="text" id="firstname" name="firstname">
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname">
  <label for="address">Address:</label>
  <input type="text" id="address" name="address">
  <label for="address2">Address 2:</label>
  <input type="text" id="address2" name="address2">
  <label for="city">City:</label>
  <input type="text" id="city" name="city">
  <label for="state">State:</label>
  <select type="text" id="state" name="state">
    <option value="WA">Washington</option>
  </select>
  <label for="zip">Zip:</label>
  <input type="text" id="zip" name="zip">

  <div id="department-block">
    <label for="department">Department:</label>
    <select id="department" name="department" multiple>
      <option value="finance">Finance</option>
      <option value="humanresources">Human Resources</option>
      <option value="marketing">Marketing</option>
    </select>
  </div>

  <div id="buttons">
    <button id="cancel">Cancel</button>
    <button id="back">Back</button>
    <button id="next">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와 같은 self-align 속성이 실제 위치를 결정합니다. 그리드 아이템이 차지하는 셀은 그리드의 행과 열 크기에도 영향을 주며, § 12 그리드 레이아웃 알고리즘에서 정의됩니다.

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

그리드 위치

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

그리드 span

그리드 아이템이 각 축에서 차지하는 그리드 트랙의 개수. 한 축에서의 그리드 span은 암시적, 명시적, 자동일 수 있습니다:

• grid-placement 속성의 *-start와 *-end 값이 둘 다 라인을 지정하면, 그리드 span이 암시적입니다.

• 명시적으로 span 값을 갖는 경우, 그리드 span이 명시적입니다.

• 그 외에는 그리드 span이 자동입니다: 해당 축이 subgridded라면, grid span은 line-name-list에서 결정되고, 아니면 grid span이 1입니다.

grid-placement 속성—​롱핸드 grid-row-start, grid-row-end, grid-column-start, grid-column-end, 그리고 축약형 grid-row, grid-column, grid-area—​를 사용해 작성자는 그리드 아이템의 배치를 아래 여섯 가지 정보 중 아무거나(또는 아무것도)로 지정할 수 있습니다:

한 차원에서 Start, End, 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행 걸침(2번째 행에서 시작). */
}

참고: 그리드 인덱스는 writing mode 기준입니다. 예를 들어 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어에서는 첫 번째 열이 가장 오른쪽 열입니다.

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 속성의 기능으로 그리드 내에서 콘텐츠를 자유롭게 배치·순서 변경할 수 있어, 시각적 표현이 문서 소스 순서와 크게 달라질 수 있습니다. 이 기능을 활용하면 작성자가 다양한 기기, 다양한 표시 방식에 맞춰 렌더링을 자유롭게 조정할 수 있습니다 (예: 미디어 쿼리 등). 하지만 올바른 소스 순서의 대체는 아닙니다.

올바른 소스 순서는 음성, 순차 탐색(예: 키보드 탐색), 검색엔진·촉각 브라우저 등 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 끝을 그리드 영역에서 지정합니다.

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

<custom-ident>

먼저 그리드 영역의 끝을 이름 있는 그리드 영역과 매칭 시도: 그리드 라인 중 라인 이름이 <custom-ident>-start(grid-*-start용) / <custom-ident>-end(grid-*-end용)인 라인이 있으면, 해당 라인 중 첫 번째를 그리드 아이템의 배치에 사용합니다.

참고: 이름 있는 그리드 영역은 이 형태의 암시적으로 할당된 라인 이름을 자동 생성하며, grid-row-start: foo 지정 시 해당 이름 영역의 시작 라인을 선택합니다(단, 앞서 명시적으로 foo-start가 지정되어 있으면 그 라인을 우선 사용).

그 외에는, 1 정수와 <custom-ident>가 함께 지정된 것과 동일하게 처리합니다.

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

N번째 그리드 라인을 그리드 아이템의 배치에 사용합니다. 음수는 끝에서부터 역순으로 카운트하며, 명시적 그리드의 끝에서부터 시작합니다.

이름(<custom-ident>)이 있으면, 해당 이름 라인만 카운트합니다. 부족할 경우, 암시적 그리드 라인은 모두 해당 이름을 갖는 것으로 간주합니다.

<integer> 값이 0이면 선언이 무효입니다.

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

grid span을 그리드 아이템의 배치에 기여하게 하며, 해당 그리드 아이템의 그리드 영역의 해당 끝이 반대쪽 끝에서 N 라인 떨어지도록 합니다. 예를 들어, grid-column-end: span 2는 grid-column-start 라인에서 끝 쪽으로 두 번째 그리드 라인을 의미합니다.

이름이 있으면(<custom-ident>), 해당 이름의 라인만 카운트합니다. 부족하면, 암시적 그리드 라인은 해당 방향의 명시적 그리드 끝 쪽에 모두 해당 이름을 갖는 것으로 간주하여 span을 카운트합니다.

예를 들어, 아래 선언을 보면:

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

그리드 컨테이너는 명시적 그리드에 두 개의 그리드 라인(1, 2번)을 가지고 있습니다. 그리드 아이템의 column-end 끝은 4번 라인에 지정되어 있으므로, 끝 쪽에 암시적으로 두 개의 라인이 생성됩니다.

column-start 끝은 그 기준에서 시작 쪽으로 첫 번째 "foo" 라인을 찾으려 합니다. 그리드에 "foo" 라인이 없으므로, 가능한 라인은 암시적 그리드 쪽에만 있습니다. 3번 라인은 명시적 그리드의 끝 쪽에 있으므로 대상이 아니고, grid-column-start span은 시작 쪽을 탐색하므로, 결국 암시적 그리드가 명시적 그리드의 시작 쪽에 라인을 생성하게 됩니다.

<integer>가 생략되면 기본값은 1입니다. 음수나 0은 무효입니다.

auto

속성은 그리드 아이템의 배치에 아무 것도 기여하지 않으며, 자동 배치 또는 기본 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 라인을 제거합니다.

배치에 두 개의 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이며, CCW(LTR 페이지 기준)로 진행됩니다. 이는 margin 등 물리적 방향을 사용하는 관련 4-엣지 속성과 반대 방향입니다.

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

아래 그리드 아이템 배치 알고리즘은 자동 위치를 확정 위치로 변환하여, 모든 그리드 아이템이 명확한 그리드 영역에 배치되도록 합니다. (grid span은 특별한 해석 없이, 명시적으로 지정되지 않으면 기본값 1입니다.)

참고: 이 알고리즘은 암시적 그리드에 새로운 행이나 열을 만들 수도 있습니다. 명시적 그리드에 자동 배치된 그리드 아이템을 놓을 공간이 없을 때 발생합니다.

모든 그리드 셀(명시적 및 암시적 그리드 모두) 점유됨 또는 비점유됨 상태가 될 수 있습니다. 셀은 grid area가 확정된 그리드 위치를 가진 그리드 아이템에 의해 덮여 있을 때 점유됨 상태입니다; 그렇지 않으면, 해당 셀은 비점유됨 상태입니다. 셀의 점유됨/비점유됨 상태는 이 알고리즘 중에 변경될 수 있습니다.

명확성을 위해, 이 알고리즘은 grid-auto-flow가 row로 지정되어 있다고 가정합니다. column이라면, 아래 알고리즘의 행/열, 인라인/블록 관련 언급을 모두 바꿔 적용합니다.

참고: 자동 배치 알고리즘은 그리드 아이템을 order-modified document order 순서로 처리하며, 원래 문서 순서가 아님을 주의하세요.

0. 익명 그리드 아이템 생성 § 6 그리드 아이템 참고. (익명 그리드 아이템은 항상 자동 배치되며, 박스에 grid-placement 속성을 지정할 수 없습니다.)

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

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

   그리드 아이템 중 확정된 행 위치가 있는 것(grid-row-start, grid-row-end 속성으로 확정 위치 정의됨)을 order-modified document order 순서로 다음과 같이 처리:

   "sparse" 채우기(기본 동작)

   해당 아이템의 배치에서 column-start 라인을 겹치지 않는 가장 빠른(가장 작은 양수 인덱스) 라인으로 설정, 이 행에서 앞선 단계에서 이미 배치된 다른 아이템 이후의 위치로 설정.

   "dense" 채우기(dense 지정)

   해당 아이템의 배치에서 column-start 라인을 겹치지 않는 가장 빠른(가장 작은 양수 인덱스) 라인으로 설정.

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개입니다. 명시적 그리드는 grid-template-columns에서 5개 열(1~6번 라인)을 제공하지만, #grid-item의 column 위치는 7번 라인에서 끝나므로, 암시적 그리드 끝에 열을 하나 더 추가해야 합니다.

4. 나머지 그리드 아이템 배치.

   auto-placement 커서는 그리드의 현재 "삽입 위치"를 정의합니다. 행/열 그리드 라인 쌍으로 지정됩니다. 초기 커서는 암시적 그리드의 가장 시작 행/열 라인에 위치합니다.

   사용 중인 grid-auto-flow 값에 따라 아이템 배치 방식이 달라집니다:

   "sparse" 채우기(기본 동작)

   앞 단계에서 배치되지 않은 그리드 아이템을 order-modified document order로 처리:

   아이템에 확정된 열 위치가 있으면:

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

   2. 커서의 행 위치를 해당 아이템이 채움 그리드 셀과 겹치지 않는 값이 될 때까지 증가 (필요하면 암시적 그리드에 행 추가).

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

   두 축 모두 자동 위치이면:

   1. 커서의 열 위치를 해당 아이템이 그리드 영역에서 채움 셀과 겹치지 않거나, 커서 열 위치+아이템 column span이 암시적 그리드의 열 수를 넘길 때까지 증가.

   2. 겹치지 않는 위치가 있으면, 아이템의 row-start/column-start 라인을 커서 위치로 지정. 없으면, 커서의 행 위치를 증가(필요시 암시적 그리드에 행 추가), 커서의 열 위치를 가장 시작 열 라인으로 초기화, 이전 단계로 돌아감.

   "dense" 채우기(dense 지정)

   앞 단계에서 배치되지 않은 그리드 아이템을 order-modified document order로 처리:

   아이템에 확정된 열 위치가 있으면:

   1. 커서의 행 위치를 암시적 그리드의 가장 시작 행 라인으로 설정. 커서의 열 위치를 아이템의 column-start 라인으로 설정.

   2. 커서의 행 위치를 아이템이 채움 셀과 겹치지 않을 때까지 증가 (필요시 암시적 그리드에 행 추가).

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

   두 축 모두 자동 위치이면:

   1. 커서의 행/열 위치를 암시적 그리드의 가장 시작 행/열 라인으로 설정.

   2. 커서의 열 위치를 아이템이 그리드 영역에서 채움 셀과 겹치지 않거나, 커서 열 위치+아이템 column span이 암시적 그리드의 열 수를 넘길 때까지 증가.

   3. 겹치지 않는 위치가 있으면, 아이템의 row-start/column-start 라인을 커서 위치로 지정. 없으면, 커서의 행 위치를 증가(필요시 암시적 그리드에 행 추가), 커서의 열 위치를 가장 시작 열 라인으로 초기화, 이전 단계로 돌아감.

9. 서브그리드(Subgrids)

서브그리드는 일반 그리드 컨테이너와 거의 동일하게 동작하지만, 다음과 같은 차이가 있습니다:

• 서브그리드를 배치하면 해당 서브그리드 축의 트랙과 부모 그리드에서 걸치는 트랙이 연결됩니다. 이렇게 공유되는 그리드 라인은 서브그리드와 부모 사이에 서브그리드의 명시적 그리드를 형성하며, 트랙 크기는 부모 그리드에 의해 결정됩니다.
• 서브그리드가 서브그리드 축에 걸치는 명시적 트랙의 개수는 항상 부모 그리드에서 걸치는 그리드 트랙의 개수와 일치합니다:
  • 서브그리드의 grid span이 명시적 또는 암시적인 경우, 각 서브그리드 축의 명시적 트랙 개수는 해당 축에서 실제 사용된 grid span을 따릅니다 (grid-template-* 속성과 관계없이).
  • 자동 grid span인 경우, 실제 사용된 grid span은 해당 축의 grid-template-* 속성에 명시된 트랙 수를 따르며, 최소 1로 바닥처리합니다.

  참고: 여기서 결정된 명시적 그리드는 부모 그리드가 서브그리드 배치를 제한(clamp)하면 더 축소될 수 있습니다. "암시적 트랙 없음" 항목 참고.

  grid-template-* 속성에서 <line-name-list>가 서브그리드 축에 지정되어 있으면, 실제 사용되는 값은 명시적 트랙 개수에 맞게 잘립니다.

• 서브그리드의 그리드 아이템의 grid-placement 속성과 사용하는 라인 번호는 서브그리드가 포함하는 라인에만 한정됩니다. 즉, 서브그리드 밖의 라인은 명시적 그리드에서 제외됩니다. 예를 들어, 숫자 인덱스는 서브그리드의 첫 번째 라인부터 카운트하며, 부모 그리드의 첫 라인부터가 아닙니다.

  라인 번호와 배치 규칙은 서브그리드의 writing mode를 따르며, 중첩된 독립 그리드와 동일하게 적용됩니다.

• 서브그리드는 내용보다 먼저 배치될 수 있으므로, 서브그리드 축의 라인은 부모 그리드의 해당 라인에 지정된 명시적 라인 이름을 자동으로 상속받습니다.

  이 이름은 서브그리드에 직접 지정한 라인 이름에도 추가됩니다.

• 서브그리드가 부모에 있는 이름 영역과 겹치면 (grid-template-areas 선언으로 생성됨), 암시적 라인 이름이 서브그리드 내에서 부모의 이름 영역을 표현하도록 할당됩니다.

  참고: 이름 영역이 서브그리드와 부분적으로만 겹치는 경우, 암시적 라인 이름이 서브그리드의 첫 번째 혹은 마지막 라인에 할당되어, 이름 영역이 부분적으로 겹친 영역을 서브그리드에서 나타내도록 합니다. 이로 인해 서브그리드의 라인 이름 할당이 항상 부모 그리드의 할당과 정확히 일치하지는 않을 수 있습니다.

  이 이름 역시 서브그리드에 직접 지정한 라인 이름에도 추가됩니다.

  아래 예시에서, 4열짜리 부모 그리드는 명시적 라인 이름과 grid-template-areas로 생성된 암시적 라인 이름을 모두 가집니다:

  <style type="css">
    .outer {
      display: grid;
      grid-template-columns:
        [outer-edge] 20px [main-start] 1fr [center] 1fr max-content [main-end];
      grid-template-areas:
        "gutter info info photos";
    }
    .middle {
      grid-column: main-start / main-end;
      display: grid;
      grid: subgrid / subgrid;
    }
    .inner {
      grid-column: center / -1;
      display: grid;
      grid: subgrid / subgrid;
    }
  </style>
  
  <div class="outer">
    <div class="middle">
      <div class="inner">&hellip;</div>
    </div>
  </div>
  

  이름 해석이 모두 끝나면, 각 그리드의 라인 이름은 다음과 같습니다:

  .outer = [outer-edge gutter-start] [gutter-end info-start main-start] [center] [info-end photos-start] [main-end photos-end]
  .middle = [info-start main-start] [center] [info-end photos-start] [main-end photos-end]
  .inner = [center info-start] [info-end photos-start] [main-end photos-end]
  

  모든 명시적 라인 이름은 .inner까지 그대로 상속되지만, 암시적 라인 이름은 각 서브그리드가 부모 이름 영역과 얼마나 겹치는지에 따라 따로 계산됩니다.

• 서브그리드는 서브그리드 축에는 암시적 그리드 트랙이 없습니다. 가상의 암시적 그리드 라인은 명시적 그리드에 라인이 부족할 때 배치 해석에 사용되지만, 각 그리드 아이템의 그리드 영역은 서브그리드의 명시적 그리드에 clamp되어 제한됩니다(너무 큰 그리드에서 배치 제한과 동일한 규칙).
  예를 들어, span 1 서브그리드에 그리드 아이템이 grid-column: 2 / span 3;로 지정되면, 해당 아이템은 서브그리드의 첫 번째(유일한) 트랙에 강제로 제한됩니다.

  참고: 부모도 서브그리드여서 트랙 수가 고정된 경우, 서브그리드가 기대보다 적은 트랙을 가질 수 있습니다. (부모가 UA의 그리드 트랙 한도에 도달해도 마찬가지로 트랙 수가 줄어들 수 있음.)

• 서브그리드 자체는 부모 그리드에 일반 그리드 아이템처럼 배치되지만, 서브그리드 축에서는 완전히 비어있는 상태로 트랙 크기가 산정됩니다.
• 서브그리드의 그리드 아이템은 서브그리드 축에서 부모 그리드의 크기 산정에 참여하며, 해당 축에 맞추어 정렬됩니다.

  이 과정에서 서브그리드의 마진, 패딩, 스크롤바 구터, 테두리의 합이 각 끝에 추가 마진층(음수일 수도 있음)으로 적용됩니다. 이 추가 "마진"은 여러 단계의 서브그리드를 거치며 누적됩니다.

  예를 들어, 3×3 그리드에 아래 트랙이 있을 때:

  #parent-grid { grid-template-columns: 300px auto 300px; }

  서브그리드가 마지막 두 트랙을 덮으면, 서브그리드의 첫 두 열은 부모 그리드의 마지막 두 열에 대응되고, 해당 트랙에 배치된 아이템은 부모 그리드의 크기 산정에 참여합니다. 즉, 서브그리드의 첫 트랙에 배치된 아이템은 부모 그리드의 가운데 트랙의 자동 크기 산정에 영향을 줍니다.

  #subgrid { grid-column: 2 / span 2; } /* 부모의 2, 3번 트랙을 덮음 */
  #subgrid > :first-child { grid-column: 1; } /* 서브그리드의 1번 트랙, 부모 그리드의 2번 트랙 */
  

  서브그리드에 마진/테두리/패딩이 있으면, 그 크기도 크기 산정에 영향을 줍니다. 예를 들어, 서브그리드에 100px 패딩이 있으면:

  #subgrid { padding: 100px; }

  서브그리드 첫 트랙의 그리드 아이템은 상단, 좌측, 하단에 각각 100px 추가 마진을 가진 것처럼 동작하며, 부모 그리드 트랙의 크기와 그리드 아이템 자체의 위치에 영향을 줍니다.

  한편, 서브그리드의 gutter(row-gap/column-gap) 과 부모 그리드의 gutter의 크기 차이의 절반이 해당 가장자리에 없는 아이템에 추가 마진층으로 적용됩니다(음수일 수도 있음). 이 추가 "마진"도 여러 단계의 서브그리드를 거치며 누적됩니다. normal 값은 서브그리드의 gutter가 부모와 동일함을 뜻하므로 적용 차이가 0입니다.

  참고: 결과적으로 부모 그리드의 트랙은 지정된 대로 크기가 산정되고, 서브그리드의 gutter는 부모 그리드의 gutter와 시각적으로 가운데 정렬됩니다.

  예를 들어, 300px 너비 외부 그리드에 50px 간격이 있고, 열이 100px 1fr로 지정된 경우, 두 트랙을 모두 걸치는 서브그리드는…

  … column-gap이 normal(또는 50px)일 때:

  • 왼쪽 열의 그리드 아이템은 특별한 조정 없이 크기 산정에 참여하며, 100px 너비로 늘어나고 서브그리드의 왼쪽 끝에 정렬됨
  • 오른쪽 열의 그리드 아이템도 특별한 조정 없이 크기 산정에 참여하며, 150px 너비로 늘어나고 서브그리드의 오른쪽 끝에 정렬됨
  • 아이템 사이의 시각적 gutter는 부모 그리드와 정확히 일치하는 50px

  

  … column-gap이 0일 때:

  • 왼쪽 열의 그리드 아이템은 -25px 오른쪽 마진이 있는 것처럼 동작하며, 125px 너비로 늘어나고 서브그리드의 왼쪽 끝에 정렬됨
  • 오른쪽 열의 그리드 아이템은 -25px 왼쪽 마진이 있는 것처럼 동작하며, 175px 너비로 늘어나고 서브그리드의 오른쪽 끝에 정렬됨
  • 아이템 사이의 시각적 gutter는 column-gap에 지정된 대로 0

  

  … column-gap이 25px일 때:

  • 왼쪽 열의 그리드 아이템은 -12.5px 오른쪽 마진이 있는 것처럼 동작하며, 112.5px 너비로 늘어나고 서브그리드의 왼쪽 끝에 정렬됨
  • 오른쪽 열의 그리드 아이템은 -12.5px 왼쪽 마진이 있는 것처럼 동작하며, 162.5px 너비로 늘어나고 서브그리드의 오른쪽 끝에 정렬됨
  • 아이템 사이의 시각적 gutter는 column-gap에 지정된 대로 25px

  

  … column-gap이 75px일 때:

  • 왼쪽 열의 그리드 아이템은 12.5px 오른쪽 마진이 있는 것처럼 동작하며, 87.5px 너비로 늘어나고 서브그리드의 왼쪽 끝에 정렬됨
  • 오른쪽 열의 그리드 아이템은 12.5px 왼쪽 마진이 있는 것처럼 동작하며, 137.5px 너비로 늘어나고 서브그리드의 오른쪽 끝에 정렬됨
  • 아이템 사이의 시각적 gutter는 column-gap에 지정된 대로 75px

  

• 비어있지 않은 서브그리드의 각 가장자리에 대해, 해당 가장자리의 서브그리드 margin/border/padding(및 scrollbar gutter)을 반영하기 위해, 해당 가장자리의 실제 아이템이 차지하는 트랙에 걸치는 span 크기 집합 각각에 대해, 트랙 크기 산정 알고리즘에 가상의 아이템을 기여합니다. 가상 아이템의 크기는 각 span 크기별로 가장 큰 실제 아이템의 크기와 해당 서브그리드의 margin/border/padding/gutter 크기를 더한 값입니다. 가상 아이템의 span도 해당 실제 아이템의 span과 같으며, 해당 서브그리드 끝까지 남은 빈 트랙 수만큼 추가로 늘어납니다.

  참고: 서브그리드 끝에 실제 아이템이 이미 있다면, 위에서 margin/border/padding을 이미 반영했으므로 이 단계는 생략해도 됩니다.

  아래 서브그리드 레이아웃 예시:

  5px auto auto 5px
  .   aaaaaaaaa .
  .   bbbb cccc .
  

  a, b, c 아이템이 각 영역에 있고, 서브그리드 패딩이 25px인 경우, 인라인 시작 패딩을 다루기 위해 트랙 산정 알고리즘에 두 개의 가상 아이템이 추가됨: 하나는 b 크기+25px, span 2; 하나는 a 크기+25px, span 3.

• 서브그리드는 항상 서브그리드 축에서 늘어남(stretch) 상태로 배치됩니다: align-self/justify-self 속성은 무시되며, width/height 제약도 무시됩니다.
• 레이아웃 면에서 서브그리드의 그리드는 항상 부모 그리드의 해당 섹션과 정렬됩니다. align-content/justify-content 속성도 서브그리드 축에서는 무시됩니다.
• overflow 속성은 서브그리드에 적용되어, 서브그리드 내용이 넘치면 스크롤로 볼 수 있습니다. (참고: 스크롤 자체는 레이아웃에 영향 없음.)
• 상대 위치도 서브그리드에 정상적으로 적용되며, 박스와 내용이 함께 이동됩니다. (참고: 상대 위치는 정렬 후 적용되며, 트랙 크기 산정에는 영향 없음.)

10. 절대 위치 지정

10.1. 그리드 컨테이너가 포함 블록일 때

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

참고: 절대 위치 요소를 그리드 컨테이너에 위치시키면 해당 컨테이너의 그리드 라인에 정렬할 수 있지만, 이런 요소는 공간을 차지하지 않으며 그리드 레이아웃에 영향을 주지 않습니다.

.grid {
  grid: 1fr 1fr 1fr 1fr / 10rem 10rem 10rem 10rem;
  /* 그리드 컨테이너에서 4개의 동일한 높이 행,
     각 열은 10rem */
  justify-content: center;
  /* 그리드 컨테이너 내에서 그리드를 수평 가운데 정렬 */
  position: relative;
  /* abspos 포함 블록 설정 */
}

.abspos {
  grid-row-start: 1;     /* 1번째 그리드 행 라인 = 그리드 컨테이너 상단 */
  grid-row-end: span 2;  /* 3번째 그리드 행 라인 */
  grid-column-start: 3;  /* 3번째 그리드 열 라인 */
  grid-column-end: auto; /* 오른쪽 패딩 끝 */
  /* 포함 블록은 그리드 컨테이너의 오른쪽 상단 사분면 */

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

참고: 그리드와 grid-placement 속성은 플로우 기준이며, offset 속성(left, right, top, bottom)은 물리적 기준입니다. direction이나 writing-mode 속성이 변경되면 그리드는 이에 맞게 변환되지만, offset은 변하지 않습니다.

자동 배치 대신, auto 값이 grid-placement 속성에 사용되면 해당 축에서 배치에 특수 라인이 추가되며, 그 위치는 그리드 컨테이너의 패딩 끝(컨테이너가 넘칠 경우 스크롤 영역의 패딩 끝)에 해당합니다. 이 라인은 절대 위치 아이템 배치에 사용하는 확장 그리드의 첫 번째와 마지막 라인(0번, -0번)이 됩니다.

참고: 기본적으로 절대 위치 박스의 포함 블록은 그리드 컨테이너의 패딩 끝에 대응하며, 블록 컨테이너와 동일합니다.

절대 위치 지정은 그리드와 그 플로우 내 내용의 레이아웃 이후에 발생하며, 어떤 그리드 트랙의 크기 산정에도 기여하지 않고 그리드의 크기/구성에도 영향을 주지 않습니다. grid-placement 속성이 존재하지 않는 라인을 참조하거나 기존 암시적 그리드 밖으로 span하면, 해당 라인은 새로운 암시적 그리드 라인을 생성하지 않고 auto로 처리됩니다.

참고: 암시적 라인은 모든 라인 이름을 갖는 것으로 간주하므로, 명시적으로 이름이 없는 라인을 참조해도 존재할 수 있습니다.

배치가 grid span만 포함하면, 해당 축에 auto 라인 두 개로 대체합니다. (이는 해당 축의 grid-placement 속성이 모두 span을 기여하고, § 8.3.1 그리드 배치 충돌 처리에서 두 번째 span이 무시된 경우 발생합니다.)

10.2. 그리드 컨테이너가 부모일 때

그리드 컨테이너의 절대 위치 자식은 플로우 밖이며 그리드 아이템이 아니어서, 다른 아이템의 배치나 그리드 크기에 영향을 주지 않습니다.

static position [CSS2]에서, 그리드 컨테이너의 절대 위치 자식은 해당 컨테이너의 콘텐츠 끝과 일치하는 그리드 영역의 유일한 그리드 아이템인 것처럼 static 위치가 결정됩니다.

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

11. 정렬 및 간격

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

참고: 서브그리드의 그리드 아이템도 정렬(베이스라인 정렬 포함)에 참여하며, 부모 그리드 아이템과 함께 동작합니다. 서브그리드 (h) 참고.

margin 속성을 사용하여, 블록 레이아웃에서와 같이 아이템을 정렬할 수 있습니다. 그리드 아이템은 박스 정렬 속성(CSS Box Alignment Module [CSS-ALIGN-3])도 지원하며, 행/열 모두에서 키워드 기반 정렬이 가능합니다.

기본적으로 그리드 아이템은 자신의 그리드 영역을 가득 채우도록 늘어납니다. 하지만 justify-self 또는 align-self 값이 stretch가 아니거나 margin이 auto면, 그리드 아이템은 내용에 맞게 자동 크기 지정됩니다.

11.1. gutter: row-gap, column-gap, gap 속성

row-gap과 column-gap 속성 (그리고 gap 축약형)은 그리드 컨테이너에서 지정하면, gutter를 그리드 행과 그리드 열 사이에 정의합니다. 문법은 CSS Box Alignment 3 § 8 박스 간 간격(Gaps Between Boxes)에 정의되어 있습니다.

이 속성은 영향을 받는 그리드 라인이 두꺼워진 것처럼 동작합니다: 그리드 트랙은 두 그리드 라인 사이의 gutter 사이 공간입니다. 트랙 크기 산정을 위해, 각 gutter는 지정된 크기의 추가 빈, 고정 크기 트랙처럼 처리되며, 해당 그리드 라인을 span하는 그리드 아이템은 이 트랙을 함께 span합니다.

참고: justify-content/align-content로 인해 트랙 사이 간격이 추가될 수 있습니다. § 12.1 그리드 크기 산정 알고리즘 참고. 이 공간은 gutter 크기를 효과적으로 늘립니다.

그리드가 트랙 사이에서 fragmented된 경우, 해당 트랙 사이의 gutter 간격은 억제해야 합니다. gutter는 강제 개행 이후에도 억제되며, margin과 다릅니다.

gutter는 암시적 그리드의 트랙 사이에만 나타나며, 첫 번째 트랙 앞이나 마지막 트랙 뒤에는 gutter가 없습니다. (특히 암시적 그리드의 처음/마지막 트랙과 확장 그리드의 “auto” 라인 사이에는 gutter가 없습니다.)

축소된 트랙의 gutter가 겹침(collapse)되면, 두 gutter는 정확히 일치하며, 시작과 끝이 겹칩니다. 축소된 트랙의 한쪽에 gutter가 없다면 (암시적 그리드의 첫/마지막 트랙 등), gutter가 겹치면 양쪽 모두 gutter가 없어집니다.

11.2. auto margin으로 정렬하기

auto margin이 그리드 아이템에 사용되면 블록 레이아웃에서의 auto margin과 매우 비슷하게 동작합니다:

• 그리드 트랙 크기 계산 중에는 auto margin을 0으로 처리합니다.
• 인라인 축의 블록 레이아웃 정의에 따라 (CSS2§10.3.3 참고), 어느 축에서든 auto margin은 양의 여유 공간을 흡수하며, 박스 정렬 속성으로 정렬하기 전에 적용되어, 해당 축의 self-align 속성 효과를 무효화합니다.
• 넘치는 그리드 아이템은 auto margin을 0으로 처리하고, 박스 정렬 속성에 따라 overflow를 처리합니다.

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

그리드 아이템은 그리드 아이템의 justify-self 속성이나 justify-items 속성을 그리드 컨테이너에 사용해 인라인 축에서 정렬할 수 있습니다. 자세한 내용은 [CSS-ALIGN-3] 참고.

baseline 정렬이 해당 축에서 크기가 내재적으로 결정되는 트랙(크기가 아이템과 베이스라인 정렬에 의존, 순환 의존성 발생)에서 그리드 아이템에 지정되면, 그 아이템은 베이스라인 정렬에 참여하지 않고, 대체 정렬을 원래 지정된 것처럼 사용합니다. 이때 <flex> 트랙 크기도 그리드 컨테이너가 해당 축에서 불확정 크기를 가지면 "내재적으로 결정됨"으로 간주합니다.

참고: 대체 정렬(fallback alignment)이 사용되는지 여부는 레이아웃 과정에서 바뀌지 않으며, 순환이 있으면 항상 적용됩니다.

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

그리드 아이템은 블록 축(인라인 축과 직교)에서도 그리드 아이템의 align-self 속성이나 align-items 속성을 그리드 컨테이너에 사용해 정렬할 수 있습니다. 자세한 내용은 [CSS-ALIGN-3] 참고.

baseline 정렬이 해당 축에서 크기가 내재적으로 결정되는 트랙(크기가 아이템과 베이스라인 정렬에 의존, 순환 의존성 발생)에서 그리드 아이템에 지정되면, 그 아이템은 베이스라인 정렬에 참여하지 않고, 대체 정렬을 원래 지정된 것처럼 사용합니다. 이때 <flex> 트랙 크기도 그리드 컨테이너가 해당 축에서 불확정 크기를 가지면 "내재적으로 결정됨"으로 간주합니다.

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

그리드의 바깥 끝이 그리드 컨테이너의 콘텐츠 끝과 일치하지 않으면(예: 열이 flex 크기 아님), 그리드 트랙은 justify-content와 align-content 속성에 따라 콘텐츠 박스 내에서 정렬됩니다.

예를 들어, 아래 그리드는 수직 가운데 정렬되고, 그리드 컨테이너의 오른쪽 끝에 맞춰 정렬됩니다:

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

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

특정 justify-content와 align-content 값은 (space-around, space-between, space-evenly) 트랙 간 간격을 띄우거나(stretch), 트랙을 크기 변경할 수 있습니다. 그리드가 트랙 사이에서 fragmented되면, 이런 추가 간격도 억제해야 합니다.

아래 그리드에서는 spanning 아이템의 그리드 영역이 정렬로 인해 gutter에 할당된 추가 공간만큼 늘어납니다:

.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된 아이템의 내용에 의해 트랙 크기가 결정된다면, 정렬 단계에서 정렬 간격에 맞춰 추가 공간을 갖게 됩니다.

11.6. 그리드 컨테이너 기준선

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

1. 그리드 컨테이너의 첫(마지막) 행 중에서 최소한 하나의 그리드 아이템이 있는 행을 찾습니다.

   해당 행을 교차하는 그리드 아이템 중 그 행에서 기준선 정렬에 참여하는 아이템이 있으면, 그리드 컨테이너의 기준선 집합은 해당 그리드 아이템의 공유된 정렬 기준선에서 생성됩니다.

   그렇지 않으면, 그리드 컨테이너의 첫(마지막) 기준선 집합은 행 우선 그리드 순서(컨테이너의 writing mode에 따름)에 따라 해당 행의 첫(마지막) 그리드 아이템의 정렬 기준선에서 생성됩니다. 만약 그리드 아이템에 그리드의 인라인 축에 정렬 기준선이 없으면, 먼저 테두리 끝에서 합성됩니다.

2. 그리드 컨테이너에 그리드 아이템이 하나도 없으면, 그리드 컨테이너는 첫(마지막) 기준선 집합을 갖지 않으며, 필요하면 해당 정렬 컨텍스트의 규칙에 따라 합성됩니다. 이 알고리즘을 종료합니다.

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

위 규칙에 따라 기준선을 계산할 때, 기준선을 제공하는 박스가 스크롤이 가능한 overflow 값을 가지면, 그 박스는 기준선 결정 시 초기 스크롤 위치에 있는 것으로 간주합니다.

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

기준선에 대한 더 자세한 내용은 CSS Writing Modes 3 § 4.1 기준선 소개와 CSS Box Alignment 3 § 9 기준선 정렬 상세 참고.

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

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

1. 모든 Grid Item Placement Algorithm을 실행해 그리드 아이템 (서브그리드 및 그 하위 아이템 포함)을 그리드에 배치합니다.

2. 그리드 컨테이너의 크기를 § 5.2 그리드 컨테이너 크기 지정에 따라 결정합니다.

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

3. 결정된 그리드 컨테이너 크기를 기준으로 Grid Sizing Algorithm을 실행해 그리드의 크기를 결정합니다.

   참고: 이 단계에서는 트랙 크기의 <percentage>가 그리드 컨테이너 크기를 기준으로 해석됩니다.

4. 각 그리드 아이템을 해당 포함 블록에 레이아웃합니다. 각 그리드 영역의 width, height는 이 목적에 대해 확정적(definite)으로 간주합니다.

   참고: 확정 크기만으로 계산된 공식(예: stretch fit 공식)은 역시 확정적이므로, stretch된 그리드 아이템의 크기도 확정적입니다.

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

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

각 트랙에는 최소 및 최대 크기 산정 함수(같을 수도 있음)가 지정되어 있습니다. 각 크기 산정 함수는 다음 중 하나입니다:

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

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

1. 먼저 트랙 크기 산정 알고리즘으로 그리드 열의 크기를 결정합니다.

   이 과정에서, 그리드 컨테이너의 인라인 축에 서브그리드된 그리드 아이템은 비어있는 것처럼 처리하며, 그 그리드 아이템들(손자)은 그리드 컨테이너의 직접 자식으로 간주합니다. 이 introspection(내부 탐색)은 재귀적으로 적용됩니다.

   블록 축에만 서브그리드되고, 그리드 컨테이너의 인라인 축 크기가 내용에 따라 결정되는 아이템도 내부 탐색에 포함됩니다. 해당 아이템의 크기가 이 축에서 다른 축의 서브그리드 트랙 크기 산정에 의존할 수 있으므로, 해당 아이템이 이 그리드의 열 크기 산정에 기여하는 크기(Resolve Intrinsic Track Sizes 참고)는 해당 아이템의 트랙 크기 산정이 이 알고리즘의 같은 단계까지만 완료된 것처럼 간주합니다. 예를 들어 첫 단계에서는 해당 아이템의 트랙도 이 단계까지만 산정되며, 반복이 발생하면 해당 아이템도 1~3단계를 한 번, 현재 단계도 한 번 완료한 후 크기를 넘깁니다. 이 introspection도 재귀적으로 적용됩니다.

   이 단계에서 그리드 아이템의 레이아웃 계산이 사용 가능한 공간(블록 축 기준)에 따라 달라지면, 사용 가능한 공간을 확정 크기 max track sizing function이 있는 행은 해당 크기로, 나머지 행은 무한대로 간주합니다. 그리드 컨테이너와 모든 트랙이 확정적 크기이면, align-content도 적용해 해당 아이템이 span하는 gap의 최종 크기를 결정합니다. 아니면 트랙 정렬 효과는 무시합니다.

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

   이 과정에서, 그리드 컨테이너의 블록 축에 서브그리드된 그리드 아이템은 비어있는 것처럼 처리하며, 그 그리드 아이템들(손자)은 그리드 컨테이너의 직접 자식으로 간주합니다. 이 introspection도 재귀적으로 적용됩니다.

   열 크기 산정과 마찬가지로, 인라인 축에만 서브그리드되고 그리드 컨테이너의 블록 축 크기가 내용에 따라 결정되는 아이템도 내부 탐색에 포함됩니다. (열 크기 산정과 동일하게, 행 크기 산정에 기여하는 크기는 이 알고리즘의 해당 단계까지만 산정된 것으로 간주하며, 이 introspection도 재귀적으로 적용합니다.)

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

3. 그리드 아이템의 min-content contribution이 2단계에서 산정된 행 크기와 정렬로 인해 변경된 경우, 그리드 열의 크기를 새로운 min-content와 max-content contribution으로(단 한 번) 다시 산정합니다.

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

   이 반복은 인라인 크기가 그리드 아이템의 블록 크기에 따라 달라지는 경우에 필요합니다. 예: 열이 래핑된 flex 컨테이너 (flex-flow: column wrap), 직교 플로우 (writing-mode), 다단 컨테이너, 행 크기에 따라 크기가 결정되는 비율(aspect-ratio) 요소 및 자식이 비율을 가질 때 포함됨.
4. 그리드 아이템의 min-content contribution이 3단계에서 산정된 열 크기와 정렬로 인해 변경된 경우, 그리드 행의 크기를 새로운 min-content와 max-content contribution으로(단 한 번) 다시 산정합니다.

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

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

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

참고: 서브그리드 축의 트랙 크기 산정에서는 해당 축의 트랙 내 각 아이템을 부모 그리드의 멤버로 간주합니다. 이런 interlacing(상호 끼워넣기) 때문에 그리드 크기 산정은 각 축별로 서브그리드까지 내려가서 처리해야 하며, 재귀할 때 두 축을 모두 완료하지 않습니다. 즉, 서브그리드가 직교 플로우를 설정하면, 트랙 크기 산정의 순서가 중첩 그리드와 반대가 될 수 있습니다.

<grid-A>
  <grid-B subgrid=columns>
    <grid-C subgrid=rows></grid-C>
    <grid-D></grid-D>
  </grid-B>
<grid-A>

12.2. 트랙 크기 용어

최소 트랙 크기 함수

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

최대 트랙 크기 함수

트랙이 minmax() 함수로 크기 지정된 경우, 이 값은 해당 함수의 두 번째 인자입니다. 그 외에는 트랙의 크기 함수입니다. 모든 경우, auto와 fit-content()는 max-content로 취급합니다. 단, fit-content()에 명시적으로 다른 규정이 있으면 예외입니다.

사용 가능한 그리드 공간

각 축별로 독립적으로, 사용 가능한 그리드 공간은 다음과 같습니다:

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

• 그리드 컨테이너가 min-content constraint 또는 max-content constraint 하에서 크기 지정 중이면, 사용 가능한 그리드 공간은 그 제약값입니다 (그리고 불확정적입니다).

참고: auto 크기는 내용 기반 크기를 의미하며 (예: 수평 writing mode에서 블록 레벨 박스의 높이), max-content와 동일하게 처리됩니다.

모든 경우, 사용 가능한 그리드 공간은 그리드 컨테이너의 min/max-width/height 속성이 확정적이면 그에 따라 clamp(제한)해야 합니다.

여유 공간

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

span 개수

해당 축에서 그리드 아이템이 교차하는 그리드 트랙의 개수입니다.

참고: 구터(gutter)는 그리드 크기 산정 알고리즘에서 min/max 크기 함수가 모두 구터의 실제 크기로 고정된 트랙(고정 크기 트랙)으로 처리됩니다. 구터 폭도 트랙 크기 산정 알고리즘 계산에 반드시 포함되어야 합니다.

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

이 절의 나머지는 트랙 크기 산정 알고리즘입니다. 이 알고리즘은 min과 max 트랙 크기 함수에서 실제 트랙 크기를 계산합니다. 각 트랙에는 기본 크기와, 알고리즘 진행 중 증가하는 <length>가 있으며, 이는 결국 트랙의 최종 크기가 됩니다. 그리고 성장 한계가 있으며, <length>로, 기본 크기의 최대치 역할을 합니다. 단계는 총 5단계입니다:

1. 트랙 크기 초기화(Initialize Track Sizes)
2. 내재적 트랙 크기 산정(Resolve Intrinsic Track Sizes)
3. 트랙 최대화(Maximize Tracks)
4. 가변 트랙 확장(Expand Flexible Tracks)
5. 자동 트랙 확장(Expand Stretched auto Tracks)

12.4. 트랙 크기 초기화

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

고정 크기 함수

절대 길이로 해석하여 그 값을 트랙의 초기 기본 크기로 사용합니다.

참고: 불확정적 길이는 발생할 수 없으며, auto로 처리됩니다.

내재 크기 함수

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

각 트랙에 대해, 해당 트랙의 최대 트랙 크기 함수가 다음 중 하나이면:

고정 크기 함수

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

내재 크기 함수

가변 크기 함수

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

모든 경우, 성장 한계가 기본 크기보다 작으면, 성장 한계를 기본 크기와 같도록 증가시킵니다.

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

12.5. 내재적 트랙 크기 해석

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

참고: 이 단계가 끝나면, 모든 내재적 기본 크기와 성장 한계는 절대 길이로 해석됩니다.

참고: 참고 fit-content()와 auto 최대 트랙 크기 함수는 명시적으로 다르게 규정된 경우를 제외하고 max-content와 동일하게 처리됩니다.

1. 기준선 정렬된 아이템에 shim(여분 margin)을 추가하여 내재적 크기 기여가 기준선 정렬을 반영하도록 함. 각 기준선 공유 그룹에 속한 아이템에 대해, 첫/마지막 기준선 정렬(행 시작/끝 기준 정렬)에 맞게 각 아이템의 시작/끝 쪽에 "shim"(추가 margin)을 넣어, 함께 정렬될 때 기준선이 규정대로 맞춰지도록 합니다.

   이 shim을 아래 트랙 크기 산정 시 아이템의 내재적 크기 기여에 포함시킵니다. 아이템이 여러 내재적 크기 기여를 갖는 경우, 각각에 대해 shim이 다를 수 있습니다.

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

   참고: 기준선 self-align과 기준선 content-align 아이템 모두 이 단계에서 고려됩니다.

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

2. span이 1인 아이템에 맞게 트랙 크기 지정: 내재적 트랙 크기 함수를 가지며 가변 크기 함수가 아닌 각 트랙에 대해, span이 1인 아이템을 고려:

   min-content minimum:

   트랙이 min-content 최소 트랙 크기 함수를 가지면, 그 기본 크기를 해당 아이템의 min-content 기여의 최댓값(0 이상)으로 설정.

   max-content minimum:

   트랙이 max-content 최소 트랙 크기 함수를 가지면, 그 기본 크기를 해당 아이템의 max-content 기여의 최댓값(0 이상)으로 설정.

   auto minimum:

   트랙이 auto 최소 트랙 크기 함수이고, 그리드 컨테이너가 min-/max-content 제약에서 크기 지정 중이면, 트랙의 기본 크기를 해당 아이템의 제한된 min-content 기여의 최댓값(0 이상)으로 설정. 제한된 min-/max-content 기여는 (이 목적에서) 해당 아이템의 min-/max-content 기여(상황에 따라), 최대 트랙 크기 함수(예: fit-content() 함수의 인자)가 고정일 때 해당 값 이하로 제한, 그리고 최종적으로 최소 기여(아래 정의)로 바닥처리함.

   그 외에는, 트랙의 기본 크기를 해당 아이템의 최소 기여의 최댓값(0 이상)으로 설정. 최소 기여는 아이템이 가질 수 있는 가장 작은 외부 크기입니다. 구체적으로, 아이템의 계산된 선호 크기가 auto로 동작하거나 해당 축의 포함 블록 크기에 의존할 경우, 최소 기여는 아이템의 실제 사용 최소 크기를 선호 크기로 가정했을 때의 외부 크기입니다; 그렇지 않으면 최소 기여는 해당 아이템의 min-content 기여입니다. 최소 기여는 내용 크기에 따라 달라질 수 있으므로, 내재적 크기 기여의 한 종류로 간주합니다.

   참고: auto (초기값)로 명시된 최소 크기를 가진 아이템의 경우, 최소 기여는 보통 min-content 기여와 동일하지만, 일부 예외가 있습니다. § 6.6 그리드 아이템의 자동 최소 크기 참고. 또한 최소 기여 ≤ min-content 기여 ≤ max-content 기여입니다.

   min-content maximum:

   트랙이 min-content 최대 트랙 크기 함수를 가지면, 성장 한계를 해당 아이템의 min-content 기여의 최댓값으로 설정.

   max-content maximum:

   트랙이 max-content 최대 트랙 크기 함수를 가지면, 성장 한계를 해당 아이템의 max-content 기여의 최댓값으로 설정. fit-content() 최대값인 경우에는 성장 한계를 fit-content() 인자값으로 제한함.

   모든 경우, 트랙의 성장 한계가 기본 크기보다 작으면, 성장 한계를 기본 크기와 같게 늘립니다.

   참고: 이 단계는 아래 span 아이템 처리 단계를 단순화한 것으로, span이 1인 아이템에 대해 아래 지침을 실행한 것과 동일한 결과를 내야 합니다.

3. 여러 트랙을 span하는 아이템을 수용하도록 트랙 크기 증가: 다음으로 span이 2이면서 가변 크기 함수 트랙을 span하지 않는 아이템을 고려합니다.
   1. 내재적 minimum: 먼저 내재적 최소 트랙 크기 함수를 가진 트랙의 기본 크기에 추가 공간을 분배하여, 해당 아이템의 최소 기여를 수용함.

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

   2. 내용 기반 minimum: 다음으로 min-content 또는 max-content 최소 트랙 크기 함수를 가진 트랙의 기본 크기에 추가 공간을 분배하여, 해당 아이템의 min-content 기여를 수용함.
   3. max-content minimum: 다음으로 그리드 컨테이너가 max-content 제약에서 크기 지정 중이면, auto 또는 max-content 최소 트랙 크기 함수를 가진 트랙의 기본 크기에 해당 아이템의 제한된 max-content 기여를 분배함.

      모든 경우, max-content 최소 트랙 크기 함수를 가진 트랙의 기본 크기에도 해당 아이템의 max-content 기여를 분배함.

   4. 여기서 트랙의 성장 한계가 기본 크기보다 작으면, 성장 한계를 기본 크기와 같게 늘립니다.
   5. 내재적 maximum: 다음으로 내재적 최대 트랙 크기 함수를 가진 트랙의 성장 한계에 해당 아이템의 min-content 기여를 분배함. 이 단계에서 성장 한계가 무한대에서 유한대로 변한 트랙은 다음 단계에서 무한 성장 가능으로 표시함.
      왜 무한 성장 가능 플래그가 필요한가?

      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단계에서 아이템 2를 수용하기 위해 성장 한계의 합을 70만큼 늘려야 함.
      두 가지 옵션:
      
      1. 두 트랙의 성장 한계를 균등하게 늘리면, [45, 55]가 됨.
      2. 두 번째 트랙만 늘리면, [10, 90]이 됨.
      
      방금 설정한 성장 한계를 분배할 때 제약으로 간주하지 않고(무한대로 처리),
      두 번째 결과를 얻음. 이게 첫 번째 트랙이 정확히 첫 아이템 크기만큼만 커지므로 더 좋다고 판단.
      

   6. max-content maximum: 마지막으로 max-content 최대 트랙 크기 함수를 가진 트랙의 성장 한계에 해당 아이템의 max-content 기여를 분배함.

   span이 더 큰 아이템에 대해 단계적으로 반복하여 모든 아이템을 반영합니다.

4. 가변 트랙을 span하는 아이템도 크기 증가: 다음 단계에서는 이전 단계와 동일하게 진행하되, span하는 트랙 중 가변 크기 함수를 갖는 모든 아이템을 (span 크기별로 묶지 않고) 함께 고려함.
   • 추가 공간은 가변 트랙에만 분배(나머지 트랙은 고정 크기 함수로 취급)
   • 해당 아이템이 span하는 모든 가변 트랙의 가변 크기 함수 합이 1 이상이면, 그 비율에 따라 공간 분배; 합이 1 미만이면, 해당 비율만큼 공간 분배, 나머지는 균등 분배
5. 아직 성장 한계가 무한대인 트랙(예: 아이템 없음, 가변 트랙 등)은, 성장 한계를 기본 크기로 설정함.

참고: 여러 트랙을 span하는 아이템의 내재적 크기 제약을 만족시키는 방법은 하나가 아닙니다. 이 알고리즘은 실제 사례에서 좋은 결과를 내는 다양한 휴리스틱을 구현합니다. 향후 더 고급 휴리스틱이 확인되면 이 알고리즘이 업데이트될 수 있습니다.

12.5.1. span된 트랙에 추가 공간 분배하기

12.6. 트랙 최대화(Maximize Tracks)

여유 공간이 양수라면, 모든 트랙의 기본 크기에 고르게 분배하고, 트랙이 성장 한계에 도달하면 freeze하고, 나머지 unfrozen 트랙은 계속 증가시킴.

이 단계에서: 그리드 컨테이너를 max-content 제약으로 크기 지정하면, 여유 공간은 무한대; min-content 제약이면 여유 공간은 0.

이로 인해 그리드가 그리드 컨테이너의 내부 크기 (max-width/height 속성으로 제한됨)보다 커지면, 이 단계를 다시 실행하여 사용 가능한 그리드 공간을 그리드 컨테이너의 내부 크기로 처리함.

12.7. 가변 트랙 확장(Expand Flexible Tracks)

이 단계에서는 가변 트랙의 크기를 fr에 할당할 수 있는 가장 큰 값으로 지정하며, 사용 가능한 공간을 넘지 않도록 조정함.

먼저, 그리드의 실제 flex fraction을 구함:

여유 공간이 0이거나, 그리드 컨테이너를 min-content 제약으로 크기 지정하는 경우:

사용 flex fraction은 0.

그 외, 여유 공간이 확정 길이인 경우:

사용 flex fraction은 모든 그리드 트랙과 채울 공간에 대해 fr 크기 찾기의 결과.

그 외, 여유 공간이 불확정 길이인 경우:

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

• 각 가변 트랙에 대해, 트랙의 flex factor가 1보다 크면, 트랙 기본 크기를 flex factor로 나눈 값; 아니면, 트랙의 기본 크기.
• 각 그리드 아이템이 가변 트랙을 교차할 때, 해당 아이템이 교차하는 모든 그리드 트랙과 아이템의 채울 공간에 대해 fr 크기 찾기의 결과(채울 공간은 아이템의 max-content 기여).

이 flex fraction을 사용할 때, 그리드가 그리드 컨테이너의 min-width/height보다 작아지거나 그리드 컨테이너의 max-width/height보다 커지면, 이 단계를 다시 실행하여 여유 공간을 확정 값으로, 사용 가능한 그리드 공간을 그리드 컨테이너가 내부 크기에 맞게 크기 지정된 것으로 처리함 (min-width/height, max-width/height).

각 가변 트랙에 대해, 사용 flex fraction과 트랙의 flex factor의 곱이 트랙의 기본 크기보다 크면, 기본 크기를 해당 곱으로 설정함.

12.7.1. fr 크기 찾기

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

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

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

content-distribution property가 그리드 컨테이너에서 해당 축에 대해 normal 또는 stretch이면, auto 최대 트랙 크기 함수를 가진 트랙을 남은 양의 확정적 여유 공간을 트랙끼리 고르게 분배해 확장함. 여유 공간이 불확정이라도, 그리드 컨테이너가 확정적 min-width/height를 가지면, 해당 크기로 여유 공간을 계산해 사용함.

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

그리드 컨테이너는 행 또는 열 사이, 그리고 아이템 내부에서 페이지 분할이 가능합니다. break-* 속성은 그리드 컨테이너에 참여하는 포맷팅 컨텍스트에 대해 정상적으로 적용됩니다. 이 절에서는 그리드 아이템과 그 내용에 어떻게 적용되는지 정의합니다.

다음 분할 규칙은 분할 컨테이너(fragmentation container)를 "페이지"로 지칭합니다. 동일 규칙은 다른 분할 컨텍스트(fragmentation context)에도 적용됩니다. (필요하면 "페이지" 대신 알맞은 분할 컨테이너 유형으로 대체.) CSS Fragmentation Module [CSS3-BREAK] 참고.

분할된 그리드 컨테이너의 정확한 레이아웃은 이 그리드 레이아웃 수준에서 정의되지 않습니다. 하지만 그리드 컨테이너 내의 분할은 다음 규칙을 따릅니다:

• break-before와 break-after 속성이 그리드 아이템에 지정되면 해당 그리드 행에 전달됩니다. 첫 행의 break-before와 마지막 행의 break-after는 그리드 컨테이너에 전달됨.
• 그리드 아이템 내부에서 강제 분할이 발생하면, 해당 내용의 크기가 늘어나며, 형제 아이템 내부에 강제 분할이 발생하지 않습니다.
• Class A 분할 기회는 행/열 사이(해당 축 기준)에 발생하며, Class C 분할 기회는 첫/마지막 행(열)과 그리드 컨테이너의 콘텐츠 끝 사이에 발생합니다. [CSS3-BREAK]
• 그리드 컨테이너가 분할 후 계속될 때, 블록 흐름 방향의 분할 컨텍스트에서 그리드 아이템이 사용할 수 있는 공간은 이전 페이지의 그리드 컨테이너 fragment가 사용한 공간만큼 줄어듭니다. 그리드 컨테이너 fragment가 사용한 공간은 해당 페이지에서의 콘텐츠 박스 크기입니다. 이 조정 후 사용 가능한 공간이 음수가 되면 0으로 설정합니다.
• 위의 항목에 따라 아이템 재배치가 발생하는 것 외에는, UA는 분할되지 않은 흐름과 비교해 그리드 컨테이너의 왜곡을 최소화하도록 시도해야 합니다.

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

이 절은 규범적인 내용이 아닙니다.

이 알고리즘은 한 가지 가능한 분할 알고리즘의 초안이며, [CSS-FLEXBOX-1] 알고리즘과의 일관성 검토가 필요합니다. 피드백 환영; 구현 지침으로는 위의 규칙을 참고하세요.

1. § 12 그리드 레이아웃 알고리즘을 따라, 분할 컨테이너의 인라인 크기를 사용하고 블록 크기는 무제한으로 가정하여 그리드를 레이아웃합니다. 이 단계에서 모든 grid-row auto 및 fr 값은 모두 해석되어야 합니다.
2. 이전 단계에서 해석한 값으로 그리드 컨테이너를 레이아웃합니다.
3. 그리드 영역 크기가 분할로 인해 변경되면(행 span 아이템은 제외), 다음 행 중에서 행 크기를 늘립니다:
   • 내용 min 트랙 크기 함수를 가진 행.
   • 명시적 높이가 없는 그리드에서 해당 행이 가변적일 때.
4. 그리드 높이가 auto이면, 그리드의 높이는 최종 행 크기의 합이 되어야 합니다.
5. 분할 중 margin이 겹쳐져 그리드 영역이 그리드 컨테이너를 넘칠 경우, 그리드 영역을 포함하도록 그리드 컨테이너를 확장합니다(이 단계는 분할로 인한 순환적 레이아웃 의존을 피하기 위해 필요).

그리드의 높이가 명시되어 있으면, 3, 4단계에서 행이 그리드를 넘칠 수 있습니다.

14. 개인 정보 고려사항

그리드 레이아웃은 새로운 개인 정보 유출을 도입하지 않습니다.

15. 보안 고려사항

그리드 레이아웃은 새로운 보안 고려사항을 도입하지 않습니다.

16. 변경 사항

16.1. 2020년 12월 18일 CR 이후 변경 사항

• 상대 위치 지정(relative positioning)이 서브그리드에 어떻게 적용되는지 명확하게 설명함. (이슈 7123)

  • 상대 위치 지정은 서브그리드에 정상적으로 적용되며, 박스와 그 내용을 함께 이동시킵니다. (참고: 상대 위치 지정은 정렬 이후에 적용되며, 트랙 크기에는 영향을 주지 않습니다.)

• 스크롤바 구터(scrollbar gutter)가 서브그리드 자체의 기여 계산 시 (자식뿐 아니라) 마진/테두리/패딩과 함께 고려된다는 것을 명확하게 설명함. (이슈 9935)

  비어있지 않은 서브그리드의 각 가장자리에 대해, 서브그리드의 마진/테두리/패딩 (그리고 스크롤바 구터) 을 해당 가장자리 기준으로 고려함, … 그리고 서브그리드 자체의 마진/테두리/패딩 /구터 만큼 추가로 늘려서 반영함.

• 이전 버전 이후 CSS Grid Level 1의 모든 변경 사항도 포함됨.

16.2. 2020년 8월 CR 이후 변경 사항

• CSS Grid 1의 이전 CR에서 § 6.2 그리드 아이템 크기 지정과 aspect-ratio 상호작용을 명확히 하려다 발생한 오류를 수정함.
• 일부 “intrinsic aspect ratio” 용어를 더 일반적인 선호 비율(preferred aspect ratio)로 변경함. (이슈 4962)
• 사소한 편집 정리 및 용어 일관성 개선.

2019년 12월 CSS Grid Layout Level 2 Working Draft 이후 변경 사항

없음. 단, CSS Grid level 1 전체 본문을 포함함.

이전 변경 사항은 Working Draft 변경 사항 참고.

16.3. Level 1 이후 추가 사항

Level 1 이후 다음 기능이 추가되었습니다:

• 서브그리드 (subgrid)

17. 감사의 글

Mozilla의 Mats Palmgren에게 깊은 감사를 전합니다. 그의 지원과 피드백 없이는 서브그리드 기능이 진전될 수 없었습니다. Daniel Tonon에게도 감사드립니다. 서브그리드에서 gap의 지능적인 처리와 예시 그림을 직접 기여해주셨고, Rachel Andrew와 Jen Simmons는 CSS 워킹 그룹과 웹 디자인/저작 커뮤니티 간의 피드백 격차를 해소하는데 도움을 주었습니다.

마지막으로, CSS Grid Level 2의 감사 섹션은 CSS Grid Level 1의 거대한 작업을 가능하게 한 모든 분들에 대한 감사 없이는 완전하지 않을 것입니다.