CSS - Grid

용어정리

그리드 컨테이너 ( Grid Container ) : display: grid를 정용하는 Grid의 전체영역

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

그리드 트랙 ( Grid Track ) : Grid의 행 또는 열

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

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

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

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

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

 

컨테이너에 적용하는 속성

display: grid

.container {
	display: grid;
    /* display: inline-grid; */
}

inline-grid : block과 inline-block의 관계

 

그리드 형태 정의 grid-template-rows / grid-template-columns

: 컨테이너에 Grid 트랙의 크기들을 지정하는 속성

.container {
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */
}

grid-template-rows는 행 배치

grid-template-columns는 열 배치

 

* fr : fraction - 숫자 비율대로 트랙의 크기를 나눈다.

 

repeat 함수

.container {
	grid-template-columns: repeat(5, 1fr);
    /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

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

 

 

minmax 함수

: 최솟값과 최댓값을 지정할 수 있는 함수

minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게 

 

 

auto-fill과 auto-fit

column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto);
}

auto-fill : 셀의 개수가 모자르면 공간이 남음

auto-fit : 셀의 개수가 모자르면 공간을 채움

 

간격 만들기 row-gap / column-gap / gap

: 그리드 셀 사이의 간격을 설정합니다.

.container {
	row-gap: 10px;
	/* row의 간격을 10px로 */
	column-gap: 20px;
	/* column의 간격을 20px로 */
}

.container { 
	gap: 10px 20px;
    /* row-gap: 10px; column-gap: 20px; */
}

 

그리드 형태를 자동으로 정의 grid-auto-columns / grid-auto-rows

: grid-template-columns의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성

.container {
	grid-template-rows: repeat(3, minmax(100px, auto));
}
========================================
.container {
	grid-auto-rows: minmax(100px, auto);
}

-> grid-auto-rows를 써주면, 굳이 횟수를 지정해서 반복할 필요없이 "알아서" 처리

 

---

아이템에 적용하는 속성

각 셀의 영역 지정

grid-column(row)-start(end) / grid-column(row)

: 각 셀의 영역을 지정

.item:nth-child(1) {
	grid-column: 1/3;
	/*
		grid-column-start: 1;
		grid-column-end: 3;
	*/
    
	grid-row: 1/2;
	/*
		grid-row-start: 1;
		gird-row-end: 2;
	*/
}

-> 시작번호 / 끝번호를 지정하는 방법

.item:nth-child(1) {
	/* 1번 라인에서 2칸 */
	grid-column: 1 / span2;
    
	/* 1번 라인에서 3칸 */
	grid-row: 1 / span3;
}

-> 몇 개의 셀을 차지하게 할 것인지

 

영역이름으로 그리드 정의 grid-template-areas

:  각 영역에 이름을 붙이고, 그 이름을 이용해서 배치 / 직관적인 방법

.container {
	grid-template-areas:
		"header header header"
		"  a	 main    b   "
		"  .	  .      .   "
		"footer footer footer"
 }
 
 /* 빈칸은 마침표 또는 "none"을 사용 */

해당 아이템 요소에 grid-area 속성으로 이름을 지정

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

/* 이름 값에 따음표가 없는 것에 주의 */

 

자동 배치 grid-auto-flow

아이템이 자동 배치되는 흐름을 결정하는 속성

.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(25%, auto));
	grid-template-rows: repeat(5, minmax(50px,auto));
	grid-auto-flow: dense;
 }
 
 ......

dense : 기본적으로 빈 셀을 채우는 알고리즘

---

세로 방향 정렬 align-items

: 아이템들을 세로 방향으로 정렬 / 컨테이너 적용

.container {
	align-items: stretch;
	/* align-items: start; */
	/* align-items: center; */
	/* align-items: end; */
}

 

가로 방향 정렬 justify-items 

: 아이템들을 가로 방향으로 정렬 / 컨테이너 적용

.container {
	justify-items: stretch;
	/* justify-items: start; */
	/* justify-items: center; */
	/* justify-items: end; */
}

 

place-items

: align-items와 justify-items를 같이 쓸 수 있는 단축 속성

.container {
	place-items: center start;
}

 

아이템 그룹 세로 정렬 align-content

: Grid 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 Grid아이템들을 통째로 정렬

.container {
	align-content: stretch;
	/* align-content: start; */
	/* align-content: center; */
	/* align-content: end; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

 

아이템 그룹 가로 정렬 justify-content

: Grid 아이템들의 너비를 모두 합한 값이 Grid컨테이너의 너비보다 작을 때 Grid 아이템들을 통째로 정렬

.container {
	justify-content: stretch;
	/* justify-content: start; */
	/* justify-content: center; */
	/* justify-content: end; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

 

place-content

: align-content와 justify-content를 같이 쓸 수 있는 단축 속성 / align-content, justify-content 순서로 작성

.container {
	place-content: space-between center;
}

 

개별 아이템 세로 정렬 align-self

: 해당 아이템을 세로방향으로 정렬 / 아이템 적용

.item {
	align-self: stretch;
	/* align-self: start; */
	/* align-self: center; */
	/* align-self: end; */
}

 

개별 아이템 가로 정렬 justify-self

: 해당 아이템을 가로방향으로 정렬 / 아이템 적용

.item {
	justify-self: stretch;
	/* justify-self: start; */
	/* justify-self: center; */
	/* justify-self: end; */
}

 

place-self

: align-self와 justify-self를 같이 쓸 수 있는 속성

.item {
	place-self: start center;
}

 

배치순서 order

: 각 아이템들의 시각적 나열 순서를 결정하는 속성 / 작은 숫자일수록 먼저 배치 / "시각적 순서"

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

 

z-index

: z-index로 Z축 정렬을 할 수 있어요. 숫자가 클수록 위로 올라온다.

.item:nth-child(5) {
	z-index: 1;
	transform: scale(2);
}

/* z-index를 설정안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */

 

출처 : https://studiomeal.com/archives/533