CSS Keywords

{object_name}

CSS Grid Layout Module

  • Automatic Placement

    • auto-flow

      명시적으로 배치되지 않은 그리드 항목은 자동 배치 알고리즘에 의해 그리드 컨테이너의 비어 있는 공간에 자동으로 배치된다. grid-column 또는 grid-row 속성에 의해 배치를 결정 짓는 것을 명시적 배치라 한다.
    • column

      항목은 각 열을 차례대로 채워서 배치하고 필요에 따라 새 열을 추가한다.
    • dense

      그리드에서 dense(빽빽한, 조밀한) packing algorithm은 더 작은 항목이 나중에 올 경우 빈 공간을 먼저 채우려고 한다. 이로 인해 더 큰 항목이 좌측에 있는 빈 공간들을 채울 경우 항목들이 순서에 맞지 않게 나타나게 된다. 이러한 값을 생략하면 “spare(드문드문난, 듬성듬성한)” algorithm이 사용되는데 이 때 placement algorithm은 그리드 내에서 오직 앞으로만 이동하며 빈 공간을 채운다고 뒤로 돌아가지 않는다. 이로 인해 이후 항목으로 채워질 수있는 빈 공간이 생기더라도  모든 자동 배치되는 항목들은 순서대로 나타나게 된다. <번역 도움: 염조희>
    • row

      항목은 각 행을 차례대로 채워서 배치하고 필요에 따라 새 행을 추가한다.
  • Placing Grid Items

    • auto

      그리드 항목 배치에 아무런 영향을 주지 않으며 자동 배치를 나타낸다.
    • span

      그리드 항목 영역의 해당 가장자리가 반대쪽 가장자리에서 n줄이 되도록 그리드 항목의 배치에 그리드 범위를 지정한다.
  • Repeating

    • auto-fill

      독립형 그리드 축에서는 허용된 그리드 트랙 영역 내에서 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다. 트랙 내에서 그리드 레이아웃 항목수 보다 큰 값으로 반복이 된다면 남은 트랙 공간을 채우도록 빈 column 또는 row를 생성한다. 반대로 공간이 부족하면 다음 트랙을 생성해 역시 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다.
    • auto-fit

      그리드 항목 배치 후 빈 반복 트랙이 축소된다는 점을 제외하고는 autl-fill과 동일하다. 빈 트랙은 인플로우(in-flow) 그리드 항목이 배치되거나 가로질러 있지 않은 트랙이다.
  • Template

    • none

      명시적 그리드 트랙이 이 속성에 의해 생성되지 않음을 나타낸다. 그러나 명시적 그리드 트랙은 여전히 grid-template-columns 또는 grid-template-rows에 의해 생성될 수 있다.
    • subgrid

      하위 그리드는 grid-template-rows 또는 grid-template-columnssubgrid 키워드에 의해 설정되며 축 중 하나 또는 둘 모두에서 하위 그리드로 구성될 수 있다. 즉 상위 그리드에 제약이 된다.
  • Track Size

    • auto

      최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-contentjustify-content 속성으로 트랙을 확장할 수 있다.
    • max-content

      그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.
    • min-content

      콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.