使用 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>