CSS Grid로 레이아웃을 짜보자 1탄

둘둘·2020년 3월 6일

작년 8월에 작성된 글입니다.

그리드 하면 생각하는게 와플의 정직한 직선들이라 사진에 넣어보았다 ㅋㅋㅋ
이전까지는 flex만 써봤는데(사실 아직 flex를 마스터한것도 아니다.. 다음번에 정리해놔야지)
flex보다 좀 더 유용할 것 같은 Grid에 대해 정리해보려고 한다!

왜 Grid를 쓸까?

2차원 레이아웃을 짜기 쉽다
부트스트랩보다 심플한 마크업 구조!

Grid

Grid, 말 그대로 격자선을 말한다.
크게 전체를 감싸는 container와 그 안의 요소들로 나눌 수 있는데
더 크게 나눠보자면 row와 column으로도 나누어지겠지! flex처럼

먼저 html 구조를 짜보자!

    <div class="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

scss 기능을 약간 활용한 css 구조도 함께 볼게요~

$yellow: #ffdd59;
$blue: #3c40c6;
.container {
  display: grid;
  div {
    width: 100px;
    height: 80px;
  }
  div:nth-child(even) {
    background: $yellow;
  }
  div:nth-child(odd) {
    background: $blue;
  }
}

이렇게 하면 하단의 구조가 나올거에요. (듀얼모니터 쓰는 중이라 스크롤도 애매하게 캡쳐됐지만 무시하세여 ㅋㅋ)

먼저 container에는 display: grid;라는 속성을 주었고요.
화면에 상자를 보이게 하려고 자식 div들에게 크기를 따로 주었지만 이렇게 하지 않아도 됩니다.
부모div인 container에 rows와 columns 크기를 지정하면 자식들이 따라갑니다.

grid-template-columnns/rows

자식 div에 준 width와 height을 지우고, container에 두 줄을 추가해볼게요

grid-template-rows: 100px 100px 100px;
grid-template-columns: 50px 50px 50px;

이렇게 보니 감이 안 오죠? rows에서 50px 하나를 제거해볼게요

grid-template-rows: 100px 100px;
grid-template-columns: 50px 50px 50px;

이렇게 하면...

약간 감이 오시나요??

grid-template-rows: 100px 100px;는 세로 100px짜리를 2행으로 만들어라 라는 뜻이였고요,
grid-template-columns: 50px 50px 50px;는 가로 50px짜리를 3열로 만들어라 라는 뜻이에요!

많이 헷갈리죠? 그치만 익숙해지면 손쉽게 쓸 수 있을거에요!
근데 네모가 붙어있어서 좀 답답한데 떨어뜨리고 싶어요.. 그럴땐 어떻게 할까요?

grid-gap

갭이라는 속성이 있어서 사이사이를 띄워줄 수 있어요!
아까 줬던 container의 css에 grid-gap: 5px; 이걸 추가해볼게요

그러면 이렇게 간격이 뙇!!

auto-flow와 auto-rows/columns

위에서 자식div가 9개였는데 grid-template-rows: 100px 100px; 으로 설정해줘서 2행까지밖에 뜨지 않죠! 지금의 상황처럼 숨겨진 자식div를 자동으로 화면에 띄워주는 것이 바로 grid-auto뭐시깽이들이에요

grid-auto-rows: 200px 이라고 한 줄 추가해볼게요.

이렇게 하면 숨겨졌던 세 개의 div들이 세로가 200px인 상태로 화면에 나타나게 됩니다!
우리가 만들 웹페이지나 모바일 화면은 위에서 아래로 스크롤을 내리는 형식이니까 이 성질을 잘 활용하면 좋겠죠?

grid-auto-columns: 200px 이라고 써보면 어떨까요?
정답은 아무 일도 일어나지 않는다!
왜냐... grid-auto 뭐시기의 default값은 row로 설정이 되어있기 때문이죠!
그럴 때 써주는게 grid-auto-flow입니다.

위에서 설정한 코드 밑에 grid-auto-flow: columns 이 속성을 추가해보면..

아까는 아무 일도 일어나지 않았지만 보다시피 column 속성이 채워집니다!

grid-template-areas

왠지 grid에서의 핵심 특징인것 같은 느낌적인 느낌인 이 template-areas!
제가 설정한 템플릿에 따라 화면구성을 만들어주는 친구입니다.

아까는 div가 9개인 상태에서 시작했지만 지금은 4개로 시작할거에요.
각각의 className은 first~fourth까지!!

const Grid = () => {
    return(
      <div className="container">
      <div className="first"></div>
      <div className="second"></div>
      <div className="third"></div>
      <div className="fourth"></div>

    </div>

    )
}

css 코드도 함 봅시다

$red: #ff5e57;
$yellow: #ffdd59;
$blue: #3c40c6;
$green: #05c46b;
.container {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  grid-auto-rows: 200px;
  grid-template-areas: "head head head"
                       "content content side"
                       "content content side"
                       "footer footer footer"
  div:first-child {
    grid-area: head;
    background: $green;
  }
  .second {
    grid-area: content;
    background: $yellow;
  }
  .third {
    grid-area: side;
    background: $red;
  }
  .fourth {
    grid-area: footer;
    background: $blue;
  }
}

부모div에는 "head head head" 이런식의 string 값을 4개 주었구요
각각의 자식 div에 grid-area라는 속성을 추가하고 value에는 부모div에서 정의한 template들을 적용시켜봤어요

그러면 화면구성은 어떻게 될까요!