grid는 중요하다. 간편하게 레이아웃을 짤 수 있다. 이제 grid가 얼마나 훌륭한 개념인지 알아보자.
별 볼일 없는 4개의 블럭이 있다. 이 녀석들 사이에 일정한 공간을 만들고 싶다.
css
.parent {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.child {
flex-basis: 30%;
background:black;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.child:nth-child(4){
margin-top: 10px;
}parent에 flex를 주고 wrap으로 묶고 space-between으로 간격을 만들고 child에 flex-basis 로 width를 주고 4번 박스에만 margin-top을 줘서 간신히 완성했다.
이제 5번 박스를 추가하면 어떻게 될까.
몹시 볼품없는 진형이다. 알맞은 간격으로 2번 밑에 5번 박스가 왔으면 좋겠지만 parent가 가진 space-between 때문에 쉽지 않다. flex box의 한계다.
grid
grid도 flex처럼 parent에 시작된다.
.parent {
display: grid;
}
하이! grid가 밝게 인사하는 소리다.
parent에 grid를 주니 child에 실선이 생겼다. 이제 column을 다뤄 grid를 만들어 가면 된다.
.parent {
display: grid;
grid-template-columns: 10px 20px 30px 40px 10px;
}
grid-template-columns: 10px 20px 30px 40px 10px에 적은 px과 동일하게 각 box에 적용되었다.
.parent {
display: grid;
grid-template-columns: 100px 100px 100px;
column-gap: 10px;
}이번엔 6번 박스를 추가하고 3개의 column에 100px을 주고 column-gap에 10px을 주었다.
10px 만큼 column gap이 생겼다. box는 3개의 100px column이 되었다. 여기에 row-gap을 주면 격자무늬가 완성된다.
너무 간단하여 눈물이 나올 것 같다.
width 는 column에 지정된 px을 따라가고 row가 지정되지 않았다면 height는 box가 가진 font-size를 따라간다.
.parent {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 150px 200px;
grid-gap : 10px;
}
grid-template-rows 를 만들어 100px, 150px, 200px 만큼 row를 주었다.
grid 기본 이론 끝!
