[패스트캠퍼스 수강후기] 프론트엔드 강의 16회차 미션

오늘은  grid에 대해서 수강했다

20. CSS / 속성 - Grid

 

*

CSS grid는 2차원의 레이아웃 시스템 제공 / Flexible box는 1차원적

파이어폭스 브라우저 추천

플렉스와 마찬가지로 컨테이너와 아이템 두가지 개념 있음

 

*

Display : grid container를 정의

자식요소들은 자동으로 grid item으로 정의

Grid : Block 특성의 Grid Container를 정의

Inline-grid : Inline 특성의 Grid Container를 정의

(예시)

.container {

  display: grid;

}

 

*

grid-template-rows

행(Track)의 크기를 정의

라인(Line)의 이름도 정의

fr(fraction, 공간 비율) 단위, repeat() 함수 사용

(예시)

container {

  display: grid;

  grid-template-rows: 1행크기 2행크기 ...;

  grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;

}

grid-templete-row

*

grid-template-columns

열(Track)의 크기를 정의

라인(Line)의 이름도 정의

fr(fraction, 공간 비율) 단위, repeat() 함수 사용

 

*

grid-row : grid-row-start과 grid-row-end의 단축 속성

.item {

  grid-row: <grid-row-start> / <grid-row-end>;

}

*

grid-column : grid-column-start과 grid-column-end의 단축 속성

음수 결과를 위해 span 키워드를 ‘시작 위치’에 작성

.item {

grid-column: span 2 / -1;

}

1 / 3 이란

*

grid-template-areas

지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성

grid-area는 Container가 아닌 Item에 적용하는 속성

 

*

row-gap(grid-row-gap)

각 행과 행 사이의 간격 지정

그리드 선의 크기를 지정

(예시)

.container {

  row-gap: 크기;

}

 

*

column-gap(grid-column-gap)

각 열과 열 사이의 간격 지정

(예시)

.container {

  column-gap: 크기;

}

 

*

grid-gap(grid-row-gap, grid-column-gap)의 grid-는 더 이상 사용되지 않음

gap(row-gap, column-gap)로 교체

하지만 일부 버전은 아직 사용고려

 

*

grid-auto-rows

암시적 행의 크기 정의

아이템이 grid-template-rows로 정의한 명시적 행 외부에 배치되는 경우 암시적 행 크기 적용

 

 

*

grid-auto-columns

암시적 열의 크기 정의

아이템이 grid-template-columns로 정의한 명시적 열 외부에 배치되는 경우 암시적 열 크기 적용

 

*

grid-auto-flow

배치하지 않은 아이템을 어떤 방식의 자동알고리즘으로 처리할지 정의

배치한 아이템은 grid-area를 사용한 아이템을 의미

Row : 각 행 축을 따라 차례로 배치, 기본값

Column : 각 열 축을 따라 차례로 배치

Row dense(dense) : 각 행 축을 따라 차례로 배치, 빈 영역 메꿈

Column dense : 각 열 축을 따라 차례로 배치, 빈 영역 메꿈

 

*

grid-area

grid-row-start, grid-column-start, grid-row-end, grid-column-end의 단축 속성

혹은 grid-template-areas가 참조할 영역 이름을 설정, 그 경우 grid-row와 column 개념 무시됨

(예시)

.item {

  grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;

  grid-area: 영역이름;

}

.item {

  grid-row: 2 / 3;

  grid-column: span 2 / -1;

}

.item {

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

}

 

*

grid

grid-template-xxx과 grid-auto-xxx의 단축 속성

(예시)

.container {

  grid: <grid-template>;

  grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;

  grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

}

 

*

grid-auto-flow를 작성할 때는 auto-flow 사용

/로 구분해 작성하는 위치가 곧 row, column 의미

따라서, row, column 작성하지 않고 dense 값은 auto-flow 뒤에

/ = column

 

*

align-content : 그리드 콘텐츠를 수직 정렬

그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야

Normal : =stretch, 기본값

Start : 시작점(위쪽) 정렬

Center : 수직 가운데 정렬

End : 끝점(아래쪽) 정렬

Space-around : 각 행 위아래에 여백을 고르게 정렬

Space-between : 첫 행은 시작점, 끝 행은 끝점 정렬되고 나머지 여백으로 고르게 정렬

Space-evenly : 모든 여백을 고르게 정렬

Stretch : 열 축을 채우기 위해 그리드 콘텐츠를 늘림

 

*

justify-content : 그리드 콘텐츠를 수평 정렬

그리드 콘텐츠의 세로 너비가 그리드 컨테이너보다 작아야

Normal : =stretch, 기본값

Start : 시작점(위쪽) 정렬

Center : 수직 가운데 정렬

End : 끝점(아래쪽) 정렬

Space-around : 각 행 위아래에 여백을 고르게 정렬

Space-between : 첫 행은 시작점, 끝 행은 끝점 정렬되고 나머지 여백으로 고르게 정렬

Space-evenly : 모든 여백을 고르게 정렬

Stretch : 행 축을 채우기 위해 그리드 콘텐츠를 늘림

 

*

align-items

그리드 아이템들을 수직 정렬

그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야

Normal : =stretch

Start : 시작점(위쪽) 정렬

 

Center : 수직 가운데 정렬

End : 끝점(아래쪽) 정렬

Stretch : 열 축을 채우기 위해 그리드 아이템을 늘림

 

*

justify-items

그리드 아이템들을 수평 정렬

그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야

Normal : = stretch, 기본값

start : 시작점(왼쪽) 정렬

Center : 수평 가운데 정렬

End : 끝점(오른쪽) 정렬

Stretch : 행 축을 채우기 위해 그리드 아이템을 늘림

 

 

*

align-self : 단일 그리드 아이템을 수직 정렬

그리드 아이템의 세로 너비가 자신이 속한 그리드 행의 크기보다 작아야

 

*

justify-self : 단일 그리드 아이템을 수평 정렬

그리드 아이템의 가로 너비가 자신이 속한 그리드 열의 크기보다 작아야

 

*

Order : 그리드 아이템이 자동 배치되는 순서를 변경

숫자가 작을수록 앞에 배치

 

*

z-index : 아이템이 쌓이는 순서 변경

(예시)

.item:nth-child(1) {

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

}

.item:nth-child(2) {

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

  z-index: 1;   ==è 얘가 제일 위에

}

.item:nth-child(3) {

  grid-area: 2 / 2 / 3 / 4;

}

 

*

Repeat : 행/열의 크기 정의를 반복, ‘반복되는 횟수’와 ‘행/열의 크기 정의’를 인수로 사용

grid-template-rows와 grid-template-columns에서 사용

 

*

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);

}

암시적 ‘행/열’의 크기를 auto를 통해 그리드 아이템의 크기에 따라 확장될 수 있음

 

*

fit-content : 행/열의 크기를 그리드 아이템이 포함하는 내용 크기에 맞춤

‘내용의 최대 크기’를 인수로 사용

minmax(auto, max-content)와 유사

 

*

Fr(fractional unit) : 사용 가능한 공간에 대한 비율

(예시)

.container {

  grid-template-columns: 1fr 2fr 100px 25%;

}

컨테이너의 3번째 컬럼에 100px, 4번째 컬럼에 25% 사용하고

남은 공간을 1번째 컬럼에 1/3, 2번째 컬럼에 2/3 만큼 사용

 

*

min-content

그리드 아이템이 포함하는 내용의 최소 크기

 

*

max-content

그리드 아이템이 포함하는 내용의 최대 크기

 

*

auto-fill, auto-fit

행/열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정

행/열과 아이템 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용

차이점은 그리드 컨테이너가 하나의 행/열에 모든 아이템을 수용하고 남는 공간이 있을 때

auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소

 

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스