grid

grid는 flex만으로 해결하기 힘든 배치를 손쉽게 해결해 준다.

 

flex와 같이 부모 Element에서 값을 지정해준다.

 

grid-template-columns
==> grid의 column 개수와 width를 지정해준다.

 

grid-template-rows
==> grid의 row 개수와 height를 지정해준다.

 

gap, column-gap, row-gap
==>각 Element 간의 간격을 설정한다

 

repeat
==> grid의 column과 row의 반복 입력 횟수를 줄여준다.

 

ex) grid-template-rows: 100px repeat(4, 200px) 100px

=> 100px 한칸, 200px 네 칸, 100px 한 칸 순서대로 배치한다.

• auto는 가능한한 모든 공간을 사용한다.

ex) auto 100px 

=> 가능한한 모든 공간을 사용하고 100px만큼 사용

 

grid-template-areas
==> layout을 디자인할 수 있게 해 준다. 표의 형태로 작성 가능

 

ex)
"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer";

• grid-template-areas에 사용되는 이름(header, content 등등)은 각 요소에서 grid-area속성에서 속성 값으로 

  지정해주어야 한다.

• grid-area의 속성값은 string이 아니다!

ex)

grid-area : content;   O

grid-area : "content"; X

 

grid-column-start, grid-column-end, grid-row-start, grid-row-end
==> 칸이 아닌 줄을 기준으로 해당 child Element가 사용하고자 하는 범위를 지정한다. 

• child Element에서 지정 가능하다.

ex)

처음부터 오른쪽으로 4칸을 차지하고 싶다면 
grid-column-start: 1;
grid-column-end: 5;

 

grid-column-start, grid-column-end의 축약

==> 짧게 사용한다면 grid-column: 1 / 5로 적을 수 있다.(start = 1, end = 5)

• -1을 적을 경우 뒤에서 첫 번째 line이라는 뜻이다. -2는 뒤에서 두 번째
• span을 활용하여 cell의 개수로 지정도 가능하다.
• 시작 line을 지정하는 것도 가능

ex) 

grid-column: span 4;

grid-row: 2 / span 2;

 

line의 이름을 지정하는 것도 가능

 

*repeat으로 이름을 붙일 경우 첫 번째 line의 시작은 cell의 끝 line에서 시작한다. 즉 다른 경우보다 line의 번호가 1씩 작아진다. 

 

ex) 

grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px;
ex) 

grid-template-rows: repeat(4, 100px [sexy-line]); 

 

fr
==> fraction, grid-container에서 사용 가능한 공간에 맞춰 비율을 조정해준다.

 

ex) 

grid-template-columns: repeat(4, 1fr);

 

grid-template
==> grid를 설정하는 지름길
[라인 이름]*옵션 grid-area이름 row의 높이 [라인 끝이름]
[라인 이름]*옵션 grid-area이름 row의 높이 [라인 끝이름]
[라인 이름]*옵션 grid-area이름 row의 높이 [라인 끝이름]
[라인 이름]*옵션 grid-area이름 row의 높이 [라인 끝이름] / 각 column의 길이

 

*grid-template에서는 repeat 사용은 불가하다.

 

ex) 
grid-template: 
[header-start] "header header header header" 1fr [header-end]
[content-start] "content content content nav" 2fr [content-end]
[footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr;

 

place-items

==> grid 속성 값의 영향을 받는 child Element들의 justify-items, align-items를 한 번에 지정해 줄 수 있게 해주는 속성

place-items: align-items속성 값 justify-items속성 값;

 

*justify-items, align-items의 default값은 stretch이다. 

 

ex) 

place-items: center stretch;