[CSS] Grid 활용법

📝 그리드 사용법

그리드 선언

그리드는 display 속성을 사용해 설정할 수 있다. 설정 값에 따라 블록(Block) 그리드와 인라인(Inline) 그리드로 설정 가능하다.

고정 값(px, rem 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리됩니다.

예시)

.grid-container {
  display: grid; /* grid 또는 inline-grid 설정 가능 */
}

 

grid cell

그리드를 선언한 레이아웃 태그 내부에 포함한 자식요소는 grid cell로 변환된다.

(자식 요소가 아니면 grid cell이 아닙니다)

grid cell에 설정된 float 속성은 적용되지 않는다.

💡 grid cell에 설정된 display 속성은 모두 무시된다.
💡 요소가 아닌 텍스트가 자식으로 포함된 경우, 암시적인 grid cell이 된다. 하지만 암시적으로 생성된 grid cell은 스타일 규칙을 설정할 수 없다. 하지만 상속 가능한 스타일은 적용된다.

 

grid 템플릿

그리드 행(Row), 열(Column)을 설정하여 템플릿을 정할 수 있다.

 

grid-template-columns 나 grid-template-rows 속성을 통해, 각 행과 열의 크기를 설정할 수 있다.

설정하는 값은 그리드에서 사용 가능한 공간의 길이를 나타내며, 들어갈 수 있는 단위는 px, rem, em, %, fr 등이 있다.

예시)

.grid-container {
  grid-template-rows: 25% 100px auto;
  grid-template-columns: 1fr 50px 50px 40px;
}

💡 고정값 VS fr 누가 먼저 계산될까?
fr단위는 고정 값(px, rem 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리된다.

 

 

그리드 행/열 크기 자동 설정

일반적으로 grid-template-columns 나 grid-template-rows 속성을 통해, 각 행과 열의 크기를 설정한다고 위에서 정리를 했지만 몇 개의 열과 몇 개의 행이 올지 잘 모를 경우 일괄적으로 자동 크기를 지정할 수 있는 방법이 있다.

 

그 방법은 grid-auto-rows 나 grid-auto-columns 속성을 사용하면 가능하다.

예시)

.grid-container {
    grid-auto-columns: 60px;
}

minmax()

위 예시처럼 grid-auto-columns를  60px처럼 고정값을 주면 특정 콘텐츠가 grid-cell 크기보다 큰 경우 잘리는 현상이 생길 수 있다. 이걸 해결할 방법으로 minmax()가 있다.

minmax(최솟값, 최댓값) 함수를 사용하면 최솟값, 최댓값 범위 내에서 값을 지정해 줄 수 있으며, 최댓값에 auto 속성을 넣으면 콘텐츠가 넘치는 만큼 늘어난다.

예시)

.grid-container {
  display: grid;
  /* minmax() 함수 사용법 */
  grid-template-rows: repeat(2, minmax(20px, auto));
  grid-auto-columns: minmax(30px, auto);
}

 

 

그리드 cell 사이 간격을 주고 싶다면?

gap, row-gap, column-gap 속성을 이용하여 cell 사이 간격을 줄 수 있다.

예시)

.grid-container {
  grid-template-rows: 80px auto 80px;
  grid-template-columns: 100px 50px 100px;
  /* 행 사이 간격 설정 */
  row-gap: 10px;
  /* 열 사이 간격 설정 */
  column-gap: 15px;
}

💡 이전에 사용되던 이름은 grid-row-gap, grid-column-gap, gap이었으나,  
현재는 그리드 거터 속성의 이름 앞에 붙어 있던 grid- 는 모두 제외되었다.

 

 

그리드의 꽃!  grid-template-areas, grid-area

grid-area 속성에 설정한 이름과 grid-template-areas 속성에 이름을 같게 넣어주면 두 개의 속성에 공통된 이름을 참조하여, 그리드 템플릿 영역을 설정할 수 있다. grid cell을 같은 이름으로 설정하면 합쳐진다. 마침표(.)는 비어있는 grid cell을 말한다.

예시)

.grid-container {
  grid-template-rows: repeat(3, 300px);
  grid-template-columns: repeat(4, 1fr);

  /**
   * 그리드 템플릿 영역 설정
   * 각 행은 동일한 개수의 열 설정이 요구됩니다.
   */
  grid-template-areas:
    "header header header header"  /* 1행: 4열 모두 header                */
    "main main . sidebar"          /* 2행: 2열 main 1열, 공백 1열, sidebar */
    "footer footer footer footer"; /* 3행: 4열 모두 header                */
}

/* 그리드 영역 이름 설정 */
.grid-header  { grid-area: 'header';  }
.grid-main    { grid-area: 'main';    }
.grid-sidebar { grid-area: 'sidebar'; }
.grid-footer  { grid-area: 'footer';  }