[css] grid 반응형 layout 적용

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)