[CSS]그리드 컨테이너(grid container) 속성

 

Grid container 속성

 

---

 

Grid container에서 사용 가능한 속성 정리

 

그리드 트랙

그리드 트랙(Grid Track)은 그리드에 그려진 두 라인 사이의 공간을 나타냅니다. grid-template-rows 와 grid-template-columns 속성으로 그리드 트랙(행(rows)과 열(columns))을 정의할 수 있습니다. 값을 정의하지 않을 경우 grid item의 크기는 font-size에 비례합니다.

px, em, %, fr(fraction, 공간비율)등의 단위를 사용합니다. repeat() , minmax() , fit-content() 함수도 사용할 수 있습니다.

• grid-template-rows 
• grid-template-columns  
• grid-template-areas : 지정된 그리드 영역 이름(grid-area; grid item에서 정의)을 참조해 그리드 템플릿 생성
• grid-template : grid-template-rows , grid-template-columns , grid-template-areas 의 단축 속성

/* 너비가 200px인 4개의 행, 열너비 100px인 4개의 열로 이루어진 그리드 생성 */
.grid-container {
  display: grid;
  grid-template-rows: 200px 200px 200px 200px;
  grid-template-columns: 100px 100px 100px 100px;
}

/* repeat()함수를 이용하여 위와 동일한 그리드를 생성 */
.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 200px);
  grid-template-columns: repeat(4, 100px);
}

/* grid-template :
"그리드영역 이름" height(row) / width(column) */
.grid-container {
  display: grid;
  grid-template-rows: 100px repeat(2, 200px) 100px;
  grid-template-columns: repeat(4, 100px);
  grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr
}

 

 

그리드 갭

행과 행 사이의 공간을 row gap, 열과 열 사이의 공간을 column gap으로 정의합니다.

출처 : https://www.w3schools.com/css/css_grid.asp

• row-gap 
• column-gap  
• gap : row-gap과 column-gap의 단축 속성

 

 

그리드 정렬

전체 grid container 안에서 grid item의 정렬방식을 결정합니다. flexbox 레이아웃의 justify-content, align-items와 같이 아이템들의 전체 정렬 방식을 정의하는 기능을 합니다. 그러므로 그리드 컨텐츠(grid item들의 합)의 수평(가로)/수직(세로) 크기가 컨테이너의 것보다 작아야 합니다.

• justify-content : 컨테이너 안에서 grid item들의 수평(가로) 정렬하는 방식 결정
• align-content : 컨테이너 안에서 grid item들의 수직(세로) 정렬하는 방식 결정
• place-content : align-content justify-content (단축 속성)

 

 

아이템 정렬

각 cell 안에서 grid item의 정렬 방식을 결정합니다. 그러므로 grid item의 크기가 자신이 속한 그리드 트랙(열/행)보다 작아야 합니다.

• justify-items : 각 cell 안에서 grid item의 수평(가로) 정렬하는 방식 결정
• align-items : 각 cell 안에서 grid item의 수직(세로) 정렬하는 방식 결정
• place-items : align-items jutify-items (단축 속성)

/* 너비가 100px인 4개의 행, 열너비 100px인 4개의 열로 이루어진 그리드 생성 */
.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 200px);
  grid-template-columns: repeat(4, 100px);
  justify-items: center;
  align-items: stretch
}

/* place-items 단축 속성을 이용하여 위와 동일한 그리드를 생성 */
.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 200px);
  grid-template-columns: repeat(4, 100px);
  place-items: stretch center;
}

 

 

아이템 자동 정렬

grid container에서 지정한 그리드 트랙보다 더 많은 content가 존재할 경우, 나머지 grid item들의 크기를 결정합니다.

 

• grid-auto-rows 
• grid-auto-columns 
• grid-auto-flow : 나머지 grid item의 정렬 방향을 결정
  flexbox 레이아웃에서 flex-direction과 같은 기능을 합니다. 
  • row
  • row dense
  • column
  • column dense

 

 

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

2. 노마드코더/바닐라JS로 그림 앱 만들기 : https://nomadcoders.co/javascript-for-beginners-2

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