1.Grid
grid도 flex처럼 layout을 만들 때 사용하다.
grid또한 display:grid로 설정해주면 된다.
- flex는 한 방향 레이아웃 시스템인 1차원적인 레이아웃이고
- grid는 행(row)+열(column) 두 방향 레이아웃인 2차원적인 레이아웃이다.
- 이 행과 열은 각자 grid-template-rows와 grid-template-columns로 나타내준다.
💁 grid-template-column은 '열의 넓이를 설정' grid-template-rows는 '행의 높이 설정'
이렇게 이해하면 쉽다.
- grid container: 그리드의 가장 바깥영억
- grid item: 컨테이너의 자식들
💁 item들은 container의 영역을 꽉 채우려고 하는 속성이 있다.- grid trick: 행 또는 열
- grid cell: 한 칸
- grid line: 셀을 구분하는 선
- grid gap: 셀 사이 간격
<style>
.container {
display: grid;
height: 100vh;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px 100px;
gap: 10px 20px;
}
[class^="item"] {
background: pink;
border: 1px solid black;
}
.item1 {
/* grid-column-start: 1;
grid-column-end: 3; */
/* grid-column: 1 / 3; */
/* grid-row-start: 1;
grid-row-end: 3; */
grid-row: 1 / 4;
}
</style><body>
<div class="container">
<div class="item1">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>
</body> 💁 이런 모양이 나옵니다!!
- 위에서 grid-row가 설정되어 있는데, 이 뜻은 1열부터 4열까지를 합쳐준다는 얘기
이거를 다른 방식으로
🔍 grid-row-start:1;과 grid-row-end:4; 이렇게 사용도 가능함.
🔍 grid-row: 1 / 2span 이렇게 span을 적어줘도 되는데 span은 한 칸이라고 생각하면 됨.
grid-template-columns에 repaeat(3,1fr)의 의미는,
🔍 그리드를 트랙별로 반복해준다는 얘기! 여기서는 3개의 열을 설정해주고 그 넓이를 1fr만큼 준다는 얘기.
🔍1fr에서 fr은? 유연한 크기를 갖는 단위로 컨테이너 내의 공간 비율을 분수(fraction)으로 나타냄.
💁 flex로는 아이템들 정렬해주기가 편했지만, grid는 플렉스보다는 좀 더 유연하고 자유롭게 레이아웃을 디자인 할 수 있다는 점과 이미지를 비율에 맞게 늘리고 줄일 수 있는 점이 깔끔하고 좋았다. 그래서 grid는 이미지를 사용하는 레이아웃을 디자인하거나 그거를 디자인적으로 좀 더 멋지게 표현하고 싶을 때 사용하면 좋을 것 같다!
