Properties

Properties

Draft
  • account_tree
  • bug_report

grid-auto-flow

자동 배치된 항목이 그리드에 삽입되는 방법을 제어한다.

설정 가능한 속성 값

  • row기본값키워드CSS3

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

  • column키워드CSS3

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

  • dense키워드CSS3

    다른 것 보다 더 작은 항목이 나올 경우 그리드 영역의 빈 곳을 채우는 알고리즘을 작동한다.이렇게 되면 항목 배치가 순서가 맞지 않아 보일수 있다.

    다음은 MDN Web Docs에서 기술한 내용을 번역해 보았다.

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

구문

  • grid-auto-flow row;사용 예CSS3
    항목은 각 행을 채워서 배치하고 필요에 따라 새 행을 추가한다.

    항목은 각 행을 채워서 배치하고 필요에 따라 새 행을 추가한다.
  • grid-auto-flow column;사용 예CSS3
    항목은 각 열을 차례대로 채워서 배치하고 필요에 따라 새 열을 추가한다.

    항목은 각 열을 차례대로 채워서 배치하고 필요에 따라 새 열을 추가한다.
  • grid-auto-flow dense;사용 예CSS3
    다른 것 보다 더 작은 항목이 나올 경우 그리드 영역의 빈 곳을 채우는 알고리즘을 작동한다.

지원 웹브라우저