Flex vs Grid
- Flex는 한 방향 레이아웃 시스템 (1차원)
- Grid는 두 방향 레이아웃 시스템 (2차원)
Grid 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같다.
Flex와 마찬가지로, 컨테이너와 아이템이 있으면 된다.
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="item">I</div>
</div>부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고,
자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다.
“컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다.
용어정리
display: grid를 적용하는, Grid의 전체 영역입니다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 됩니다. 위 코드
가 Grid 컨테이너예요.같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 됩니다.
그리드 라인(Grid Line)
Grid 셀을 구분하는 선입니다.
그리드 번호(Grid Number)
Grid 라인의 각 번호입니다.
그리드 갭(Grid Gap)
Grid 셀 사이의 간격입니다.
그리드 영역(Grid Area)
Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합
repeat 함수
.container { grid-template-columns: repeat(5, 1fr); /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */ }repeat는 반복되는 값을 자동으로 처리할 수 있는 함수
repeat(반복횟수, 반복값)
즉, 위 코드의 repeat(5, 1fr)은 1fr 1fr 1fr 1fr 1fr과 같다.
minmax 함수
최솟값과 최댓값을 지정할 수 있는 함수
minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게..
auto-fill과 auto-fit
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.
auto-fill
셀의 개수가 모자르면 칸을 남겨둠.
auto-fit
셀의 개수가 모자르면 남는 공간을 채운다.
로그함수 성장을 그리고 싶은 개발자 지망생