[CSS] Grid에 대하여

CSS 레이아웃에 대한 학습을 진행할 때 반드시 배워야 할 두가지가 있습니다.

바로 Flex와 Grid 입니다. 이번 글에서는 Grid에 대해 다루겠습니다.

 

일단 Flex와 Grid의 가장 큰 차이점은 Flex는 한 방향 레이아웃(1차원)이고 Grid는 두 방향(가로-세로) 레이아웃(2차원)이라는 점 입니다. 그렇기때문에 Flex를 사용할 때보다 더 복잡한 레이아웃 표현이 가능합니다.

 

Grid 레이아웃을 만들기 위해서는 컨테이너와 아이템이 필요합니다. 컨테이너와 아이템에는 지정할 수 있는 속성이 각각 정해져있습니다. 여러 속성에 대해 살펴보겠습니다.

 

 

🤔 display: grid

컨테이너에 display: grid 를 적용하면서 시작합니다. 

속성으로는 grid와 inline-grid가 있습니다. 컨테이너가 block이 되냐, inline-block이 되냐의 차이입니다.

 

🤔 grid-template-columns / grid-template-rows

컨테이너 지정하는 속성으로, grid 트랙의 크기들을 지정합니다. 

grid-template-columns는 열(column)의 배치, grid-template-rows는 행(row)의 배치를 지정합니다.

 

 

🤔 row-gap / column-gap / gap

컨테이너에 지정하는 속성으로, 그리드 셀 사이의 간격을 설정합니다.

.container {
    row-gap: 10px; /* row 간격 10px */
    column-gap: 20px; /* column 간격 20px */
    gap: 10px 20px; /* row 간격 10px, column 간격 20px */
}

 

🤔 justify-items / align-items / place-items

컨테이너에 적용하는 속성으로, 아이템들을 가로 / 세로 방향으로 정렬합니다.

justify-items는 가로축 방향, align-items는 세로축 방향으로 아이템들을 정렬합니다. place-items는 align-items와 justify-items를 같이 쓸 수 있는 단축속성입니다. align-items, justify-items의 순서로 작성해야하며, 하나의 값만 작성한 경우 두 속성 모두에 적용됩니다.

속성값으로는 stretch, start, center, end 가 있습니다. 기본값은 stretch 입니다.

.container {
    /* justify-items: stretch; */
    justify-items: start;
    /* justify-items: center; */
    /* justify-items: end; */
}

.container {
    /* align-items: stretch; */
    align-items: start;
    /* align-items: center; */
    /* align-items: end; */
}

 

🤔 justify-content / align-content / place-content

컨테이너에 적용하는 속성으로, 아이템 그룹의 가로 / 세로 정렬을 담당합니다.

justify-content는 Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이터의 너비보다 작을 때 아이템들을 통째로 정렬하고,

align-content는 Grid 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 아이템들을 통째로 정렬합니다.

place-content는 align-content와 justify-content 를 같이 쓸 수 있는 단축속성입니다. align-content, justify-content 의 순서로 작성해야 하며, 하나의 값만 작성한 경우 두 속성 모두에 적용됩니다.

속성 값으로는 stretch, start, center, end, space-between, space-around, space-evenly 가 있습니다.

 

.container {
    /* justify-content: stretch; */
    /* justify-content: start; */
    /* justify-content: center; */
    /* justify-content: end; */
    justify-content: space-between;
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
}

.container {
    /* align-content: stretch; */
    /* align-content: start; */
    /* align-content: center; */
    /* align-content: end; */
    align-content: space-between;
    /* align-content: space-around; */
    /* align-content: space-evenly; */
}

 

🤔 grid-template-areas

컨테이너에 적용하는 속성으로, 각 영역에 이름을 붙이고 그 이름을 이용해서 배치하는 방법입니다.

각자 차지하는 셀의 갯수만큼 해당 위치의 이름을 작성해줍니다. 각 셀마다 공백을 하나씩 넣어 구분해줍니다.

빈칸을 지정하고 싶을 땐 마침표 또는 'none'을 사용합니다.

 

각 영역의 이름은 어떻게 지정할까요? 해당 아이템요소에 grid-area 속성을 통해 지정할 수 있습니다.

 

.container {
    grid-template-areas :
        "header header header"
        "a main b"
        ". . ."
        "footer footer footer"
}

.header {
    grid-area: header;
}
.sidebar-a {
    grid-area: a;
}
.main {
    grid-area: main;
}
.sidebar-b {
    grid-area: b;
}
.footer {
    grid-area: footer;
}

 

🤔 justify-self / align-self

아이템에 적용하는 속성으로, 개별 아이템을 가로 / 세로 방향으로 정렬합니다.

justify-self 은 가로축 방향, align-self 은 세로축 방향으로 해당 아이템을 정렬합니다.

속성 값으로는 stretch, start, center, end가 있습니다. 기본 값은 stretch로 아무것도 지정하지 않을 때 가로, 세로로 늘리게 됩니다.

 

.item:nth-child(2) {
    /* align-self: stretch; */
    /* align-self: start; */
    align-self: center; 
    /* align-self: end; */
}

.item:nth-child(2) {
    /* justify-self: stretch; */
    /* justify-self: start; */
    /* justify-self: center; */
    justify-self: end;
}

 

 

🤔 grid-column-start / grid-column-end / grid-column

아이템에 적용하는 속성으로, 각 셀의 영역을 지정합니다. (column 방향으로 범위 지정)

grid-column-start 에는 시작 번호, grid-column-end 에는 끝 번호가 작성됩니다. grid-column은 start와 end 속성을 한번에 쓰는 축약형입니다.

예시는 grid-row와 함께 살펴보도록 하겠습니다.

 

🤔 grid-row-start / grid-row-end / grid-row

아이템에 적용하는 속성으로, 각 셀의 영역을 지정합니다. (row 방향으로 범위 지정)

grid-row-start 에는 시작 번호, grid-row-end 에는 끝 번호가 작성됩니다. grid-row은 start와 end 속성을 한번에 쓰는 축약형입니다.

아래 두 코드는 동일한 결과를 출력합니다.

.item:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}

.item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

 

🤔 order

아이템에 지정하는 속성으로, 각 아이템들의 시각적 나열 순서를 결정합니다.

숫자값이 들어가며 작은 숫자일수록 먼저 배치됩니다. order로 지정한 순서는 시각적으로만 나열될 뿐 HTML 자체의 구조를 바꾸는 것이 아니기 때문에 스크린리더로 화면을 읽을 때는 order로 순서를 바꾸는 것은 의미가 없습니다.

.item:nth-child(1) {
    order: 2;
}
.item:nth-child(2) {
    order: 3;
}
.item:nth-child(3) {
    order: 1;
}