[CSS] Grid 정리

작성일 | In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.container {
    /* 3개의 행을 각각 100px로 만들겠다 */
    grid-template-rows: repeat(3, 100px); 
    /* 3개의 열을 각각 3등분해서 만들겠다(flex-grow:1과 같음) */
    grid-template-columns: repeat(3, 1fr); 
    /* 명시적으로 정의한 행과 열을 넘어갔을 때(암시적) 어떻게 배치할지*/
    grid-auto-flow: row;

    /* 그리드 컨텐츠의 수직 정렬을 설정*/
    align-content: center; /* row를 어떻게 정렬할지 */
    align-items: center;   /* 하나의 row안에서 어떻게 정렬할지 */
    /* 그리드 컨텐츠의 수평 정렬을 설정*/
    justify-content: center; /* column을 어떻게 정렬할지 */
    justify-items: center;   /* 하나의 column안에서 어떻게 정렬할지 */
    /* align-content와 justify-content에 동시적용됨 */
    place-content: center;


}


.item:nth-child(1) {
    /* CSS의 index는 0이 아닌 1부터 시작한다 */
    grid-row-start: 1;
    grid-row-end: 3;

    grid-column-start: 2;
    grid-column-end: 4;

    /* 끝나는 위치가 4이고, 길이를 2로 지정. 즉, 2~4까지를 너비로 가짐 */
    grid-column-start: span 2;
    grid-column-end: 4;
}

Reference: https://heropy.blog/2019/08/17/css-grid/