CSS Grid 사용법 정리 (grid-template-columns, grid-template-rows)

Grid는 행과 열을 나누어 UI를 만들기 위해서 사용이 됩니다.

HTML의 블록 태그를 사용하면 태그들이 층층이 쌓이게 되고, 인라인 태그를 사용하게 되면 한 줄로 태그들이 쌓이게 되는데요. Grid 없이 UI를 만들고 화면을 분리를 하게 되면 정말 쉽지 않다는 것을 느낄 수 있습니다.

Grid의 사용법과 많이 쓰는 속성들에 대해서 정리를 하도록 하겠습니다 :)

1. 기본 Grid 만들기(grid-template-columns, grid-template-rows)

부모 태그인 container div를 하나 생성하고,  자식 태그인 box div를 4개 생성하였습니다.

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

 

Grid를 만들 때는 자식 태그가 아닌, 부모 태그(예제에서는 container div)에 Grid 속성을 직접 명시를 해주셔야 돼요!

.container {
    display: grid;
    grid-template-columns: 300px 400px;
    grid-template-rows: 100px 200px;
    gap: 10px;
}

.box {
    background: greenyellow;
}

 

.container에 display를 grid로 부여를 하였습니다. 다음으로 격자를 만들기 위해서 grid-template-columns와 grid-template-rows를 부여하였는데요. columns를 부여하게 되면 세로줄 몇 칸을 만들지 결정하게 됩니다. 300px 400px를 부여하였으니 첫 번 째 세로줄 300px 한 줄,  두 번째 400px 한 줄인 2줄이 만들어지겠습니다.

rows를 부여했을 때는 가로 줄을 몇 개 만들지 지정하는데요. 100px 가로줄, 200px 가로줄이 각각 생성이 되겠습니다 :)

 

2. Grid 셀 나누기 (grid-column-start, grid-column-end, grid-column-start, grid-column-start)

1번 항목에서는 Grid를 2x2 3x3 형식으로 나누었습니다. Grid를 조금 더 원하는 모습으로 나눌 수 있도록 특정 셀에 시작점과 종료점에 값을 지정하여 우리가 원하는 Grid를 그려보도록 하겠습니다 :)

우선 그림부터 확인을 할 텐데요.

정사각형의 그리드가 아닌 우리가 원하는 구조의 UI에요! 코드와 함께 하나씩 알아보도록 하겠습니다.

div 박스를 4개 만들어 주시고요.

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

css를 통해서 grid 속성을 부여하겠습니다.

.container {
    display: grid;
    grid-template-columns: 300px 400px;
    grid-template-rows: 100px 200px 250px;
    gap: 10px;
}
.box {
    background: greenyellow;
}
.box:nth-child(1) {
    background: #4CB9E7;
    grid-column-start: 1;
    grid-column-end: -1;
    grid-row-start: 1;
    grid-row-end: 2;
}
.box:nth-child(3) {
    background: #E7BCDE;
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
}

 

부모 태그에 grid를 부여하는 방법은 동일해요. 특정 셀의 크기를 특정 위치까지 차지하고 싶을 때 start, end 속성을 부여해 주시면 되겠습니다.

1번 박스의 경우 grid-column-start의 시작점은 빨간색 숫자 1부터, 종료점은 grid-column-end는 -1까지 지정을 하였습니다. -1은 마지막 숫자를 의미하며 위에서의 예시에서는 3과 동일하겠습니다. 이렇게 값을 지정하면 1번부터 3번까지 범위를 차지하고 row의 경우도 동일해요. row의 시작점 grid-row-start의 경우 파란색 숫자 1부터, 종료점 grid-row-end는 2까지 지정을 하여서 1개의 row 범위만큼 지정을 해주시면 되겠습니다.

3번 박스의 경우도 살펴볼게요.

grid-column-start의 시작점은 빨간색 숫자 2부터, 종료점은 grid-column-end는 3까지 지정을 하였습니다. row의 시작점 grid-row-start의 경우 파란색 숫자 2부터, 종료점 grid-row-end는 4까지 지정을 하여서 2개의 row 범위만 큼 차지를 하겠습니다.

주의할 점은 앞에 있는 1번 박스부터 차례대로 값을 부여해 주세요. 아래에 있는 박스부터 값을 부여하면 박스들이 밀려서 원하시는 ui가 나오지 않을 수 있습니다.

이렇게 start와 end 값을 부여하여 그리드 내의 셀을 원하는 범위만큼 차지할 수 있겠습니다 :)