(CSS) grid 3탄 : grid template 사용법

 

 

지난 포스팅에는 grid line, 그리고 grid 레이아웃을 변경시키는 방법에 대해 다루었다.

 

이번 포스팅에서는 grid template을 활용해 직관적으로 레이아웃을 만드는 방법에 대해 다루어보려고 한다.

 

 

 

grid-templete을 사용하는 이유

 

만약 아래와 같은 레이아웃을 만들고 싶다고 할 때,

 

2탄에서 설명한 grid-column, grid-row를 사용해 구성하려면 복잡하고 헷갈린다.

 

이때 grid templete을 사용하면 훨씬 더 직관적으로, 그리고 편리하게 레이아웃을 구성할 수 있다.

 

정리하자면 기존 grid에서 한 두 칸 정도 변형이 필요한 경우에는 grid-column, grid-row을 활용하고,

 

좀 더 복잡한 레이아웃에는 grid-templete을 사용하는 게 좋다.

 

 

grid-templete 사용법

grid-templete 사용법은 몹시 간단하다. 내가 구성하고자 하는 템플릿을 그대로 작성하면 된다.

 

예를 들어 상단의 레이아웃을 grid-template로 표현하면 아래 코드와 같이 표현할 수 있다.

 

여기서 중요한 것은 grid-item(자식)에게 꼭 grid-area를 지정해줘야 한다는 것이다. 

 

.parents{
	height: 100vh;
	display: grid;
	grid-template:
        "a a a" 1fr /*각 row의 크기*/
        "b b c" 2fr
        "d d d" 1fr / 1fr 1fr 1fr; /*각 column의 크기*/
}

.a{
    grid-area: a; /*grid-template에서 a area 지정*/
    background-color: red;
}

.b{
    grid-area: b; /*grid-template에서 b area 지정*/
    background-color: orange;
}

.c{
    grid-area: c; /*grid-template에서 c area 지정*/
    background-color: yellow;
}

.d{
    grid-area: d; /*grid-template에서 d area 지정*/
    background-color: blue;
}

 

 

 

(CSS) grid 2탄 : grid line, span, grid-column, grid-row