grid

grid

display: grid; (block) / inline-grid;

container와 item으로 구성

 

 

행과 열

grid-template-rows: 100px 100px;

grid-template-rows: repeat(2, 100px);

행 2개를 지정하고, 행 2개의 너비 설정 

 

 

grid-template-columns: 1fr 1fr;

grid-template-columns: repeat(2, 1fr);

fr: 비율을 의미 

전체 너비에서 차지하는 비율(2fr 1fr > 전체에서 2:1 ) 

 

grid-column: 1/4;

item에 작성하는 속성(firefox로 번호 확인) 

1~4까지 확장

 

grid-row: -1/ -3;

음수도 가능 - 우하단에 고정되는 부분이면 음수사용

 

.container {

    display: grid;

    
    /* 전체구조를 만들고 각 영역의 크기를 지정 */

    grid-template-rows: repeat(3, 100px);

    grid-template-columns: repeat(3, 1fr);



    /* 비우고 싶은 칸이 있으면 .을 사용 */

    grid-template-areas: 

    "header header header"

    "main . aside"

    "footer footer footer";

    

    /* 행과 열사이의 간격 */

    gap: 30px 15px;

    row-gap: 30px;

    column-gap: 15px;

}

.item {

    border: 5px dashed red;

}

.item:nth-child(1) {

    grid-area: header;

}

.item:nth-child(2) {

    grid-area: main;

}

.item:nth-child(3) {

    grid-area: aside;

}

.item:nth-child(4) {

    grid-area: footer;

}

 

grid-template-area : 이름을 지정하고 템플릿을 생성 

 

   *grid-auto-rows와 grid-auto-colums를 사용하여 암시적 행렬 크기 지정

명시적 행렬 : css상에 크기를 지정한 행렬

암시적 행렬 : 크기를 지정하지는 않았지만, css 조작과정에서 추가된 행렬

                 > container에 grid-auto-rows와 grid-auto-colums를 추가하면 크기가 지정됨

  

* 음수를 통한 위치조정은 명시적 크기지정이 있어야만 가능

 

/* row가 기본값으로 생략가능 */

grid-auto-flow: dense;

grid-auto-flow: column/row(흐르는 방향) dense(빈 곳 허용할꺼냐)

 

행렬 기준으로 빈 곳을 채울 거냐 말꺼냐

 

grid-template-rows: [first] 100px [second] 200px [third]

 

각 grid선에 이름을 지정할 수 있음(중요한 선이름 위주로 명시)

 

grid-area: 행 시작/ 열 시작 / 행 끝 / 열 끝 

grid-area: 1 / span 2 / 3 / -1

grid-area

 

*span이 끝에 있으면 + 개념으로 번호를 더해주고

        앞에 있으면 끝에서 - 개념으로 번호를 빼준다. ex) (span 2 / -1)  >(-3 / -1)

 

grid-template: 

    /* row 너비 */

    "header header header" 80px 

    "main .  aside" 350px

    "footer footer footer" 130px

	/* column너비 */
    
    / 2fr 100px 1fr;

    

grid-template(단축 속성) : grid-template-area / grid-template-rows,columns 

 

repeat(횟수, 크기)

minmax(크기)

fit-content(크기)

 

grid function

 

content의 띄어쓰기를 적용하고 싶으면

min-content를 적용하면 item의 크기가 조절됨

(반대는 max-content)

*한글은 min-content의 경우 한글자마다 줄바뀜이 발생함

(word-break: keep-all;을 추가)