css의 flex은 1차원을 쉽게 정렬하는 방벙이라면,
grid는 2차원 레이아웃을 배치하는 방법이다. 엑셀시트같은 느낌이다.
먼저 알아야 할 사항
gird도 flex와 마찬가지로 안에있는 아이템들을 정렬하는 display이기 때문에 container에 설정할 수 있는 속성와 item에 설정할 수 있는 속성이 다르다.
container
grid-template-rows, gird-template-columns
가장 먼저 해야할 일은 grid의 행과 열의 개수를 설정하는 속성이다.
동시에 크기도 함께 설정해야 한다.
크기는 px로도 설정할 수 있지만 비율로 크기를 설정할 수 있다.
1fr은 공간 중 1의 비율로 가져가겠다는 뜻이다.
auto를 넣을 수도 있다.
- 사용할 수 있는 단위
-
fr
남는 공간 중 비율로 가져감 -
min-content
컨텐트를 해치지 않는 선에서 최소로 제공 (한글은 한글자기준, 영어는 띄어쓰기기준) -
max-content
컨텐트를 길이를 보장함 -
auto-fill
repeat, minmax 함께 사용해야함. (다른 경우에는 언제 되는지 모른다)
repeat(auto-fill, minmax(200px, 1fr)); -
auto-fit
repeat(auto-fit, minmax(200px, 1fr));auto-fill과 auto-fit은 남는 공간이 있을 때 차이가 있다.
auto-fill은 모든 아이템이 한 줄에 들어왔을 때, 최소 크기만 차지하지만,
auto-fit은 최대로 늘려준다.
아래 예시로 브라우저 가로를 줄였다 늘였다 해보며 비교해보자.
-
예시
만약 반복이면 repeat(4, 1fr) 처럼 할 수도 있다. 1fr을 4번 반복해서 설정하겠다는 뜻이다.
예시
grid-template-rows: auto auto;
grid-template-columns: 300px 1fr 300px;나는 자주 헷갈리는데, columns는 열의 개수, row은 행의 개수다.
columns3개 row2개를 만들면 아래와같이 된다. 한 행의 몇개의 열을 만들지 정하는게 아니다.
grid-template-areas
위에서 정한 행렬에 이름을 정해주는 속성이다.
예시
grid-template-areas:
"left top top"
"left main hi";이때 엑셀 셀 병합하듯 병합할 수 있다. 같은 이름을 여러 영역에 넣으면 병합한다.
다만 'ㄱ' 'ㄴ' 이런 형태로는 안된다. 무조건 네모로 병합해야한다. 엑셀시트처럼
안하면 순서대로 들어간다.
설정한 행령에 맞춰야 한다.
안맞추면?? -> auto-columns
차지안하고 싶으면 . 으로 표시
grid-auto-rows, grid-auto-colunms
지정한 영역을 넘쳐서 요소가 많아질때, 그 셀들의 크기를 정할 수 있다.
예시
grid-auto-rows: 50px;
grid-auto-columns: auto;grid-auto-flow
자동으로 채워질 때, 채울 방향 순서를 정할 수 있다.
rid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: row dense;dense는 비는 자리 없이 꽉꽉 채움(테트리스처럼)
row-grap
행 사이 간격
간격만큼 추가되는게 아니고, 나머지 아이템 영역이랑 나눠먹음
다른 속성이랑 같이 썼을 때 어떻게 되는지 좀 더 자세히 알아봐야할듯
justfy-content, align-content, align-items
사전조건: container안에 items을 모두 배치해도 남는 공간이 있어야함
flex 와 같다.
space-between과 gap과 차이는 뭘까?
-> space-between은 남는 공간이 있어야하지만 gap은 container의 크기를 초과해서라도 띄운다.
Item에 적용할 수 있는 속성들
grid-row, grid-column
브라우저에서 gird를 선택하면 위 사진처럼 번호가 뜬다.
gird-auto-row, grid-auto-column 으로 나온 아이템은 뜨지 않는다.
한 아이템이 차지할 행의 번호와 열의 번호는 정하는 속성이다. width와 height이 정해져있으면 차지하더라도 늘어나지는 않는다.
span 을 넣으면 시작가 끝을 지정하는게 아닌 시작점부터 '몇개' 차지할 건지 적을 수도 있다.
예시
grid-area
영역에서 아이템이 차지할 위치를 정하는 속성이다.
첫번째 방법은 차지할 영역을 번호로 지정해주는 방법이다.
아래의 short-hand 이기 때문에 가능하다.
grid-row-start / grid-column-end / grid-row-end / grid-column-start
grid-area: 1 / 2 / 1 / 2;두번째 방법은 이름을 지정해주는 것인데, 이 방법은 더 자주 쓰는 거 같다.
container에서 grid-template-area로 설정했던 이름들을 적어주어 내가 가져가겠다고 말하는 것이다.
grid-area: "top";order
flex와 마찬가지로 아이템 본인의 순서를 지정할 수 있다.
