02-8⠀CSS 그리드 레이아웃 (css grid layout)

 

 

 

 

https://studiomeal.com/archives/533

https://heropy.blog/2019/08/17/css-grid/

1분 코딩 블로그, 헤로피님 블로그에서 참고를 많이 했씁니다 감사합니당.

 

 

 

 

 

 

 

 < CSS 그리드 레이아웃 css grid layout >

 

 

 

가로와 세로 중 하나를 주축으로 정하여 레이아웃을 만드는 1차원 형태의 flex layout

css grid layout 은 가로와 세로를 모두 사용하여 레이아웃을 만드는 2차원 형태

 

 

 

 

가로방향을 가리키는 줄 (row) 과 세로방향을 가리키는 칼럼 (column)

줄과 줄 사이, 칼럼과 칼럼 사이의 여백을 지정하여 원하는 형태의 레이아웃 구성 가능

 

그리드 컨테이너 (Grid container) : 그리드의 전체 영역이자 부모 요소

그리드 아이템 (Grid item) : 그리드 컨테이너의 자식 요소

그리드 트랙 (Grid track) : 그리드의 행 (row) 또는 열 (column)

그리드 셀 (Grid cell) : 그리드의 한칸

(div 같은 실제 html 태그 요소는 그리드 아이템, 이 아이템이 들어가는 가상의 칸이 그리드 셀)

그리드 라인 (Grid line) : 그리드 셀을 구분하는 선

그리드 번호 (Grid number) : 그리드 라인의 각 번호

그리드 갭 (Grid gap) : 그리드 셀 사이의 간격

그리드 영역 (Grid area) : 그리드 셀의 집합 (그리드 라인으로 둘러싸인 사각형 영역)

 

 

 

 

 

css grid box layout 의 속성은 두가지로 분류할 수 있음

- grid container 에 적용하는 속성

- grid item 에 적용하는 속성

 

 

 

 

 

< grid container > 에 적용하는 속성

 

 

그리드 아이템들을 묶은 부모요소 선택자 { display: 속성값; }

그리드 컨테이너를 지정

컨테이너의 속성을 지정하는 것이지 아이템의 속성을 지정하는 것이 아님

(그리드 아이템의 정렬 배치 등에는 직접적인 영향 x 뭔가 영향이 간다면 부모요소인 컨테이너에 부여된 속성에 따라 다 다름)

*속성값

display:grid;

그리드 컨테이너를 블록요소로 만듬 (그리드 아이템들은 인라인요소로 배치됨)

*이 display 속성은 직접적으로 그리드 아이템의 배치를 지정하는 속성이 아님

그리드 컨테이너의 배치를 지정하는 속성이며, 컨테이너와 컨테이너 사이의 관계를 지정하는 속성임

결과적으로 부모요소인 컨테이너를 블록요소로 만들다보니 자연스럽게 컨테이너안의 그리드 아이템들이 인라인요소처럼 배치되는 것임

아이템들은 자신이 가진 width 값만큼씩만 너비를 차지하고, 높이는 컨테이너의 height 값에 따라 맞춰 늘어나거나 줄어듬

display:inline-flex;

그리드 컨테이너를 인라인 요소로 만듬

* inline-flex 속성 또한 그리드 아이템의 배치 방식을 직접적으로 지정하는 것이 아님

그저 컨테이너와 컨테이너의 배치 방식을 지정하기 위해 존재하는 속성으로,

grid 속성과는 다르게 inline-grid 속성은 컨테이너 자체를 인라인 요소로 만들기때문에

자연스럽게 그리드 아이템들도 인라인요소처럼 배치됨

(그리드 아이템들이 인라인요소로 배치된 것 처럼 보이는 것이지, 그리드 아이템들이 실제로 인라인 요소인지는 모름

때문에 그리드 아이템들이 컨테이너 안에서 어떤식으로 배치되어야 하는지는 따로 직접 속성을 부여해야함)

 

 

 

 

부모요소 선택자 { grid-template-column/rows: 속성값; }

그리드 컨테이너의 그리드 트랙 (grid track) 의 크기와 개수를 지정

*속성값

width: 600px 일 시, grid-template-column: 200px 200px 200px

= grid-template-column: 1fr 1fr 1fr

= grid-template-column: repeat (3, 1fr)

= grid-template-column: 200px 1fr 1fr

= grid-template-column: 200px 200px auto

= 가로 너비가 200px 인 칼럼 3개를 만듬

 

*fr

숫자의 비율대로 트랙을 나누는 단위

1fr 2fr 3fr 이면 1:2:3 으로 나눔

px 같은 고정크기와 같이 사용할 수 있음

 

*repaet 함수

반복되는 값을 자동으로 처리하는 함수 repeat (반복횟수, 반복값) 

repeat (3, 1tr) 이면 1tr 씩 갖는 트랙이 5개 생성됨

 

*minmax 함수

너비나 높이값의 최소, 최대값을 지정하는 함수 minmax (최소, 최대)

지정한 row 의 높이값보다 내용이 많을 경우 내용이 넘침 -> minmax 함수로 해결

minmax (100px, auto) : 최소 200px, 최대는 자동으로 늘어남

 

* repeat 함수와 minmax 함수를 같이 쓸 수 있음

repeat (3, minmax(300px,auto)) 이면 최소 300px, 최대는 자동으로 늘어나는 트랙이 3개 생성됨

 

*auto-fill / auto-fit 속성

repeat (auto-fill/auto-fit, minmax값)

auto-fill : 최소 너비값으로만 반복되고 남는 공간은 그대로 남김

auto-fit : 남는 공간까지 채워서 너비가 자동으로 지정됨

https://heropy.blog/2019/08/17/css-grid/

 

 

 

 

 

부모요소 선택자 { grid-row/column-gap: 속성값; }

그리드 셀 사이의 여백을 지정

*속성값

px, em, rem 같은 단위 사용

grid-row-gap: 줄과 줄 사이의 여백 지정

grid-column-gap: 칼럼과 칼럼사이의 여백 지정

(= grid-gap : row값 column값)

*grid 를 빼고 row-gap / column-gap / gap 으로 축약해서 표기해도 됨

호환 버전을 넓히기 위해 grid 를 써야할 때도 있음

IE 에서는 gap 의 대체 속성이 없기 때문에 IE 를 호환해야한다면 애초에 gap 사용 x

 

 

 

 

부모요소 선택자 { grid-auto-rows/column: 속성값; }

통제가 벗어난 트랙의 크기와 개수를 자동으로 지정

grid-auto-rows: 행의 아이템 개수를 알 수 없을때 사용

grid-auto-column: 열의 아이템 개수를 알 수 없을때 사용

*속성값

px,em,rem 같은 단위 사용 (최소 최대값을 지정)

grid-auto 속성은 grid-temple 속성과 거의 항상 같이 쓰임

grid-temple-column: repeat (4, 100px)

grid-temple-rows: repeat (4, 100px) 일 때,

최소 100px 인 셀이 가로 4줄, 세로 4줄로 총 16개의 크기를 지정했음

만약 아이템이 지정한 범위를 벗어나 더 많이 생성되었을 때 나머지 아이템들은 100px 이 아님

이런식으로 트랙이 유동적이어서 얼마나 값을 지정해줘야할 지 모를 때,

통제를 벗어날 때 grid-auto-rows/column 속성을 grid-temple-rows/column 속성과 함께 사용해줘야함

 

 

 

 

부모요소 선택자 { grid-row/column-start/end: 속성값; }

그리드 컨테이너 안의 각 셀의 영역을 지정

 

그리드 컨테이너의 그리드 라인 번호를 이용하여 row 와 column 의 영역을 지정하면 됨

 

*속성값

 

red 컬러의 두 칸

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 1;

grid-row-end: 2;

=

grid-column: 1/3; (start 와 end 의 축약형)

grid-row: 1/2; (start 와 end 의 축약형)

=

grid-column: 1/span2; (1번라인에서 두칸)

grid-row: 1/2;

 

green 컬러의 두칸

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 2;

grid-row-end: 4;

=

grid-column: 3/4; (start 와 end 의 축약형)

grid-row: 2/4; (start 와 end 의 축약형)

=

grid-column: 3/4;

grid-row: 2/span2; (2번라인에서 두칸)

 

 

 

 

부모요소 선택자 { grid-temple-areas: 속성값; }

그리드 셀에 이름을 붙여 영역을 지정

 

보이는대로 영역을 지정하면 됨 가장 직관적인 방법

 

*속성값

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

위 코드와 같이 보이는대로 영역 이름을 부여하여 지정하면 됨

(셀 구분은 공백, 빈칸은 마침표 또는 "none" 사용)

 

header, main, a 등 영역 이름은 각 그리드 아이템에 {grid-area: 이름;} 으로 이름과 영역을 매칭해주면됨

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }

 

 

 

 

 

부모요소 선택자 { grid-auto-flow: 속성값; }

그리드 아이템이 자동 배치되는 방식을 지정

*속성값

grid-auto-flow: row (기본값)

각 행을 따라 차례대로 배치

grid-auto-flow: column

각 열을 따라 차례대로 배치

grid-auto-flow: dense

걍 싹다 빈틈없이 채움

grid-auto-flow: row dense

각 행을 따라 차례대로 배치, 빈틈없게 메움 (가로)

grid-auto-flow: column dense

각 열을 따라 차례대로 배치, 빈틈없게 메움 (세로)

 

 

 

 

 

 

부모요소 선택자 { align-items: 속성값; }

그리드 아이템들을 세로로 정렬하는 방식을 지정

*컨테이너에 속성 부여

*속성값

stretch (=normal, 기본값) : 열 축을 채우기 위해 아이템을 세로로 늘림

start : 시작점에 정렬 (위쪽)

center : 수직 가운데에 정렬 (세로 가운데)

end : 끝점에 정렬 (아래쪽)

*place-items: 수직속성값 수평속성값; 으로 축약 가능

 

 

 

 

 

 

부모요소 선택자 { justify-items: 속성값; }

그리드 아이템들을 가로로 정렬하는 방식을 지정

*컨테이너에 속성 부여

*속성값

stretch (=normal, 기본값) : 행 축을 채우기 위해 아이템을 가로로 늘림

start : 시작점에 정렬 (왼쪽)

center : 수평 가운데에 정렬 (가로 가운데)

end : 끝점에 정렬 (오른쪽)

*place-items: 수직속성값 수평속성값; 으로 축약 가능

 

 

 

 

부모요소 선택자 { align-content: 속성값; )

그리드 아이템을 묶어 통째로 세로로 정렬하는 방식을 지정

*Grid 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 사용

*컨테이너에 속성 부여

*속성값

stretch (=normal, 기본값) : 열 축을 채우기 위해 아이템을 세로로 늘림

start : 시작점에 정렬 (위쪽)

center : 수직 가운데에 정렬 (세로 가운데)

end : 끝점에 정렬 (아래쪽)

space-around : 각 행의 여백을 위아래로 고르게 나누어 배치

space-between : 첫 행을 시작점에, 끝 행을 끝점에 놓고 나머지 고르게 나누어 배치

space-evenly : 모든 여백을 고르게 나누어 배치

*place-content: 수직속성값 수평속성값; 으로 축약 가능

 

 

 

 

 

 

 

부모요소 선택자 { justify-content: 속성값; )

그리드 아이템을 묶어 통째로 가로로 정렬하는 방식을 지정

*Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이너의 너비보다 작을 때 사용

*컨테이너에 속성 부여

*속성값

stretch (=normal, 기본값) : 행 축을 채우기 위해 아이템을 세로로 늘림

start : 시작점에 정렬 (왼쪽)

center : 수직 가운데에 정렬 (가로 가운데)

end : 끝점에 정렬 (왼쪽)

space-around : 각 열의 여백을 좌우로 고르게 나누어 배치

space-between : 첫 열을 시작점에, 끝 열을 끝점에 놓고 나머지 고르게 나누어 배치

space-evenly : 모든 여백을 고르게 나누어 배치

*place-content: 수직속성값 수평속성값; 으로 축약 가능

 

 

 

 

 

 

< grid item > 에 적용하는 속성

 

 

부모요소 선택자 { align-self: 속성값; }

지정된 해당 아이템을 세로로 정렬하는 방식을 지정

*속성값

stretch (=normal, 기본값) : 열 축을 채우기 위해 아이템을 세로로 늘림

start : 시작점에 정렬 (위쪽)

center : 수직 가운데에 정렬 (세로 가운데)

end : 끝점에 정렬 (아래쪽)

*place-self: 수직속성값 수평속성값; 으로 축약 가능

 

 

 

 

 

부모요소 선택자 { justify-self: 속성값; }

지정된 그리드 아이템을 가로로 정렬하는 방식을 지정

*속성값

stretch (=normal, 기본값) : 행 축을 채우기 위해 아이템을 세로로 늘림

start : 시작점에 정렬 (왼쪽)

center : 수직 가운데에 정렬 (가로 가운데)

end : 끝점에 정렬 (오른쪽)

*place-self: 수직속성값 수평속성값; 으로 축약 가능

 

 

 

 

 

 

부모요소 선택자 { order: 숫자; }

그리드 아이템의 시각적 나열 순서를 결정

*속성값

작은 숫자일 수록 먼저 배치, 큰 숫자일 수록 나중에 배치, 음수 가능

*시작적 순서일 뿐, html 자체의 구조를 바꾸는 것이 아님

 

 

 

 

부모요소 선택자 { z-index: 숫자; }

그리드 아이템의 Z축 정렬 순서을 지정

*속성값

숫자가 높을수록 앞에 배치 (기본값은 z-index:0 이므로 1로만 높여도 다른 요소보다 위로 올라옴)