CSS | grid 속성 알아보기

요약

블록을 만들어 영역을 지정합니다 flex 와 같이 현대 CSS 기능 중 하나입니다. 파이어폭스의 개발자 모드로 grid 를 보면 더욱 쉽게 이해할 수 있습니다.

정의하기

.container {
    width: 400px;
    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 100px 100px 100px;
}

그리드는 먼저 display: grid; 로 정의되어야 합니다. 그 다음, 템플릿들을 정의해야 하는데요, grid-template-rows 는 행을 담당하고 grid-template-columns 는 열을 담당합니다.

grid-template-rows 와 grid-template-columns 는 정의하는법이 다양한데요,
먼저 1fr은 전체 너비에서 1의 비율을 가지는 것을 일컫습니다. 1fr 1fr 1fr 은 1:1:1 이 되겠죠.
그 외로 repeat(2, 100px) 은 100px 영역을 두개 만들고, repeat(3,1fr) 은 1비율의 값을 3개 만듭니다.

영역잡기

가로 영역은 grid-row 세로 영역은 grid-column 을 통해 지정할 수 있습니다.

1번 자식과 2번 자식에게 영역을 지정하면 위와같이 이동하게 됩니다.

코드사용

먼저 파이어폭스로 작업해보면 더욱 이해를 쉽게 할 수 있습니다. 아래의 코드를 복사한 후 개발자 모드(f12) 를 입력하면 flex를 설정할 수 있으니 위와같이 적용해보면 현재 그리드의 상태를 볼 수 있습니다.

.a {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 90vw;
}

.a div {
    width: 100%;
    height: 100%;
    font-size: 70px;
    text-align: center;
    color: #fff;
    background-color: rgb(24, 24, 24);
}

.a div:nth-child(1) {
    grid-column: 1/3;
}

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

<div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

코드를 합쳐 실행하면 위와같은 결과가 나옵니다.

참조

• CSS 그리드 레이아웃 – CSS: Cascading Style Sheets | MDN (mozilla.org)