[FrontEnd] 12. Grid

Grid

레이아웃을 만드는 property

- Flex는 1차원 레이아웃 (가로 아니면 세로)

- Grid는 2차원 레이아웃 (가로와 세로)

- Flex 보다 복잡한 레이아웃을 간편하게 만들 수 있다.

 

 

그리드 형태 정의1 (pixel)

 

 

 

.container {

    display: grid;

    grid-template-columns: 200px 200px 500px;
    grid-template-rows: 200px 200px 500px;

}

 

 

 

그리드 형태 정의2 (비율, fraction)

  

 

 

.container {

    height: 500px;

    display: grid;

    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: 1fr 1fr 2fr;

}

 

 

 

그리드형태 정의3(pixel + fraction)

 

.container {

    height: 500px;

    width: 500px;

    display: grid;

    grid-template-columns: 1fr 1fr 300px;

    grid-template-rows: 1fr 1fr 300px;

}

 

 

 

그리드형태 정의4(최소/최대크기 설정, minmax)

 

.container {

    height: 500px;

    width: 500px;

    display: grid;

    grid-template-columns: 1fr 1fr 300px;

    grid-template-rows: 1fr 1fr       minmax(100px, auto);

}

 

 

 

간격만들기

 

.container {

    height: 500px;

    display: grid;

    grid-template-columns: 1fr 1fr 300px;

    grid-template-rows: 1fr 1fr minmax(100px, auto);

    row-gap: 10px; /* row의 간격을 10px로 */

    column-gap: 20px; /* column의 간격을 20px로 */

 

 

 

---

 

Grid Item

Grid Item : 칸과 칸을 합칠 수 있음 = 아이템의 영역 지정

 

1. 범위 지정하는 방법

.grid > div:nth-child(2){
    grid-column-start:2;
    grid-column-end:4; 

    grid-row-start:1;
    grid-row-end:2;
    
    /* -1 : '끝까지' 라는 의미  */
    grid-row: 2 / -1;
}

1.1 범위지정을 더 간편하게

.grid > div:nth-child(2){
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

 

2. span 사용방법 - 2번부터 시작해서 span을 1칸만큼 해라

.grid > div:nth-child(4){
    grid-column: 2 / span 1;
    grid-row: 2 / span 2;
}

 

 

 

* 표 사이사이에 margin처럼 일정한 공간을 만들고싶다면, gap을 사용하면 된다(아래사진에서 빗금쳐진 부분)

.grid{
    display: grid;
    width: 50rem;
    height: 50rem;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: 1fr 1fr 2fr;
    gap: 1rem;
}