레이아웃 짤 때 flex box를 사용하면 너무 간편하고 손쉽게 내가 원하는 위치에 콘텐츠를 둘 수 있다.
여기에서는 flex의 업그레이드(?)된 버전인 grid에 대해서 배워보려고 한다!
어려운 듯 보이지만 쓰다보면 비교적 직관적이기 때문에 사용하고 싶은 모양의 ⭐속성만 추가하면 된다 👍
📌 grid 직접 써보기
🔹 HTML 구조를 짤 때 flexbox처럼 전체 아이템을 감싸고 있는 부모 태그 만들기
🔹 CSS 작성 시 부모태그에 display: grid; 속성 넣기
display: grid; 값을 넣으면 자식요소가 block 속성을 가지게 되는데, 인라인 속성으로 바꾸고 싶을 때에는
display: inline-grid; 로 넣으면 된다.
📝 HTML 구조
<div class = "container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>📝 CSS 속성
.container {
display: grid;
}자식요소가 block 속성으로 잡히기 때문에 변화는 없다.
📌 '부모'한테 속성 넣어서 원하는 모양 만들기
🔹 grid-template-columns
🔹 grid-template-rows
공부하면서 flexbox와 조금은 다르다고 느꼈던 부분이 이 부분이다.
flex에서는 자식의 너비값을 조절할 때 자식요소한테 직접 width: 30%;이나 width: 200px;와 같이 입력해줬다면
⭐ grid에서는 부모한테 속성을 추가해 준다는 것!
속성 추가 전에...
봐도봐도 헷갈리는 column과 row에 대해서 다시 짚어보자 🤔
세로정렬는 column, 가로정렬는 row 로 나타낸다.
고로!
grid-template-columns에 값을 넣으면 순서대로 각 column에 해당하는 값을 주고,
grid-template-rows에 값을 넣으면 각 row에 값을 준다는 소리 (오 신기해 😮)
🔶 이제 진짜! 속성 값 넣어보기
📝 1. 픽셀 단위
.container {
grid-template-columns: 200px 200px 500px 300px;
grid-template-rows: 200px 140px 100px;
}📝 2. 비율
.continer {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 5fr 3fr 7fr;
}만약, 같은 비율로 되어있는 column이 여러개라면 repeat을 사용해서 적어주면 된다!
.container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 2fr);
}📝 3. '자식'요소에 start와 end를 이용해 합치기
보기 쉽게 네번째 자식을 잡아서 예시를 들어보쟈아
.item:nth-child(4) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
혹은 ▶
.item:nth-child(4) {
grid-column: 1/3;
grid-row: 2/4;
}
혹은 ▶
.item:nth-child(4) {
grid-column: 1 / span 2; /* span에 합칠 셀의 갯수 지정 */
grid-row: 2 / span 2;
}합치고 나서 여백 부분은 다음 자식요소가 알아서 자리를 잡네! 오..... 편안
📝 3. gap으로 간격 만들기
.continer {
gap: 20px 60px; /* gap: column row */
}
그리드 기본은 숙지했으니 포트폴리오나 프로젝트 작업할 때 써봐야지 💪
공부하다 보니까 생각보다 그리드 하나로도 deeeeeeep하게 배울 부분이 많은 것 같은데
다음에는 더 정교하게 들어가봐야겠다
그럼 이만 👋
