css grid 반응형 예제

grid 사용방법

.content_inner{
  width:90%;
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;/*자연스럽게 500이하의 css 값이됨*/
  grid-template-rows:auto; 
  grid-gap:20px;
}
/*500이상일때는 2등분*/
@media screen and (min-width:500px){
  .content_inner{
    grid-template-columns:1fr 1fr;
  }
  .desc.first{
    /*500이상일때 첫번째 아이템이 첫번째 컬럼부터 세번째 컬럼까지(2칸)사용*/
    grid-column:1/3;
  }
}
/*800이상일때는 4등분*/
@media screen and (min-width:850px){
  .content_inner{
    grid-template-columns:1fr 1fr 1fr 1fr;
/*     grid-template-columns:repeat(4,1fr); */
  }
}
 
/*responsive 혼합*/
/*    margin:auto;
  max-width:1200px;
  display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    grid-column-gap:30px;}  */

codepen.io/fangmin/pen/RwKmgYJ

반응형그리드