CSS grid

2021-12-14

HTML & CSS / CSS

격자를 이용하여 내용의 크기와 위치를 제어하는 방법.
두개의 축을 이용.
셀병합 기능 제공
짧은 코드로 자유도 높은 배치 구현

grid: 트랙의 수와 크기, 컨테이너에 적용.

grid-template
grid-template-row(행 트랙의 수량과 크기)
grid-template-columns(열 트랙의 수량과 크기)
grid-template-areas(셀이름 명시)
grid-auto-flow(흐름의 방향과 밀집)
grid-auto-rows(암시적 행 트랙의 크기)
grid-auto-columns(암시적 열 트랙의 크기)

grid-area: 아이템의 배치와 병합, 아이템에 적용.

grid-row
grid-row-start (행시작)
grid-row-end (행끝)
grid-column
grid-column-start (열시작)
grid-column-end (열끝)

Grid 용어

grid container
grid item
grid line
grid track
grid cell, grid area
gap

명시적 그리드

트랙의 크기와 수량을 분명하게 선언한 그리드 grid-template-rows/columns/areas 속성으로 제어.

암시적 그리드

명시적 그리드 외부에 배치되어 grid-auto-flow/rows/columns 속성으로 흐름 방향과 크기를 결정하는 그리드.

grid track 생성

균등

.container {
    display: grid;
    grid: '. . .';
}

그리드 컨테이너와 3열 익명 트랙 단축 문법. 마침표(.)와 공백( ) 구분자로 익명셀을 생성. 셀 크기는 내용에 따라 자동. 트랙의 크기를 제어하지 않기 때문에 실무에서 유용하지 않음.

제어

.container {
    display: grid;
    grid: 80px 1fr / 120px 1fr;
}

2열 2행 트랙 단축 문법. 트랙의 크기와 수량을 명시적으로 제어. 실무에서 가장 빈번하게 사용하는 패턴. 명시적으로 선언하지 않는 나머지 트랙은 자동.

반복

.container {
display: grid;
grid: auto / 40px 1fr 2fr 1fr 2fr;
grid: auto / 40px repeat (2, 1fr 2fr);

auto 값으로 트랙의 크기 임의 지정 가능. repeat()함수로 크기 값을 반복할 수 있다. 함수의 첫번째 인자는 트랙의 수량, 두번째 인자는 트랙의 크기.

방향

.container {
    display: grid;
    grid: 1fr 2fr / auto-flow; // 아래
    grid: auto-flow / 1fr 2fr; //오른쪽
}

배치 방향 설정.
auto-flow 값은 grid 단축 속성에서만 사용하는 값의 형태로 grid-auto-flow 속성값의 다른 표기법.
슬래시와 함께 교차축 grid-template-rows/columns 값의 명시가 필수.
배치 방향 설정.

Grid item

배치

.container {
        display: grid;
        grid: auto / 40px repeat (2, 1fr 2fr);
}
.item1 {grid-area: 2(로우)/3(컬럼);}

행 배치 시점 / 열 배치 시점 / 행 배치 종점/ 열배치 종점 값을 선언하여 아이템의 배치 위치를 결정할 수 있다.
값은 시계 반대 방향으로 순환하고 슬래시(/) 구분자로 분리한다.
생략한 값은 auto와 같다.

배치/병합

.container {
    display: grid;
    grid: auto / 40px repeat (2, 1fr 2fr);
}
.item1 {grid-area: 2/2/span3(아래로 병합)/span2(우측으로 병합)
}

Grid item 정렬

트랙

.container {
    display:: grid;
    grid: auto / repeat(3, auto);
    place-content: end center;
}

트랙의 크기가 auto인 상태로 컨테이너를 가득 채우지 않는다면 트랙의 위치를 정렬할 수 있다.

아이템 복수

.container {
    display: grid;
    grid: auto / repeat(3, 1fr);
    place-cntent: end center;
    }

셀(복수)의 위치를 정렬할 수 있다.

아이템 단수

.container {
    display: grid;
    grid: auto / repeat(3, 1fr);
}
.item1 {
    place-self: end center;
}

셀(단수)의 위치를 정렬할 수 있다.

Grid dense

1 2	grid: auto-flow:auto-flow/repeat(3, 1fr); grid: auto-flow desne / repeat/3(1fr);

채우지 못한 빈 영역이 있으면 흐름 방향을 거슬러 올라 트랙을 채운다(두번째)

Grid-auto-fill/fit

트랙을 채우지 못한 상황에서 트랙의 최대 크기가 auto이면 auto-fill(안으로) 또는 auto-fit(밖으로) 방식으로 트랙의 크기와 수량을 자동으로 결정한다.

https://naradesign.github.io/css-grid-layout.html

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님