TIL 50 | CSS GRID

CHAEIN·2021년 8월 22일
0

HTML/CSS

목록 보기
2/2

CSS GRID

이 글은 Heropy님의 블로그 css grid 완벽 가이드를 보며 공부한 study log입니다.

Css 그리드는 2차원(행과 열)의 레이아웃 시스템으로 flex box가 1차원의 레이아웃 구성에 최적화되어있다면 좀 더 복잡한 레이아웃에는 grid를 사용할 수 있다.

그리드 또한 flex와 같이 container와 item이라는 두가지 개념으로 구분되어 있다.

Grid Container Properties

속성의미
display그리드 컨테이너(Container)를 정의
grid-template-rows명시적 행(Track)의 크기를 정의
grid-template-columns명시적 열(Track)의 크기를 정의
grid-template-areas영역(Area) 이름을 참조해 템플릿 생성
grid-templategrid-template-xxx의 단축 속성
row-gap(grid-row-gap)행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap)열과 열 사이의 간격(Line)을 정의
gap(grid-gap)xxx-gap의 단축 속성
grid-auto-rows암시적인 행(Track)의 크기를 정의
grid-auto-columns암시적인 열(Track)의 크기를 정의
grid-auto-flow자동 배치 알고리즘 방식을 정의
gridgrid-template-xxx과 grid-auto-xxx의 단축 속성
align-content그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content그리드 콘텐츠를 수평(행 축) 정렬
place-contentalign-content와 justify-content의 단축 속성
align-items그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items그리드 아이템들을 수평(행 축) 정렬
place-itemsalign-items와 justify-items의 단축 속성

Grid Items Properties

속성의미
grid-row-start그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end그리드 아이템의 행 끝 위치 지정
grid-rowgrid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start그리드 아이템의 열 시작 위치 지정
grid-column-end그리드 아이템의 열 끝 위치 지정
grid-columngrid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self단일 그리드 아이템을 수직(열 축) 정렬
justify-self단일 그리드 아이템을 수평(행 축) 정렬
place-selfalign-self와 justify-self의 단축 속성
order그리드 아이템의 배치 순서를 지정
z-index그리드 아이템의 쌓이는 순서를 지정

(1) display

그리드를 사용하기 위해 컨테이너에 필수로 작성해야한다.

의미
gridBlock 특성의 Grid Container를 정의
iniline-gridInline 특성의 Grid Container를 정의

(2) grid-template-rows

컨테이너에 부여되는 속성으로 명시적 행의 크기를 정의한다. 동시에 라인의 이름도 정의할 수 있다. fr(fraction, 공간 비율)단위를 사용할 수 있다. repeat()함수를 사용할 수 있다.

(3) grid-template-columns

컨테이너에 부여되는 속성으로 명시적 열의 크기를 정의한다. 동시에 라인의 이름도 정의할 수 있다. fr(fraction, 공간 비율)단위를 사용할 수 있다. repeat()함수를 사용할 수 있다.

(4) grid-row / grid column

아이템에 부여되는 속성으로 그리드 선의 시작 위치와 끝 위치를 지정한다. '숫자'를 지정하거나 '선이름'을 지정하거나, span 키워드를 사용한다.

Basic 예제

Advanced(선에 이름 부여) 예제

(5) grid-template-areas

컨테이너에 부여되는 속성으로 지정된 그리드 영역 이름(grid-area)를 참조해 그리드 템플릿을 생성한다. gird area는 그리드 아이템에 적용하는 속성이다.

(6) row_gap / column_gap

컨테이너에 부여되는 속성을로 각각 행과 행사이의 간격(명확하게는 그리드 선의 크기), 열과 열사이의 간격을 지정한다. 기존엔 grid-라는 접두사가 붙었으나 더이상 사용되지 않는다. gap이라는 단축속성을 이용하면 gap: row_gap column_gap;로 사용할 수 있다.

(7) grid-auto-rows/grid-auto-columns

컨테이너에 부여되는 속성으로 암시적 행, 열의 크기를 정의한다. grid-template-rows로 정의한 명시적 행, 열 외부에 배치되는 경우 암시적 행, 열의 크기가 적용된다.

(8) grid-auto-flow

컨테이너에 부여되는 속성으로 배치하지 않은 아이템을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의한다.

의미기본값
row각 행 축을 따라 차례로 배치auto
column각 열 축을 따라 차례로 배치
row dense(dense)각 행 축을 따라 차례로 배치, 빈 영역 메움
column dense각 열 축을 따라 차례로 배치, 빈 영역 메움

(9) grid-area

아이템에 부여되는 속성으로 grid-rowgrid-column의 단축 속성이다. 또는 grid-template-areas가 참조할 영역 이름을 설정할 수도 있다. 영역 이름을 설정할 경우 grid-rowgrid-column개념은 무시된다.

.item{
  grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
  혹은
  grid-area: 영역이름;
}

(10) grid-template

컨테이너에 부여되는 속성으로 grid-template-rows, grid-template-column, 그리고 grid-template-areas의 단축 속성이다.

.container {
  grid-template: <grid-template-rows> / <grid-template-columns>;
  grid-template: <grid-template-areas>;
  grid-template:
    [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
    [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
    / <grid-template-columns>;
}

(11) grid

컨테이너에 부여되는 grid-template-xxxgrid-auto-xxx의 단축 속성

.container {
  grid: <grid-template-rows> / <grid-template-columns>;
}

.container {
  grid: 100px 200px / 1fr 2fr;
}

.container {
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr;
}
.container {
  grid: <grid-template>;
}

.container {
  grid:
    "header header header" 80px
    "main . aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}

.container {
  grid-template:
    "header header header" 80px
    "main . aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}
.container {
  grid: <grid-template-rows> / <grid-auto-flow><grid-auto-columns>;
}

.container {
  grid: 100px 100px / auto-flow 150px;
}

.container {
  grid-template-rows: 100px 100px;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
}
.container {
  grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}

.container {
  grid: auto-flow 150px / 100px 100px;
}

.container {
  grid-template-columns: 100px 100px;
  grid-auto-flow: row;
  grid-auto-columns: 150px;
}
.container {
  grid: auto-flow dense 150px / 100px 100px;
}

.container {
  grid-template-columns: 100px 100px;
  grid-auto-flow: row dense;
  grid-auto-columns: 150px;
}

(12) align-content

컨테이너에 부여되는 속성으로 그리드 콘텐츠를 수직 정렬한다. 콘텐츠의 세로 너비가 컨테이너보다 작아야한다.

의미기본값
normalstretch와 같습니다.normal
start시작점(위쪽) 정렬
center수직 가운데 정렬
end끝점(아래쪽) 정렬
space-around각 행 위아래에 여백을 고르게 정렬
space-between첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly모든 여백을 고르게 정렬
stretch열 축을 채우기 위해 그리드 콘텐츠를 늘림

(13) justify-content

컨테이너에 부여되는 속성으로 그리드 콘텐츠를 수평 정렬한다. 콘텐츠의 가로 너비가 컨테이너보다 작아야한다.

의미기본값
normalstretch와 같습니다.normal
start시작점(왼쪽) 정렬
center수평 가운데 정렬
end끝점(오른쪽) 정렬
space-around각 열 좌우에 여백을 고르게 정렬
space-between첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly모든 여백을 고르게 정렬
stretch행 축을 채우기 위해 그리드 콘텐츠를 늘림

(14) align-items

컨테이너에 부여되는 속성으로 그리드 아이템을 수직(열 축)으로 정렬한다. 아이템의 세로 너비가 자식이 속한 그리드 행의 크기보다 작아야한다.

의미기본값
normalstretch와 같습니다.normal
start시작점(위쪽) 정렬
center수직 가운데 정렬
end끝점(아래쪽) 정렬
stretch열 축을 채우기 위해 그리드 아이템을 늘림

(15) justify-items

컨테이너에 부여되는 속성으로 그리드 아이템을 수평(행 축)으로 정렬한다. 아이템의 가로 너비가 자식이 속한 그리드 행의 크기보다 작아야한다.

의미기본값
normalstretch와 같습니다.normal
start시작점(왼쪽) 정렬
center수평 가운데 정렬
end끝점(오른쪽) 정렬
stretch행 축을 채우기 위해 그리드 아이템을 늘림

(16) align-self

아이템에 부여되는 속성으로 그리드 아이템을 수직(열 축)으로 정렬한다. 아이템의 세로 너비가 자식이 속한 그리드 행의 크기보다 작아야한다.

의미기본값
normalstretch와 같습니다.normal
start시작점(위쪽) 정렬
center수직 가운데 정렬
end끝점(아래쪽) 정렬
stretch열 축을 채우기 위해 그리드 아이템을 늘림

(17) justify-self

아이템에 부여되는 속성으로 그리드 아이템을 수평(행 축)으로 정렬한다. 아이템의 가로 너비가 자식이 속한 그리드 열의 크기보다 작아야한다.

의미기본값
normalstretch와 같습니다.normal
start시작점(왼쪽) 정렬
center수평 가운데 정렬
end끝점(오른쪽) 정렬
stretch행 축을 채우기 위해 그리드 아이템을 늘림

(18) order

아이템에 부여되는 속성으로 아이템이 html작성 순서에 따라 자동 배치되는 순서를 변경할 수 있다. 숫자가 작을수록 앞서 배치된다. 음수도 사용 가능하다. 기본값은 0이다.

.item:nth-child(1) {
  order: 1;
}

(19) z_index

아이템에 부여되는 속성으로 아이템이 쌓이는 순서를 변경할 수 있다. 기본값은 0이다.

grid functions

(1) repeat

repeat 함수는 행/열 크기 정의를 반복한다. 반복되는 횟수와 행/열의 크기 정의를 인수로 사용한다. grid-template-rows와 grid-template-columns에서 사용한다.

.container {
  grid-template-columns: repeat(반복횟수, 열 크기);
}

(2) minmax

행/열의 최소/최대 크기를 정의한다. 첫번째 인수는 최솟값이고 두번째 인수는 최댓값이다. grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용한다. 일반 요소에 min-width나 max-width를 동시 지정하는 것과 유사하다.

.container {
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
  /*컨테이너의 크기가 각아이템의 너비를 더한것보다 작아지면 아이템들은 오버플로우하게 된다.*/
}

(3) fit-content

행/열 크기를 그리드 아이템이 포함하는 콘텐트 내용의 크기에 맞춘다. 내용의 최대 크기를 인수로 사용한다. minmax(auto, max-content)와 유사하게 동작하지만 같진 않다.

.container {
  grid-template-columns: fit-content(300px) fit-content(300px);
}

grid 단위

(1) fr

fr은 사용 가능한 공간에 대한 비율을 의미한다 다음의 예제는 3번째 컬럼이 100px, 네번째 컬럼이 25%를 차지하고 남은공간을 1/3, 2/3만큼 사용한다.

.container {
  grid-template-columns: 1fr 2fr 100px 25%;
}

(2) min-content / max-content

그리드 아이템이 포함하는 내용의 최소/최대 크기를 의미한다.

.container {
  grid-template-columns: min-content 1fr;
}

.container {
  grid-template-columns: max-content 1fr;
}

(3) auto-fill / auto-fit

행/열 개수를 컨테이너 및 행/열 크기에 맞게 자동으로 조정한다. repeat()함수와 같이 사용하며, 행/열과 아이템 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용하다(반응형 그리드) auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작한다. auto-fill과 auto-fit의 차이는 컨테이너가 모든 아이템을 수용하고 남는 공간이 있을 때 발생한다. auto-fill은 남는 공간을 그대로 유지하고 auto-fit은 축소한다.

.container {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

0개의 댓글