使用 CSS 網格創建 3x3 響應式布局

Question

我想創建一個 3x3 網格，在較小的屏幕上將一個框縮小到另一個框下方。 盒子應該永遠是完美的正方形。

此外，最后兩個框 (8 + 9) 在大屏幕上應該只是一個較長的矩形，但占用的空間與現在相同。 CSS 網格是一種方法嗎？ 這是我得到的：

 body { background: lightblue; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 20px; } .grid div { width: 100%; height: 100%; background: white; padding: .5em; }

 <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div>join</div> <div>us</div> </div>

Answer 1

你可以做這樣的事情 -

 body { background: lightblue; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 20px; } .grid div { width: 100%; height: 0%; padding-bottom: 100%; background: white; } .grid div:last-child:nth-child(3n - 1) { grid-column: span 2; height: auto; padding-bottom: 0; } @media (max-width: 400px) { .grid { grid-template-columns: 1fr; } }

 <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div>join us</div> </div>

...然后添加媒體查詢以使其響應。

編輯：

我所做的是——

1. 將.grid div高度更改為 0 並添加padding-bottom: 100%使其成為一個完美的正方形。
2. 添加.grid div:last-child:nth-child(3n - 1)以定位最后一個孩子並使其填充網格的其余部分。

編輯 2：添加了媒體查詢。

Answer 2

我想讓它成為一個簡單的 3x3 網格，而且當您調整到移動設備的大小時，該代碼也無法正常工作。 當我嘗試時，只顯示了幾個方塊。

我從 CSS 中刪除了.grid div:last-child:nth-child(3n - 1) ，並添加了一個額外的元素。

在那之后得到了工作和測試的網格。

 .grid { background: lightblue; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 20px; } .grid div { width: 100%; height: 0%; padding-bottom: 100%; background: white; } @media (max-width: 400px) { .grid { grid-template-columns: 1fr; }

 <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>