그리드 하면 생각하는게 와플의 정직한 직선들이라 사진에 넣어보았다 ㅋㅋㅋ 이전까지는 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들을 적용시켜봤어요
그러면 화면구성은 어떻게 될까요!
짠~ 이렇게 멋있게 구역이 나누어집니다! 저 상태에서 개발자도구의 커서를 갖다 대면…
우리가 template area를 설정한 대로 정확하게 나뉘어서 나온게 보이시죠? (글씨는 원래 안 뜨는건데 보기 쉽게 제가 추가해놓은거에요.) 이 방법을 쓰면 margin이나 width, height 기타 등등의 속성을 따로 주지 않아도 되니까 진짜 편한거 같아요!
글이 너무 길어지는거 같으니 다음편으로 계속…
출처에 있는 srimba 사이트 꼭 들어가보세요! 영상 들으면서 직접 그 화면에서 실습도 해볼수 있어요 넘나 신기한것… 이렇게..!
