使用 CSS 网格创建响应式磁贴布局

Question

我正在进入 CSS 网格，我想知道如何用它创建一个响应式平铺式布局，如下所示：

https://aggie.io/0g_rzi1fg7

网格是这样的好方法吗..？ 标记：

 .grid { display: grid; grid-gap: 10px; grid-template-rows: 50%; grid-template-columns: 50% 50%; a { border: 1px solid blue; } }

 <div class="grid"> <a href="" class="grid-lg"> Large item here </a> <div class="grid-sm-container"> <a class="grid-sm"> Smaller item here </a> <a class="grid-sm"> Smaller item here </a> <a class="grid-sm"> Smaller item here </a> <a class="grid-sm"> Smaller item here </a> </div> </div>

Answer 1

你可以参考 w3schools 的教程。

 .grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; /* background-color: Tomato; */ padding: 10px; }.grid-container > div { background-color: dodgerblue; color: white; text-align: center; padding: 20px 0; font-size: 30px; }.item1 { grid-row-start: 1; grid-row-end: 3; }

 <div class="grid-container"> <div class="item1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>