Properties

Properties

Draft
  • account_tree
  • bug_report

gridCSS3

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

설명

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

설정 가능한 속성 값

  • none기본값키워드CSS3

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

  • grid-template-rows / grid-template-columns속성 값 리스트CSS3

    grid-template-rows 속성 값과 grid-template-columns 속성 값을 '/'로 나누어 차례대로 작성한다.

구문

  • 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기본형식null
    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로 처리된다.

  • grid initial;기본형식CSS3

    CSS 기본 값으로 설정한다.

버전 명세

Version NameDescriptionFlags
CSS3

지원 웹브라우저