[ HTML+CSS ] grid 쉽게 쓰자

grid를 배우는 이유는 레이아웃을 잡기 위해서다. 오직 한 가지 방법으로 웬만한 레이아웃은 다 구현할 수 있는 방법을 소개한다. 어떻게 보면 좀 무식한 방법일 수도 있는데.. 레이아웃이란게 한번만 윤곽을 잡으면 이후로 건드릴 필요가 거의 없기 때문에 '구현만 하면 되지 뭐' 마인드다. 근데 막상 구현해보면 생각보다 직관적이어서 '오 괜찮은데?' 라는 생각이 들 수도 있다. 아님 말고. 여기를 참고했다!!

 

무작정 따라하면서 익혀보자. 단계만 잘 따라가면 된다. 먼저 구현하고 싶은 레이아웃을 정하자. 간단한 것도 좋고, 굉장히 복잡한 것도 상관없다. 본인이 원하는 레이아웃을 하나 정하고 따라해보기를 바란다. 내가 구현하고자 하는 레이아웃은 아래와 같다. 

 

 

1. 구역마다 div 태그를 하나 만든다. 

내가 구현하고자 하는 레이아웃은 header, menu, main, top, aside, bottom, footer로 총 7개의 구역을 가진다. 따라서 7개의 div 태그를 생성한다. Container 역할을 하는 태그도 하나 생성해준다.

 

<div class="container">
    <div class="header">header</div>
    <div class="menu">menu</div>
    <div class="main">main</div>
    <div class="top">top</div>
    <div class="aside">aside</div>
    <div class="bottom">bottom</div>
    <div class="footer">footer</div>
</div>

 

2. 레이아웃을 표 형태로 만든다.

 

위와 같이 레이아웃을 잘게 쪼개서 표 형태로 만든다. 표는 5개의 행과 3개의 열을 가진다. 

 

3. 표의 셀들이 어떤 구역에 속하는지 적어준다.

 

4. Stylesheet에서 container를 제외한 모든 클래스에 grid-area 속성을 부여한다. 

.header{ 
    grid-area: hd;
    background-color: pink;
 }
 
.menu { 
    grid-area: me;
    background-color: skyblue;
}

.main { 
    grid-area: ma;
    background-color: orange; 
}

.top { 
    grid-area: tp; 
    background-color: gray;
}

.aside { 
    grid-area: as; 
    background-color: antiquewhite;
}

.bottom { 
    grid-area: bt;
    background-color: brown;
}

.footer { 
    grid-area: ft; 
    background-color: azure;
}

 

5. Container 클래스에 grid-template 속성을 부여해준다.

우리가 부여해줘야 하는 속성은 크게 세 가지다. 

 

 

1) grid-template-columns

grid-template-columns: 300px 1fr 300px;

 

3번 표에서 각 열의 길이를 지정해주는 단계다. Width를 부여하는 단계라고 생각하면 된다. 1열과 3열은 300px로 고정하고, 2열은 남는 공간을 쓰도록 했다. 1fr은 비율을 의미하는데 container 크기에서 600px를 제외하고 남는 비율을 말한다. 만약에 0.5fr이면 남는 공간의 절반만 쓰겠다는 뜻이다. 

 

 

2) grid-template-rows

grid-template-rows: 100px 150px 1fr 150px 100px;

 

3번 표에서 각 행의 길이를 지정해주는 단계다. Height를 부여하는 단계라고 생각하면 된다. 1행과 5행은 100px로 고정, 2행과 4행은 150px로 고정, 3행은 남는 공간을 쓰도록 했다. 

 

 

3) grid-template-areas

grid-template-areas: "hd hd hd"
                     "me ma tp"
                     "me ma as"
                     "me ma bt"
                     "ft ft ft";

 

3번 표 그대로 적어준 것이다. 단, 이름은 4번에서 grid-area로 지정한 이름을 써야 한다. 

 

6. 기타 설정들

.container {
    display: grid;
    grid-gap: 10px;
    height: 100vh;
    width: 100vw;
    grid-template-columns: 300px 1fr 300px;
    grid-template-rows: 100px 150px 1fr 150px 100px;
    grid-template-areas: "hd hd hd"
                         "me ma tp"
                         "me ma as"
                         "me ma bt"
                         "ft ft ft";
}

.container div {
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: 40px;
    padding: 20px;
    border: solid black 1px;
}

 

• Container 클래스의 display를 grid로 설정
• grid-gap을 설정해줘서 레이아웃 구역이 더 잘 보이도록 한다
• height, width를 뷰포트에 꽉 차도록 한다
• Container 안에 있는 div 태그들에 grid 속성을 부여
• 구역마다 border 속성을 부여해 레이아웃 구역이 더 잘 보이도록 한다

 

 

최종 코드 및 결과

See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.

 

 

 

0.25를 클릭하면 전체 레이아웃을 볼 수 있다.