각 기기별 Responsive Grid를 적용하는 방법

View를 이용해 여러개의 컬럼을 가지고 있을 때 컬럼이 각 기기별로 변하게 하려면 여러가지 방법이 있는듯 하다. 

• Masonry
• Views Isotope - jQuery Isotope
• Views Fluid Grid

여기서는 CSS3를 이용해 미디어 쿼리를 주는 방법을 이용해 보았다. 

Unformateed list에서 기본속성으로 적용되는 코드이지만 Grid에서는 약간 수정하여 적용할 수 있었다. 

다음코드는 SASS 형식으로 되어 있으므로 CSS로 컴파일이 필요하다. 

@media all and (max-width: 479px) {
  .view-grid.view-display-id-page {
    .view-content {
      .views-row {
        width:100%;
        float:left;
      }
    }
  }
}
@media all and (min-width: 480px) and (max-width: 959px) {
  .view-grid.view-display-id-page {
    .view-content {
      .views-row {
        width:49%;
        float:left;
        &:nth-child(2n - 1) {
          margin-right:2%;
        }
      }
    }
  }
}
@media all and (min-width: 960px) {
  .view-grid.view-display-id-page {
    .view-content {
      .views-row {
        float:left;
        width:32%;
        &:nth-child(3n - 1) {
          margin-right:2%;
          margin-left:2%;
        }
        &:nth-child(3n + 1) {
          clear:left;
        }
      }
    }
  }
}

view-grid - class of the View
view-display-id-page - class of the page view
nth-child - selects elements by a formula

결과

각 컬럼의 변화는 다음과 같다.

• 3 columns - width >= 960px
• 2 columns - 480px <= width <= 959px
• 1 column - width < 480px