Properties

Properties

Editing
  • account_tree
  • bug_report

grid

그리드 레이아웃을 생성하는 세부 속성들을 한번에 작성하는 축약식 속성이다.

설명

다양한 그리드 레이아웃 처리를 한번에 지정하여 처리하는 축약 속성이다.

사용 가능한 값 타입

〈'grid'〉

  • <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
    CSS Grid Layout Module Level 2

사용되는 키워드

  • auto-flow

    명시적으로 배치되지 않은 그리드 항목은 자동 배치 알고리즘에 의해 그리드 컨테이너의 비어 있는 공간에 자동으로 배치된다.

  • dense

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

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

일반적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • grid none;CSS3

    그리드를 설정하지 않는다.

  • grid 〈'grid-template-rows'〉 / 〈'grid-template-columns'〉;CSS3

    열과 행의 크기를 지정한다. /를 기준으로 좌측에는 설정하고자 하는 행 수 만큼 값을 공백으로 구분하여 작성하고 우측에는 설정하고자 하는 열 수 만큼 값을 공백으로 구분하여 작성한다.

    열과 행을 값을 auto로 지정하는 경우

    column을 원하는 열수 만큼 auto로 지정하면 균등한 간격으로 열이 생성되어지고 row를 auto로 지정하면 지정 횟수와 관계없이 레이아웃 항목 갯수만큼 열이 생성된 후 나머지는 자동으로 콘텐츠 높이만큼 행이 생성된다. 가장 기본적인 방식으로 그리드 레이아웃을 만든다.

    column 또는 row의 레이아웃 아이템의 갯수를 미리 알수 없는 경우라면 auto로 지정시 콘텐츠 크기대로 지정된다. grid-auto-columns, grid-auto-rows, grid-template-columns, grid-template-rows 의 기본값이도 하다.


    비율과 함수를 이용하는 경우

    fr은 상대 단위이며 다른 레이아웃 항목에 상대적으로 갖는 값을 지정한다. row를 1fr 2fr 1fr로 설정하게 되면 두번째 행은 상대적으로 2배의 크기를 갖는다. 이후 3개 이상의 행이 있다면 기본적으로 auto로 처리된다.

    minmax() 함수는 최소값과 최대값을 인수로 지정하는 방식으로 크기를 갖는다. column을 auto minmax(350px, auto)로 지정했는데 첫번째 열은 자동으로 크기를 갖게 되고 두번째 열은 콘텐츠의 크기에 따라 최소 350픽셀, 최대는 auto를 갖게 되어 콘텐츠가 없더라도 350픽셀 이하로 줄지 않으며 최대값은 자동으로 지정된다.


    레이아웃 항목이 최소 크기를 유지하며 레이아웃 영역에서 위치를 잡는 경우
    grid: auto / repeat(auto-fill, minmax(100px, 1fr))

    위 코드를 보면 행은 auto로 설정했으므로 자동으로 생기는 행(row)을 포함해서 콘텐츠 크기만큼 높이 처리를 한다. 열(column)은 repeat() 함수를 이용해서 반복하는 방식으로 생성하지만 반복 횟수를 auto-fill로 지정하므로 인해 부모 요소의 가로 크기 내에서 두 번째 인수로 지정된 최소 100px, 최대 1fr(상대기준 크기로 1:1)의 크기로 채워지는 방식으로 열을 생성한다.

    만약에 부모의 가로 공간이 부족하면 다음 행으로 내려가는 결과를 만들며 반대로 공간이 남는 경우는 최소값을 유지하고 빈 공간을 그대로 둔다.


    레이아웃 영역에 채우는 방식으로 항목이 정렬되는 경우
    grid: auto / repeat(auto-fit, minmax(100px, 1fr))

    위 코드에서 행을 auto로 설정했으므로 자동으로 생기는 행(row)을 포함해서 콘텐츠 크기만큼 높이 처리를 한다. 열(column)은 repeat() 함수를 이용해서 반복하는 방식으로 생성을 하며 반복 횟수를 auto-fit로 지정하므로 인해 부모 요소의 가로 크기 내에서 두 번째 인수로 지정된 최소 100px, 최대 1fr(상대 크기 기준 1:1)의 크기로 채워지는 방식으로 열을 생성한다.

    만약에 부모의 가로 공간이 여유가 있으면 레이아웃 항목은 늘어나는 방식으로 가로 공간을 채우고 부모의 공간이 좁은 경우에는 레이아웃 항목은 최소 크기를 유지하며 필요에 따라 다음 행으로 내려간다.

  • grid 〈'grid-template-areas'〉;CSS3

    grid-area 속성에 의해 설정된 이름을 나열하여 그리드 레이아웃을 만든다. 같은 이름이 반복되면 영역이 합쳐지는 효과를 만들며 이후 마침표를 공백으로 구분해 작성하면 출력될 열 수가 설정된다.

    grid-template-areas 설정으로 그리드 레이아웃 처리 예제
    grid: "item1 item1 . ."

    위 코드에서 item1은 레이아웃 항목에 지정한 grid-area이며 이름을 공백으로 구분하는 방식으로 작성하며 해당 이름을 가진 레이아웃 항목들이 배치된다. 만약에 같은 이름을 연속해 작성하면 해당 레이아웃 항목들이 합쳐지는 결과를 만든다.

    .(마침표)를 공백으로 구분해서 작성하는 경우에는 .(마침표) 수만큼 column이 auto로 추가된다. 그리고 해당되지 않는 나머지 레이아웃 항목은 다음 행에서 auto 값을 갖고 열(column)을 만든다.

  • grid 〈'grid-template-area'〉 / 〈'grid-template-columns'〉;
    grid-template-areas 설정으로 그리드 레이아웃 처리 예제
    .grid-wrapper {
        grid: 
            "item1 item1 ." 100px
            "item2 . item3"
            "item4 item5 ." / minmax(100px, 0.7fr) auto 100px;
    }

    각각의 그리드 항목에 grid-area을 설정하고 위 코드처럼 grid-area 값을 나열하는 방식으로 그리드를 만들 수 있다. /를 기준으로 왼쪽은 grid-areas 설정이고 오른쪽은 grid-template-columns에 대한 설정이다.

    grid-areas 설정은 각각의 그리드 항목에 지정한 grid-area 값으로 원하는 대로 나열한다. 공백으로 구분해서 원하는 열수 만큼 그리드 항목의 grid-area 값을 나열하며 다른 우측의 그리드 영역으로 확장을 하고자 한다면 원하는 만큼 동일한 grid-area 값을 공백으로 구분해서 작성해 주면 된다. 만약에 빈 공간이 필요하다면 마침표를 넣어준다. 그리고 전체를 따옴표로 감싸주도록 한다. 추가적으로 다음 행에 대한 설정이 필요하면 같은 방법으로 설정해 준다.

    각 행에 대한 설정(따옴표로 감싸진 값) 옆에 공백을 준 다음 해당 행에 대한 높이를 지정할 수도 있다. 지정하지 않으면 auto로 처리된다.

    /를 기준으로 오른쪽에 grid-template-columns에 대한 설정을 필요에 따라 지정하며 지정하지 않으면 auto로 처리된다.

버전 명세

Modules
Module NameStatusSummary
CSS Grid Layout Module Level 2후보 추천 초안

사용자 인터페이스 설계에 최적화된 2차원 그리드 기반 레이아웃 시스템을 정의한다.


Last review date: 2022-6-23

지원 웹브라우저