1. Grid

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

01. Grid

• CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공
• Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS rid를 사용할 수 있다
  -CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃을 대체 방식들을 해결하기 위해 만들어진 특변한 CSS 모듈이다
• CSS Grid의 효율적인 학습을 위해서 파이어폭스 브라우저를 사용해 테스트할 것을 추천 한다

-1. Grid Properties

• CSS grid는 CSS Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분
• Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있다

-2. Grid Container Properties

01. display

• 그리드 컨테이너(Container)를 정의
• 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의 된다
• 그리드를 사용하기 위해 컨테이너에 필수로 작성
• grid : Block 특성의 Grid Container를 정의
• inline-grid : Inline 특성의 Grid Container를 정의

.container{
	display : grid;
}

02. grid-template-rows

• 명시적 행(Track)의 크기를 정의
• 동시에 라인(Line)의 이름도 정의할 수 있다
• fr(fraction, 공간 비율)단위를 사용할 수 있다
• repeat(갯수, 단위) 함수를 사용할 수 있다

.container{
	display : grid;
	grid-template-rows : 1행크기, 2행크기, ...;
	grid-template-rows : [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}
// 각 행의 크기를 정의
.container {
	grid-template-rows : 100px 200px;
}
// 동시에 각 라인의 이름도 정의
.container {
	grid-template-rows : [first] 100px [second] 200px [third];
}
// 라인에 중복된 이름을 지정
.container {
	grid-template-rows : [row1-start] 100px [row1-end row2-start] 200px [row2-end];
}

• 각 라인은 행(Row, Track)과 열(Column, Track)의 개수대로 숫자(양수/음수) 라인 이름이 자동으로 지정
  • 꼭 필요한 경우가 아니면 라인 이름을 정의하지 말자

03. grid-template-columns

• 명시적 열(Track)의 크기를 정의
• 동시에 라인(Line)의 이름도 정의할 수 있다
• fr(fraction, 공간 비율)단위를 사용할 수 있다
• repeat(갯수, 단위) 함수를 사용할 수 있다

.container{
	display : grid;
	grid-template-columns : 1행크기, 2행크기, ...;
	grid-template-columns : [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}
// 각 행의 크기를 정의
.container {
	grid-template-columns : 100px 200px;
}
// 동시에 각 라인의 이름도 정의
.container {
	grid-template-columns : [first] 100px [second] 200px [third];
}
// 라인에 중복된 이름을 지정
.container {
	grid-template-columns : [col1-start] 100px [col1-end col2-start] 200px [col2-end];
}
// repeat() 함수는 2번째 인수를 반복하기 때문에 다음과 같이 활용
.container {
	grid-template-columns : repeat(4, 100px 200px 50px);
	// grid-template-columns : 100px 200px 50px 100px 200px 50px 100px 200px 50px 100px 200px 50px;
}
.container {
	grid-template-columns : repeat(4, 1fr 2fr 3fr);
	// grid-template-columns : 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr;
}

04. grid-template-areas

• 영역(Area) 이름을 참조해 템플릿 생성
• 지정된 그리드 영역 이름(grid-area)을 참고해 그리드 템플릿을 생성
• grid-area는 Grid Container가 아닌 Grid Item애 적용하는 속성

.container{
	display : grid;
	grid-template-rows : repeat(3, 100px);
	grid-template-columns : repeat(3, 1fr);
	grid-template-areas :
		"header header header"
		"main main aside"
		"footer footer footer";
}
header { grid-area : header; }
main { grid-area : main; }
aside { grid-area : aside; }
footer { grid-area : footer; }

• 비우고 싶으면 . 를 사용 한다

05. grid-template

• grid-template-rows, grid-template-columns 의 단축 속성
• grid-template-areas의 단축 속성

.container{
	grid-template : grid-template-rows / grid-template-columns;
	grid-template : grid-template-areas;
}
.container{
	grid-template :
		[1행시작선이름] "AREAS" 행너비 [1행끝선이름]
		[2행시작선이름] "AREAS" 행너비 [2행끝선이름]
		/ grid-template-columns;
}
.container{
	display : grid;
	grid-template : 
		"header header header" 80px
		"main main aside" 350px;
		"footer footer footer" 130px
		/ 2fr 100px 1fr;
}
header { grid-area : header; }
main { grid-area : main; }
aside { grid-area : aside; }
footer { grid-area : footer; }
.container{
	display : grid;
	grid-template-rows : 80px 350px 130px;
	grid-template-columns : 2fr 100px 1fr;
	grid-template-areas :
		"header header header"
		"main main aside"
		"footer footer footer";
}

06. row-gap(grid-row-gap)

• 행과 행 사이의 간격(Line)을 정의
• 각 행과 행 사이의 간격(Gutter)을 지정
  -더 명확하게는 그리드 선(Grid Line)의 크기를 지정한다고 표현

.container{
	row-gap : 크기;
}

07. column-gap(grid-column-gap)

• 열과 열 사이의 간격(Line)을 정의
• 각 열과 열 사이의 간격(Gutter)을 지정
• 더 명확하게는 그리드 선(Grid Line)의 크기를 지정한다고 표현

.container{
	column-gap : 크기;
}

08. gap(grid-gap)

• xxx-gap의 단축 속성
• 각 행과 행, 열과 열 사이의 간격(Gutter)을 지정

.container{
	gap : row-gap column-gap;
}

• grid-gap 주의 사항
• grid-gap(grid-row-gap, grid-column-gap)의 접두사 grid-는 더 이상 사용되지 않으며(Deprecated), gap(row-gap, column-gap)로 교체, 하지만 일부 버전의 브라우저 지원을 위해 grid- 접두사의 사용를 고려할 수 있다

09. grid-auto-rows

• 암시적인 행(Track)의 크기를 정의
• 아이템(Item)이 grid-template-rows로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
</div>
.container{
	width : 300px;
	height : 200px;
	display : grid;
	grid-template-rows : 100px 100px; // 명시적 2개 행 정의
	grid-template-columns : 150px 150px; // 명시적 2개 열 정의
	grid-auto-rows : 100px; // 그 외(암시적) 행의 크기 정의
}
.item:nth-child(3){
	grid-row : 3/4;
}

10. grid-auto-columns

• 암시적인 열(Track)의 크기를 정의
• 아이템(Item)이 grid-template-columns로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용

.container{
	width : 300px;
	height : 200px;
	display : grid;
	grid-template-rows : 100px 100px; // 명시적 2개 행 정의
	grid-template-columns : 150px 150px; // 명시적 2개 열 정의
	grid-auto-rows : 100px; // 그 외(암시적) 행의 크기 정의
	grid-auto-columns : 100px; // 그 외(암시적) 열의 크기 정의
}
.item:nth-child(3){
	grid-row : 3/4;
	grid-column : 3/4;
}

• 아이템이 배치되는 위치에 맞게 암시적 행과 열의 개수가 생성
  • 암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용 가능(음수 사용 불가)

11. grid-auto-flow

• 자동 배치 알고리즘 방식을 정의
• 배치하지 않은 아이템(Item)을 어떤 방식의 '자동배치 알고리즘'으로 처리할지 정의
  -배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미한다
• row : 각 행 축을 따라 차례로 배치 : default
• column : 각 열 축을 따라 차례로 배치
• row dense(dense) : 각 행 축을 따라 차례로 배치, 빈 영역 메움!
• column dense : 각 열 축을 따라 차례로 배치, 빈 영역 메움!

//For row & row dense
.container{
	display : grid;
	grid-template-rows : repeat(3, 1fr);
	grid-template-columns : repeat(3, 1fr);
	grid-auto-flow : row || row dense || dense;
}
.item:nth-child(2){
	grid-column : span 3;
}
-ex) //For column & column dense
.container{
	display : grid;
	grid-template-rows : repeat(3, 1fr);
	grid-template-columns : repeat(3, 1fr);
	grid-auto-flow : column || column dense || dense;
}
.item:nth-child(1){
	grid-column : 2/ span 2;
}
.item:nth-child(2){
	grid-column : span 2;
}

12. grid

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

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

• grid-auto-flow를 작성할 때는 auto-flow 키워드를 사용
  • /로 구분해 작성하는 위치가 곧 row, column 값을 의미
  • 따라서, row, column 값은 작성하지 마세요
  • dense 값은 auto-flow 뒤에 붙여 준다

.continer{
	grid : grid-template-rows / grid-auto-flow grid-auto-columns;
}
.continer{
	grid : 100px 100px / auto-flow 150px;
}
.continer{
	grid-template-rows : 100px 100px;
	grid-auto-flow : column;
	frid-auto-column : 150px;
}
.continer{
	grid : grid-auto-flow grid-template-rows / grid-auto-columns
}
.continer{
	grid : auto-flow 150px / 100px 100px
}
.continer{
	grid-template-rows : 100px 100px;
	grid-auto-flow : row;
	frid-auto-column : 150px;
}
.continer{
	grid : auto-flow dense 150px / 100px 100px
}
.continer{
	grid-template-rows : 100px 100px;
	grid-auto-flow : row dense;
	frid-auto-column : 150px;
}

13. align-content

• 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
• 그리드 콘텐츠의 세로 너비가 그리드 컨테이터(Container)보다 작아야 한다
• normal : stretch와 같다 : default
• start : 시작점(위쪽)정렬
• center : 수직 가운데 정렬
• end : 끝점(아래쪽) 정렬
• space-around : 각 행 위아래에 여백을 고르게 정렬
• space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬 되고 나머지 여백으로 고르게 정렬
• space-evenly : 모든 여백을 고르게 정렬
• strtch : 열축을 채우기 위해 그리드 콘텐츠를 늘림

14. jusify-content

• 그리드 콘텐츠를 수평(행 축) 정렬
• 그리드 콘텐츠의 가로 너비가 그리드 컨테이터(Container)보다 작아야 한다
• normal : stretch와 같다 : default
• start : 시작점(왼쪽)정렬
• center : 수직 가운데 정렬
• end : 끝점(오른쪽) 정렬
• space-around : 각 행 위아래에 여백을 고르게 정렬
• space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬 되고 나머지 여백으로 고르게 정렬
• space-evenly : 모든 여백을 고르게 정렬
• strtch : 열축을 채우기 위해 그리드 콘텐츠를 늘림

15. place-content

• align-content와 jusify-content의 단축 속성

-3. Grid Item Properties

01. grid-row-start

• 그리드 아이템(Item)의 행 시작 위치 지정

02. grid-row-end

• 그리드 아이템(Item)의 행 끝 위치 지정

03. grid-row

• grid-row-xxx의 단축 속성(행 시작/ 끝 위치)
• grid-row-start 과 grid-row-end의 단축 속성
• 각 속성을 / 로 구분

.item{
	grid-row : grid-row-start / grid-row-end;
}
.item{
	grid-row-start : 1;
	grid-row-end : 2;
}
.item{
	grid-row : 1 / 2;
}
.item{
	grid-row-start : 2;
	grid-row-end : span 3;
}
.item{
	grid-row-start : 2 / span 3;
}
.item{
	grid-row-start : 2 / 5;
}
.item{
	grid-row-start : span 3;
	grid-row-end : 4;
}
.item{
	grid-row-start : span3 / 4;
}
.item{
	grid-row-start : 1 / 4;
}

04. grid-column-start

• 그리드 아이템의 열 시작 위치 지정

05. grid-column-end

• 그리드 아이템의 열 끝 위치 지정

06. grid-column

• grid-column-xxx의 단축 속성(열 시작/ 끝 위치)
• 각 속성을 / 로 구분하는 것에 주의

.item{
	grid-column : grid-column-start / grid-column-end;
}

• 각 코드 블록 내 아이템(.item)들은 모두 같은 의미
• 음수 결과를 위해 span 키워드를 '시작 위치'에 작성함에 주의

07. grid-area

• 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
• grid-row-start, grid-column-start, grid-row-end, grid-column-end의 단축 속성
• grid-template-areas가 참조할 영역(Area) 이름을 설정 할 수 있다
• 영역 이름을 설정할 경우 grid-row & grid-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;
}

08. align-items

• 그리드 아이템(Items)들을 수직(열 축) 정렬
• 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 한다
• normal : stretch와 같다 : default
• start : 시작점(위쪽)정렬
• center : 수직 가운데 정렬
• end : 끝점(아래쪽) 정렬
  -stretch : 열 축을 채우기 위해 그리드 아이템을 늘림

09. align-self

• 단일 그리드 아이템을 수직(열 축) 정렬
• 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 한다
• normal : stretch와 같다 : default
• start : 시작점(위쪽)정렬
• center : 수직 가운데 정렬
• end : 끝점(아래쪽) 정렬
  -stretch : 열 축을 채우기 위해 그리드 아이템을 늘림

10. jusify-items

• 그리드 아이템(Items)들을 수평(행 축) 정렬
• 그리드 아이템의 가로너비가 자신이 속한 그리드 열(Track)의 크기보다 작아야 한다
• normal : stretch와 같다 : default
• start : 시작점(왼쪽)정렬
• center : 수직 가운데 정렬
• end : 끝점(오른쪽) 정렬
  -stretch : 열 축을 채우기 위해 그리드 아이템을 늘림

11. jusify-self

• 단일 그리드 아이템을 수평(행 축) 정렬
• 그리드 아이템의 가로너비가 자신이 속한 그리드 열(Track)의 크기보다 작아야 한다
• normal : stretch와 같다 : default
• start : 시작점(왼쪽)정렬
• center : 수직 가운데 정렬
• end : 끝점(오른쪽) 정렬
  -stretch : 열 축을 채우기 위해 그리드 아이템을 늘림

12. place-slef

• align-self와 jusify-self의 단축 속성

13. order

• 그리드 아이템의 배치 순서를 지정
• 숫자가 작을수록 앞서 배치
• default(0), 음수값 사용 가능

14. z-index

• 그리드 아이템의 쌓이는 순서를 지정
• 숫자가 높을 수록 위에 쌓임

-4. Grid Funtion

• 그리드에서 사용하는 주요 메소드

01. repeat

• repeat() 함수는 행/열(Track)의 크기정의를 반복
• '반복되는 횟수'와 '행/열의 크기 정의'를 인수로 사용
• grid-template-rows 와 grid-template-columns에서 사용

.container{
	grid-template-columns : 100px 100px 100x 100x .... 100px;
}
.container{
	grid-template-columns : repeat(9, 100px);
}

02. minmax

• mainmax() 함수는 행,열(Track)의 '최소/최대 크기'를 정의
• 첫번째 인수는 '최솟값'이고 두번째 인수는 '최댓값'
• grid-template-rows, grid-template-columns, grid-auto-rows 그리고 grid-auto-columns에서 사용
• 일반 요소 main-width와 max-width 속성을 동시 지정하는것과 유사

.container{
	grid-template-columns : minmax(100px, 1fr) minmax(200px, 1fr);
}

03. fit-content

• fit-content() 함수는 행/열(Track)의 크기를 그리드 아이템(Item)이 포함하는 내용(Contents) 크기에 맞춘다
• '내용의 최대 크기를 인수로 사용'
• minmax(auto, max-contnet)와 유사

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

-5. Grid Units

• 그리드에서 사용하는 주요 단위

01. fr

• fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미한다

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

02. min-content

• 그리드 아이템이 포함하는 내용(Contnets)의 최소 크기를 의미

<div class="continer">
	<div class="item">Hello Heropy</div>
</div>
.container{
	grid-template-columns : min-content 1fr;
}

03. max-content

• 그리드 아이템이 포함하는 내용(Contents)의 최대 크기를 의미

<div class="continer">
	<div class="item">Hello Heropy</div>
</div>
.container{
	grid-template-columns : max-content 1fr;
}

04. auto-fill, auto-fit

• 행/열(Track)의 개수를 그리드 컨테이터(Container) 및 행/열 크기에 맞게 자동으로(암시적) 조정
• repeat() 함수와 같이사용하며 행/열과 아이템(Item) 개수가 명호가할 필요가 없거나 명확하지 않은 경우 유용(반응형 그리드)
• auto-frill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작

.container{
	// 컨테이너의 크기가 아이템들을 수용하기 충분하지 않은 경우 아이템은 넘치기 시작(아이템 최소 크기가 120px)
	grid-template-columns : repeat(4, minmax(120px, 1fr));
}
.container{
	// 열의 갯수를 정하지는 않았지만 자동적으로 맞춰서 조정, auto-fit을 사용해도 됨
	grid-template-columns : repeat(auto-fill, minmax(120px, 1fr));
}

• 차이점
  • auto-fill 과 auto-fit은 차이점은 그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생
  • auto-fill은 남는 공간(빈 트랙)을 그대로 유지, auto-fit은 남는 공간을 축소