👏 Gird-box

1. Grid

Flex와 다르게 두 방향 레이아웃 시스템이다.

2. Grid Container

display: grid;를 선언한 태그를 의미한다.

3. Grid Item

Grid Container의 자식 태그들을 의미한다.

4. grid-template-*

Grid Container에서 정의해주며 Grid Track의 크기를 지정해주는 속성이다.
즉, Grid Item의 크기를 정의하는 것이다.

• grid-template-columns는 그리드 아이템의 가로방향 배치를 결정한다.
• grid-template-rows는 그리드 아이템의 세로방향 배치를 결정한다.

.grid-container {
	display: grid;
    /* 가로로 3개 200px, 500px, 300px 영역만큼 차지하도록 배치 */
    grid-template-columns: 200px 500px 300px;
    
    /* 가로로 3개 같은 영역만큼 나눠서 배치 ( 아래 두 개는 완벽히 동일 ) */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    
    /* 가로로 3개 최소 100px, 최대 auto 배치 */
    grid-template-columns: repeat(3, minmax(100px, auto));
}

그리드 컨테이너는 기본적으로 가로든 세로든 그리드 아이템을 가득 채운다.( = 유연하게 늘린다. )

5. auto-fill과 auto-fit

repeat()에 사용하며 반복할 횟수를 미리 지정하지 않고 크기에 맞게 반복하게 해주는 값이다.
auto-fill은 남은 columns를 채우지 않고 남겨두는 반면
auto-fit은 같은 라인의 Grid Item을 배치하고 남은 공간을 같은 비율로 나눠가진다.

.grid-container {
	display: grid;
    /* 가로에 그리드 아이템이 200px이 들어갈 수 있는 만큼만 채움 */
	grid-template-columns: repeat(auto-fill, minmax(200px, auto));
    
    /* 가로에 그리드 아이템이 20%가 들어갈 수 있는 만큼만 채움 */
    /* 즉, 가로에 5개씩 들어가면서 크기는 동일한 비율로 나눠가짐 */
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

6. gap

row-gap, column-gap, gap이 존재한다.

7. grid-auto-columns과 grid-auto-rows

통제를 벗어난 Grid Track의 크기를 지정해주는 속성이다.

.grid-container {
	display: grid;
    /* 총 3개의 라인을 같은 크기로 배치함 */
    /* 3줄 초과일 경우 즉, 4번째 라인부터는 "통제를 벗어난"라인이 되고, 크기가 auto값이 된다. */
    grid-template-rows: repeat(3, 1fr);
    
    /* 주어진 모든 라인을 정해진 크기로 배치함 */
    grid-auto-rows: 300px;
    grid-auto-rows: 1fr;
    grid-auto-rows: minmax(100px, auto);
}

통제를 벗어난이란 grid-template-*을 적용하지 않은 그리드 아이템을 말한다.

8. grid-column와 grid-row

그리드 아이템이 차지할 영역을 지정하는 속성이다.

.grid-container {
	display: grid;
    grid-template-rows: repeat(3, 1fr);
}
.grid-item:nth-child(1) {
	/* 아래 3가지는 모두 동일하게 동작 */
	grid-column-start: 1;
	grid-column-end: 3;
    grid-row-start: 1;
	grid-row-end: 3;
    
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    
    /* 본래 위치에서 시작한다면 시작점 auto로 대체 가능 */
    grid-row: auto / span 2;
}

9. grid-auto-flow

Grid Item의 배치 순서나 빈칸을 채워넣을지를 지정한다.
row, column, dense, row dence, column dence가 존재한다.

10. *-items

Grid Item들의 배치를 정한다.
justify-items(가로방향), align-items(세로방향), place-items가 존재한다.

11. *-content

Grid Item들 전체를 한번에 배치한다.
justify-content(가로방향), align-content(세로방향), place-content가 존재한다.

12. *-self

Grid Item 각각을 각 공간에서의 배치를 지정한다.
justify-self, align-self, place-self가 존재한다.

0. 용어정리

• Grid Track: Grid의 rows와 column을 의미
• fr: 비율을 의미
• repeat(): 반복을 의미 => repeat(4, 1fr)
• minmax(): 최소, 최대값 지정 => minmax(100px, auto)

참고한 사이트

• 1분 코딩 - Grid