#2. Grid

[2.2] CSS Grid Basic Concepts

• grid 관련된 것은 father요소에 사용
  1) grid-templete-columns, grid-templete-rows : grid의 너비를 조절
• grid-templete-columns : 가로 사이즈 변경
• grid-templete-rows : 세로 사이즈 변경
• 더이상 column이 없다면 다음 줄로 넘어감

.father {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 100px 50px 300px;
colum-gap: 10px;
row-gap: 10px;

• column-gap: (column 사이 공간 크기);
• row-gap: (row 사이 공간 크기);
• gap: 10px; ▷ column과 row 사이에 10px의 공간을 줘라.
• grid-template-rows: (각 row의 크기와 개수);

[2.3]Grid Template Areas
1) repeat 사용

• grid-template-columns, grid-template-rows에 repeat을 사용하면 편하다
• repeat(횟수, 사이즈)

.father {
	display: grid;
	grid-template-rows: 100px repeat(2, 200px) 100px;
}

2) 그리드에 지정해주기 : grid-template-areas / grid-area
.father {
grid-template-areas:
"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer";
}
.header {
background-color: #2ecc71;
grid-area: header;
}
3) grid가 적용 되지 않을 때 규칙

• grid 내부에 grid-area의 영역이 전부 이어져있는가 (쪼개져 있음 불가)
• grid 내부에 grid-area의 영역이 직사각형인가(ㄴ 혹은 ㄱ이면 안됨)

4) auto를 사용하면 최대한 크게 만들어준다
grid-template-columns: auto 200px;

[2.4] Rows and Columns
: grid-template-areas와 비슷한 기능을 하는 속성, 자식 grid에 명시한다.
1)grid-column-start
2)grid-column-end
3)grid-row-start
4)grid-row-end
해당 속성은 정수인 숫자가 들어가며, 1부터 column(row)의 최대갯수 + 1까지 사용 가능하다.(줄로 계산)
범위를 초과하게 되면 css가 망가져서 생각한 대로 동작하지 않게 되니 꼭 명심하자..
참고로 상대단위(%, auto)등은 안 먹히는 듯 하다.

.nav {
	grid-row-start: 2;
    grid-row-end:4;
}

[2.5] Shortcuts
1) grid-column : 시작 / 끝
grid-column-start: 1;
grid-column-end: 4;
=> grid-column: 1 / 4로 바꿔서 표현 할 수 있다
또, grid-column: 1 / -1하면 첫line부터 마지막 line까지 설정(맨 뒷줄부터 -1, -2... )
2) span 네모 수
span => span은 얼만큼의 공간을 차지하는지 보여줌
gird-column: span 2; => 2열의 공간을 차지함
grid-row: span 2; => 2행의 공간을 차지함
3) span 시작점 표시
grid-row: 2 / span 2;
but 시작line과 끝line을 표현하지 않음. 다른 요소와 관계를 봐야함

[2.6] Line Naming
grid-template-rows 및 grid-template-columns 속성으로 그리드를 정의할 때 그리드의 일부 또는 모든 라인에 이름을 지정할 수 있습니다.

.father {
display: grid;
grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}

.main {
grid-column-start: main-start;
grid-row-start: main-start;
grid-row-end: main-end;
}

[2.7] Grid Template

1) fr(fraction): 사용가능한 공간
grid-template-columns: repeat(4, 1fr);
:grid에서 공간을 가질 수 있는 만큼 가지고, 4번 반복
=>컴퓨터에서 100px은 크지 않지만, 모바일에서는 매우 큼(반응형 % or fr) , 화면의 크기가 변해도 비율은 같음
결국 요소별 비율로 계산!
grid의 height가 설정되어 있어야 함(공간이 있어야 함)
height: 50vh(내 화면의 절반)

.father {
gird-template:
"header header header header" 1fr
"content content content nav" 2fr
"footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; (행 크기 / 각 열 크기)
}

.father {
gird-template:
[header-start] "header header header header" 1fr [header-end]
[content-start] "content content content nav" 2fr [conent-end]
[footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr;
}

[2.8] Place Items

• 그리드 내부 조작

• justify-items: defalut=stretch / 가로 길이 형태
  (gird 부모(container)는 자식을 늘려서 부모를 채우게 함)
  속성: start, center, end

• align-items: default=stretch / 세로 길이 형태
  속성: start, center, end
  => *둘 모두 grid container에서 적용

• 만약 요소에 크기를 지정했다면 stretch 되지 않음.

shortcut

• place-items: stretch center (세로 길이 형태, 가로 길이 형태)

.father {
	align-items : start
}
.father {
	justify-items: center
}

.father {
	place-items: streatch / center;
}

[2.9] Place Content
1) 전체 그리드에 위치 정하기

• content와 item의 차이: content는 그리드 전체/ item은 각각 하나하나
• justify-content: start => 전체 그리드의 수평 위치
• align-content: start => 전체 그리드의 수직 위치
• grid 컨테이너의 height과 width가 있어야 함.

2) shortcut

• place items는 각 셀 하나하나에 대해 적용
• place content는 모든 셀에 대해 적용

.grid {
	align-content: end;
}

.grid {
	justify-content : start;
}

.grid {
	place-content: end center (vertical horizontal)
}

[2.10] Auto Columns and Rows
1)

• align-self: child의 수직 방향 위치
• justify-self: child의 수평 방향 위치
• place-self(vertical horizontal): align-self + justify-self

2) grid-auto-rows(columns)
=> 미리 설정된 행이나 열을 넘어가면 자동으로 설정
=> 1(행)x4 보다 많은 content가 있으면, 자동으로 row를 100px로 만듬

.grid {
	grid-template-columns: repeat(4, 100px)
	grid-template-rows: repeat(1, 100px)
	grid-auto-rows: 100px;
}

3) grid-row-flow, grid-row-flow: column;(기본값: row)
=> 새로운 row를 만들지, column을 만들지 결정

.grid {
	grid-template-columns: repeat(4, 100px)
	grid-template-rows: repeat(1, 100px)
	grid-auto-flow: column;
    grid-auto-columns: 100px;
}

[2.11] minmax

• 화면 크기가 줄어들거나 늘어날때 한계(제한) 값 설정. 최소한의 크기, 최대한의 크기
  minmax(최소, 최대)

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

=> column은 최소 100px의 크기를 가지고, 최대 1fr임.

[2.12] auto-fit auto-fill

• responsive design. 화면 크기에 따라 달라짐
• repeat function에만 적용
  1) auto-fill: 화면에서 남는 자리를 빈 칸으로 채움. (크기 고정, 비워진 칸 수 늘어남)
  2) auto-fit: 화면에서 남는 자리를 element들로 채움. (크기 화면에 맞게 늘어남)

.gird { 
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
     //창 너비에 맞게 row를 빈 column들로 채움.
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    //창 너비에 맞게 element를 늘림.
}

[2.13] min-content max-content

• box의 크기를 content에 맞춤
• browser가 content를 보고 box의 크기를 맞춰줌
  1) min-content: content의 크기를 최대한 줄이고, cell의 크기를 content에 맞춘다.
  2) max-content: content의 크기 만큼 cell의 크기를 늘린다.

.grid {
	grid-template-columns: repeat(5, minmax(min-content,1fr));
    grid-template-columns: repeat(auto-fill, minmax(20px, max-content));
}