웹사이트 css grid를 활용한 레이아웃

웹사이트 레이아웃을 위한 css는 몇 번을 거쳐 어느 정도 정착하게 되었습니다.

2000년도 초기(또는 그 이전)에는 포토샵 slice 기능을 이용한 table layout, 그 후 몇 년간 float, position을 이용한 레이아웃이 주를 이루었던 기억이 있습니다. 마이크로소프트 익스플로러(ie) 때문에 삽질한 추억이 많네요..;;

그리고 몇 년 전부터 flex, grid라는 스타일을 이용해 레이아웃을 많이 잡는데 그중 grid 공부할 때 기록해 둔 코드를 다시 살펴봤습니다.

<div id="main_container">
    <div class="header item">
        <h1 id="logo">Logo</h1>
    </div>
    <div class="main item">main</div>
    <div class="content1 item">content1</div>
    <div class="content2 item">content2</div>
    <div class="content3 item">content3</div>
    <div class="content4 item">content4</div>
    <div class="content5 item">content5</div>
    <div class="content6 item">content6</div>
    <div class="content7 item">content7</div>
    <div class="content8 item">content8</div>
    <div class="content9 item">content9</div>
    <div class="content10 item">content10</div>
    <div class="footer item">footer</div>
</div>

 

먼저 div로 구성해 준 다음 아래 css로 레이아웃 스타일을 입혀 주면 됩니다.

body{max-width:1280px; margin:0 auto}
#main_container{
  position:relative;
  display: grid;
  height: 200vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.3fr 0.8fr 0.6fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr;
  grid-template-areas:
    "header header header header"
    "main main main main"
    "content1 content2 content3 content4"
    "content5 content5 content6 content6"
    "content5 content5 content7 content7"
    "content8 content8 content9 content9"
    "content10 content10 content10 content10"
    "footer footer footer footer";
  grid-gap: 0.2rem;
}

.header { grid-area:header}
.main { grid-area:main; background:skyblue}
.content1 { grid-area:content1}
.content2 { grid-area:content2}
.content3 { grid-area:content3}
.content4 { grid-area:content4}
.content5 { grid-area:content5}
.content6 { grid-area:content6}
.content7 { grid-area:content7}
.content8 { grid-area:content8}
.content9 { grid-area:content9}
.content10 { grid-area:content10}
.footer { grid-area:footer}

.item{display:flex; justify-content: center; align-items: center; border:1px solid #ccc; }

#logo{position:absolute; left:10px; top:10px;}

 

display grid 는 grid-template-areas 속성을 이용해 틀을 잡을 수 있습니다.

height: 200vh; 는 기본 높이값이고, grid-template-rows: 0.3fr 0.8fr 0.6fr 0.3fr 0.3fr 0.3fr 0.3fr 0.3fr; 는 각 row 오브젝트의 비율이라 생각하시면 됩니다.

grid-template-areas 에는 전체 레이아웃의 구성을 표현하는데

예를 들어 

"content5 content5 content6 content6"
"content5 content5 content7 content7"

이럴 경우 content5는 두 행과 열이 엑셀의 셀 병합처럼 보여지고, 6과 7은 각 행은 병합되고 열은 분리되게 됩니다.

쉽게 생각하면 저기 css에 적은 대로 칸이 구분된다고 생각하시면 됩니다.

 

해당 코드를 적용했을 때 보이는 레이아웃입니다.

2년 전에 공부하면서 기록해 둔 자료를 다시 떠올리며 적다 보니 잘못된 부분이 있을 수 있습니다.

그리고 grid를 실무에 사용한 적은 없고 flex를 주로 사용 중입니다.

이런 것도 있구나 정도로 봐주시고, 실무에는 grid 든 flex 든 손에 익숙한 코드를 사용하시면 됩니다.

 

오늘도 방문해 주셔서 감사드립니다~^^