[CSS] 그리드 - 부모속성

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

css 그리드 : 2차원의 행과 열로 된 레이아웃 시스템

 

 

 

 

 

 

 

그리드 속성

---

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

 

 

 

 

 

부모 속성 (Container)

 

• display : 그리드 컨테이너를 정의한다. 
  • :grid - block 특성의 그리드
  • :inline-grid - inline 특성의 그리드 
• grid-template-rows : 행의 크기를 정의한다.
  • :1행크기 2행크기 .... ;
  • :[선의 이름] 1행크기 [선의 이름] 2행크기 ... ;
  • :1fr 100px   - 1의비율만큼의 크기 100px만큼의 크기 
  • :repeat(4, 150px);  - 150px 만큼의 행을 4개 지정. 
• grid-template-colums : 열의 크기를 정의한다. (위와 아래내용 동일)
• grid-templates-areas : 영역의 이름을 참조해 템플릿을 만든다. 
• row-gap : 행과 행 사이의 간격을 정한다.
• column-gap : 열과 열 사이의 간격을 정한다. 
  • gap : 10px 20px;   - 갭의 행과 열의 간격을 단축 해 지정하는 속성
• grid-auto-rows : 암시적인 행의 크기를 정한다. 
  •  명시적 행의 사이 사이 비어있는 행을 의미 
• grid-auto-columns : 암시적인 열의 크기를 정한다.  (위와 아래내용 동일)
• grid-auto-flow : 자동배치 방식을 정한다. 
  • 배치하지 않은 아이템들을 어떤 알고리즘을 따라 배치시킬지 정한다. 
  • row, column, row dense, column dense - 각 행, 열, 행(빈영역 메움), 열(빈영역 메움) 에 따라 차례로 배치한다.
• align-content : 그리드 콘텐츠들을 수직 정렬한다. 
  • :nomal(기본값) = stretch  - 그리드 콘텐츠를 늘려 행 축을 채움
  • :start  - 왼쪽 정렬
  • :center  - 수평 가운데 정렬
  • :end  - 오른쪽정렬
  • :space-around  - 각 열 좌우 여백을 고르게 정렬
  • :space-between  - 첫열은 시작점에, 끝열은 끝점에 정렬되고 나머지는 고르게 정렬됨.
  • :space-evenly  - 고르게 정렬됨
• justify-content: 그리드 콘텐츠들을 수평 정렬한다. ( 위와 아래내용 동일)
• align-items: 그리들 아이템들을 수직 정렬한다.
  • :normal(기본값) = stretch  - 그리드 콘텐츠를 늘려 열 축을 채움
  • :start  - 위쪽 정렬
  • :center  - 수직 가운데 정렬
  • :end  -  아래쪽 정렬
• justify-items 그리드 아이템들을 수평 정렬한다. (위와 아래내용 동일)