如何使這個 CSS DYNAMIC Columns 網格的最后一個元素占據所有列？

Question

好吧，我有這個盒子容器 class 這是一個 CSS 網格容器。 如您所見，它是動態的，因為使用了repeat(auto-fit, minmax(340px, 1fr))

 .box-container { height: 100vh; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 100px; }.box:nth-child(odd) { background-color: lightblue; border: 1px solid #000; }.box:nth-child(even) { background-color: aquamarine; border: 1px solid #000; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box-container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>

調整視口的寬度，我們可以得到這種情況：

我希望最后一個元素占據兩列而不是一列，但我無法動態設置它。

所以這就是我在調整視口寬度時所期望的：

但我只知道如何靜態地做到這一點，跨越最后一個孩子。 這不是我想要的，因為我只希望它在視口寬度的那個點跨越兩列，並且不動態設置它會使其始終跨越兩列。

Answer 1

您可以使用flex輕松獲得所需的行為。 flex-wrap屬性將負責調整容器內的項目。

因此，當您有小屏幕設備時， flex-wrap會將溢出的項目移動到新row 。 因此，我們使用flex-grow來告訴項目根據可用空間增長。

並且flex-basis將告訴項目限制它可以縮小的最小width 。

這是工作示例。

 .box-container { height: 150px; display: flex; flex-wrap: wrap; }.box{ display: flex; flex-grow: 1; flex-basis: 150px; }.box:nth-child(odd) { background-color: lightblue; border: 1px solid #000; }.box:nth-child(even) { background-color: aquamarine; border: 1px solid #000; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="box-container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>

Codepen演示了上述示例。

如何使這個 CSS DYNAMIC Columns 網格的最后一個元素占據所有列？

問題描述

1 個解決方案

解決方案1
2 已采納 2019-10-15 06:44:31

如何使這個 CSS DYNAMIC Columns 網格的最后一個元素占據所有列？

問題描述

1 個解決方案

解決方案1 2 已采納 2019-10-15 06:44:31

解決方案1
2 已采納 2019-10-15 06:44:31