본문 바로가기
💻CODING/html, css

[css] grid 반응형 layout 적용

by 코딩하는 갓디노 2021. 10. 4.

css grid 반응형 레이아웃

 

grid를 이용한 반응형
레이아웃 입니다.

 

grid를 이용한 style을 적용하면, 미디어쿼리를 사용할 필요 없이
스크린 화면 사이즈에 맞추어 반응형 레이아웃을 구현할 수 있습니다. 

 

구현 화면

 

css

div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 15px;
}

 

fr

  • fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미
  • 아래의 경우 100px, 25%를 사용하고 남은 공간을 1fr은 ‘1/3’, 2fr은 ‘2/3’ 만큼 사용
.container {
  grid-template-columns: 1fr 2fr 100px 25%;
}

 

auto-fill

  • 행과 열의 크기게 맞게 자동적으로 조정
  • repeat() 함수와 같이 사용

 

minmax

  • 첫 번째 인수는 ‘최솟값’이고 두 번째 인수는 ‘최댓값’
  • grid-template-rows, grid-template-columns, grid-auto-rows 그리고 grid-auto-columns에서 사용
  • min-width와 max-width 속성을 동시 지정하는 것과 비슷

 

grid-gap

  • 각 행과 행, 열과 열 사이의 간격, 여백(gutter)
반응형

댓글