Drupal views格子 變身支援 RWD

01. views選擇"格子"，並且只選1個columns

02. 修改css語法

width = 多少 % 可依照自己的版面大小做調整

@media screen and (min-width: 1650px) { 

.views-view-grid tr, .views-view-grid td {

    display: inline-grid;

    width: 15%;

}

}

@media screen and (min-width: 1220px) and (max-width: 1649px) { 

.views-view-grid tr, .views-view-grid td {

    display: inline-grid;

    width: 20%;

}

}

@media screen and (min-width: 1224px) and (max-width: 1219px) { 

.views-view-grid tr, .views-view-grid td {

    display: inline-grid;

    width: 30%;

}

}

@media screen and (min-width: 768px) and (max-width: 1223px) { 

.views-view-grid tr, .views-view-grid td {

    display: inline-grid;

    width: 45%;

}

}

@media screen and (min-width: 0px) and (max-width: 767px) { 

.views-view-grid tr, .views-view-grid td {

    display: inline-grid;

    width: 48%;

}

}

td.col-1.col-first {

    width: 100%;

}

原則上大致的原理就是這樣，以上剛好有個Drupal 6的站有這個需求




我還有另一個D8的站，也是有格子，不過預設為4格，寫法如下，方式不太一樣，但都能達到相同的成效

@media screen and (max-width:768px) { 

.views-view-grid .views-col {

    float: left;

    width: 50% !important;

}

}

這種方式是針對內容大小 一致，如果沒一致則要找瀑布流的方案