[CSS] 그리드 - 자식 속성, 그리드 함수

 

 

 

 

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

 

 

 

 

 

 

 

 

 

그리드 속성

---

그리드는 컨테이너(Container)와 아이템(item)들로 나뉜다. 컨테이너는 부모 요소이며 그 안에 자식 요소인 아이템들을 배치 시킬 수 있다. 

 

 

 

 

 

자식 속성 (Item)

 

• grid-row-start : 그리드 아이템 행의 시작 위치를 지정한다. (아래내용과 동일)
• grid-row-end : 그리드 아이템 행의 끝 위치를 지정한다. 
  
  • 단축속성 : grid-row  ( grid-row: 1 / 2; ) 
  • 숫자를 지정하거나, 선 이름을 지정하거나 span 키워드를 사용한다. 
  • 그냥 span만 쓰면 기본값이 span1
• grid-column-start : 그리드 아이템 열의 시작 위치를 지정한다. 
• grid-column-end : 그리드 아이템 열의 끝 위치를 지정한다.
• grid-area : 그리드 영역의 이름을 지정할 수도 있고 grid-row와 grid-column의  단축 속성으로도 사용할 수 있다. 
• align-self : 그리드 아이템을 수직 정렬한다 (아래내용과 동일)
• justify-self : 그리드 아이템을 수평 정렬한다.
  • :normal  = stretch  - 그리드의 아이템을 늘려 축을 채운다.
  • :start  - 시작점 정렬
  • :end  - 끝점 정렬
  • 그리드의 아이템이 수직이정렬이라면 행보다 작아야 하고 수평 정렬이라면 열의 크기보다 작아야 한다.
  • 단축 속성 : palce-self
• order : 그리드 아이템의 배치 순서를 지정한다.
  • 숫자가 작을수록 앞에 배치된다. 
• z-index : 그리드 아이템의 z 축 순서, 즉 쌓이는 순서를 지정한다. 

 

 

 

 

 

 

 

 

 

그리드 함수 (Grid Functions)

 

 

• repeat()  : 행과 열의 크기 정의를 반복한다.
  • grid-template-rows, grid-template-column에서 사용된다.
• minmax()  : 행과 열의 최소 크기 혹은 최대 크기를 정의한다. 
  • grid-template-rows, grid-template-column, grid-auto-rows, grid-auto-column에서 사용된다.
• fit-content()  : 행과 열을 그리드 아이템의 내용에 크기를 맞춘다.