多段網格佈局

https://codepen.io/dye/pen/LyRJym 多段網格佈局

在這種佈局中，我想有一個不大不小的網格佈局的2個部分之間分隔的。任何一節中的項目數量都是未知的和動態的。什麼是最好的方式去做這件事？我已經添加了一個分隔線，我想從第一列列開始並在最後一列列結束。但是，我不知道如何選擇最後一行。

目前，我有

.grid-item--divider { 
    grid-column: 1/5; 
}

這看起來偉大的，當瀏覽器的大小來顯示4列。但是，當瀏覽器調整大小並且列數增加/減少時，佈局會中斷。我怎樣才能總是選擇最後一列專欄？或者有沒有更好的做法來完成這個不涉及使用分頻器？

*注：我以前的做法是有2個網格容器，每個部分一個。但由於佈局的動態性，兩部分的列不一定排列。理想情況下，即使例如一個部分只有一個項目，而另一個部分有許多項目，我也希望列匹配。

謝謝！

來源

2017-04-24 dye

或者，你可以用flexboxes：

來源

2017-04-24 23:22:57 JoeBeCool

不知道柔性可以處理colums和行匹配在一起:(這是一個典型的網格這裏 –

是的，它可以：https://codepen.io/imohkay/pen/gpard – JoeBeCool

不在這裏，網格系統設置在250px微型寬度和分頻器在那裏。行可以填充各種數量的項:)分叉和修改第3個示例https://codepen.io/gc-nomade/pen/PmGyEb –

您需要使用Javascript腳本，排序你有多少列跨越或使用mediaqueries：

body { 
 
    padding: 10px; 
 
} 
 

 
.grid-container { 
 
    display: grid; 
 
    grid-gap: 10px; 
 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
 
} 
 

 
.grid-item--divider { 
 
    grid-column: 1/8;/* fine for 1820px - 2080px */ 
 
    border: solid; 
 
} 
 

 
.grid-item { 
 
    border: 1px solid black; 
 
    min-width: 250px;/* eventually */ 
 
} 
 
/* breaking points */ 
 

 
@media all and (max-width: 1820px) { 
 
    .grid-item--divider { 
 
    grid-column: 1/7; 
 
    } 
 
} 
 
@media all and (max-width: 1560px) { 
 
    .grid-item--divider { 
 
    grid-column: 1/6; 
 
    } 
 
} 
 
@media all and (max-width: 1290px) { 
 
    .grid-item--divider { 
 
    grid-column: 1/5; 
 
    } 
 
}@media all and (max-width: 1030px) { 
 
    .grid-item--divider { 
 
    grid-column: 1/4; 
 
    } 
 
} 
 
@media all and (max-width: 770px) { 
 
    .grid-item--divider { 
 
    grid-column: 1/3; 
 
    } 
 
} 
 
@media all and (max-width: 510px) { 
 
    .grid-item--divider { 
 
    grid-column: 1/2; 
 
    } 
 
}

<div class="grid-container"> 
 
    <div class="grid-item grid-item--top">Item 1</div> 
 
    <div class="grid-item grid-item--top">Item 2</div> 
 
    <div class="grid-item grid-item--top">Item 3</div> 
 
    <div class="grid-item grid-item--top">Item 4</div> 
 
    <div class="grid-item grid-item--top">Item 5</div> 
 
    <div class="grid-item grid-item--top">Item 6</div> 
 
    <div class="grid-item grid-item--top">Item 7</div> 
 
    <div class="grid-item grid-item--divider"></div> 
 
    <div class="grid-item grid-item--bottom">Item 8</div> 
 
    <div class="grid-item grid-item--bottom">Item 9</div> 
 
    <div class="grid-item grid-item--bottom">Item 10</div> 
 
    <div class="grid-item grid-item--bottom">Item 11</div> 
 
    <div class="grid-item grid-item--bottom">Item 12</div> 
 
</div>

來源

2017-04-24 23:25:57

多段網格佈局

回答

相關問題