css Grid 를 Lite 하게 알아보자 !

grid

grid는 조금 더 복잡한 레이아웃을 잡을 때 사용된다.

상위 요소에 display의 값을 grid로 설정해주면 설정해준 요소는 grid container 가 되고 그 자식 요소는 grid item이 된다.

grid container에 사용하는 속성

grid-template grid container가 가지는 각 행과 열을 정의해주는 단축 속성이다.
                         ex)grid-template: 100px 100px / 100px 100px;  <- 넓이가 100px인 행과 열이 2개이다 총 4개의 cell 

• grid-template-rows  grid container의 행의 개수와 크기를 지정할 수 있다.
                                   ex)grid-template-rows: 100px 100px;  <- 행이 2개이고 각 행의 넓이는 100px이다
• grid-template-columns grid container의 열의 개수와 크기를 지정할 수 있다.
                                          ex)grid-template-columns: 100px 100px <- 열이 2개이고 각 열의 넓이는 100px이다

grid-template-areas 기본적으로 각 item에 grid-area 속성을 통해 이름을 정해줘야 사용 가능하다.

                                   ex) grid-template-areas:                

                                          "header header header"      이렇게 하면 header라고 이름이 지정된 item이 3cell,

                                          "main main main"                 main이라고 이름이 지정된 item이 3cell,

                                          "  .  footer footer"                   footer라고 지정된 item이 2cell을 차지하고 dot은 비워둔다.

grid-auto-rows grid-template 속성으로 명시적으로 정해지지 않은 행의 넓이를 정해준다.
                           ex) grid-auto-rows: 100px;  이렇게 하면 만약 행이 2개인 container에 요소가 3번째 행으로 가게 된다면
                                                                     명시적으로 3번째 행의 넓이는 정해지지 않았지만 grid-auto-rows 속성으로
                                                                     그 행의 넓이는 100px이 된다.

grid-auto-columns grid-template 속성으로 명시적으로 정해지지 않은 열의 넓이를 정해준다.
                                ex) grid-auto-columns: 100px; 이렇게 하면 만약 열이 2개인 contaner에 요소가 3번째 열로 가게 된다면
                                                                      명시적으로 3번째 열의 넓이는 정해지지 않았지만 grid-auto-columns 속성으로
                                                                      그 열의 넓이는 100px이 된다.

grid-auto-flow grid container의 아이템들이 배치되는 방법을 설정해준다. 기본값은 수평방향으로 배치되는 row이고, 
                         수직방향으로 배치되게 해주는 column, 수평방향으로 배치하되 빈 공간이 있으면 그 공간을 채울 수 있는 item으로
                         공간을 매워주는 row dense, 수직방향으로 배치 하되 빈공간이 있으면 그공간을 채울 수 있는 item으로
                         공간을 매워주는 column dense가 있다.

grid-gap grid container 각 cell의 간격을 설정해준다 
               ex) grid-gap: 10px 20px; 행 사이의 간격은 10px, 열 사이의 간격은 20px;

justify-content cell의 가로 너비가 container의 가로 너비보다 작아야 사용할 수 있으며 container안에서 cell들의 수평축 정렬을 해준다.

• start cell들을 수평축 시작점에 맞춰 정렬한다.
• end cell들을 수평축 끝점에 맞춰 정렬한다.
• center cell들을 수평축 가운데 지점에 정렬한다.
• space-between cell들의 첫 번째 열을 시작점 마지막 열을 끝점에 붙이고 사이의 cell은 고르게 배치한다.
• space-around 각열의 양쪽에 동일한 여백을 주고 정렬한다.

align-content cell들의 세로 너비가 container의 세로 너비보다 작아야 사용할 수 있으며 container안에서 cell들의 수직축 정렬을 해준다.

• start cell들을 수직축 시작점에 맞춰 정렬한다.
• end cell들을 수직축 끝점에 맞춰 정렬한다.
• center cell들을 수직축 가운데 지점에 정렬한다.
• space-between cell들의 첫 번째 행을 시작점 마지막 행을 끝점에 붙이고 사이의 cell은 고르게 배치한다.
• space-around 각행의 양쪽에 동일한 여백을 주고 정렬한다.

justify-items item들의 가로 너비가 cell의 가로 너비보다 작아야 사용할 수 있으며 cell 안에서 item들의 수평축 정렬을 해준다.

• start item들을 수평축 시작점에 맞춰 정렬한다.
• end item들을 수평축 끝점에 맞춰 정렬한다.
• center item들을 수평축 가운데 지점에 정렬한다.

align-items item들의 세로 너비가 cell의 세로 너비보다 작아야 사용할 수 있으며 cell 안에서 item들의 수직축 정렬을 해준다.

• start item들을 수직축 시작점에 맞춰 정렬한다.
• end item들을 수직축 끝점에 맞춰 정렬한다.
• center item들을 수직축 가운데 지점에 정렬한다.

grid item에 사용하는 속성

grid-row item의 행의 위치를 설정해준다. ex) grid-row: 1 / 3 <- item이 1번째 행의 선에서 3번째 행의 선 사이에 위치한다.

grid-column item의 열의 영역을 설정해준다. ex)grid-column: 4/ 5 <- item이 4번째 열의 선에서 5번째 열의 선 사이에 위치한다.

grid-area item의 이름을 설정해 줄 수 있다. ex)grid-area: header; <- 이름을 정하면 grid-template-areas를 통해 사용할 수 있다.

justify-self item의 가로 너비가 cell의 가로 너비보다 작아야 사용할 수 있으며 cell 안에서 각각 item의 수평축 정렬을 해준다.

• start item들을 수평축 시작점에 맞춰 정렬한다.
• end item들을 수평축 끝점에 맞춰 정렬한다.
• center item들을 수평축 가운데 지점에 정렬한다.

align-self item의 세로 너비가 cell의 세로 너비보다 작아야 사용할 수 있으며 cell 안에서 각각 item의 수직축 정렬을 해준다.

• start item들을 수직축 시작점에 맞춰 정렬한다.
• end item들을 수직축 끝점에 맞춰 정렬한다.
• center item들을 수직축 가운데 지점에 정렬한다.

order item의 배치 순서를 바꿔 줄 수 있다.

z-index item의 z축의 위치를 설정해줄 수 있다.

 

grid 에서 사용하는 함수

repeat(반복횟수, 반복할 크기 ) grid-template 속성의 값으로 주로 사용되며 설정 크기를 반복 횟수만큼 반복해서 행이나 열을 생성한다.

minmax(최소값 , 최대값) grid-template 이나 grid-auto-rows, grid-auto-columns 에서 주로 사용되며
                                       넓이의 최소값과 최대값을 설정할 수 있다.

fit-content(최대크기) 행이나 열의 크기를 item이 가지고 있는 내용의 크기에 맞추되 최대 크기를 정해서 제어한다.