CSS Grid 사용법 정리 (grid column, row에 이름 명시)

안녕하세요.

저번 시간에는 grid를 활용하여 표를 만들어 보았습니다. 또한 grid-column, grid-row 속성을 활용하여 원하는 셀들을 합치는 과정도 학습을 하였는데요. (이전 학습 URL: https://mjlabs.tistory.com/48)

이번 시간에는 셀들을 합치는 과정에서 조금 더 쉽게 합칠 수 있도록, column과 row에 이름을 부여해 보도록 하겠습니다 :)

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>

 

html 코드를 위와 같이 작성을 하였습니다. grid 속성을 부여하기 위해서 container div를 만들고, 자식 태그로 box div를 8개 만들었습니다. 다음으로 css 코드를 작성하겠습니다.

.container {
    display: grid;
    grid-template-columns: [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4] 1fr [col-5];
    grid-template-rows: 1fr 1fr 1fr 1fr;
}
.box:nth-child(1) {
    grid-column: col-1 / col-3;
    background: #F3CCF3;
}

 

저번 시간과 내용은 거의 동일한데요. 추가적인 내용이 있습니다. 이름을 지정하기 위해서 [col-1] [col-2] [col-3] [col-4] [col-5] 추가되었습니다. 지금 보이시는 이름은 개발자 마음대로 정의를 해주셔도 되는데요.

이름을 지정하지 않는다면 순번으로 구분을 하였습니다. 하지만 이름을 지정해주시게 되면 숫자 대신 정해준 이름을 사용할 수 있어, 조금 더 직관적으로 레이아웃을 나눌 수 있습니다.

코드를 보시면 grid-template에서 정의한 이름을, grid-column에서 사용을 하고 있는 모습을 보실 수 있겠습니다.

학습만을 할 때는 숫자로만 작성을 해도 괜찮을 것 같은데? 라고 생각을 하실 수 있는데요. 직접 작성을 해보시면 네이밍을 사용하는 것이 더 직관적이고 이해하기 쉽겠구나라는 생각이 들더라고요😢

위에 예제에서는 column에만 이름을 부여하였는데, row에도 동일하게 원하시는 이름을 부여하고 사용을 할 수 있겠습니다.

 

grid-column 이란?

grid-column은 grid-column-start와 grid-column-end를 한번에 쓰기 위한 축약형 속성이에요.

grid-column-start:1; grid-column-end:3; 일 때 grid-column: 1 / 3; 으로 한 번에 작성을 해주실 수 있겠습니다 :)