css 网格重复布局样式列表

Question

我正在创建购物车中项目列表的网格，我已经使用网格区域制作了一个布局示例，但它不会重复自己来制作列表如何让网格重复盒子布局无限地

<div class="grid">
   <div class="description"></div>
   <div class="quantity"></div>
   <div class="price"></div>
   <div class="close"></div>

   <div class="description"></div>
   <div class="quantity"></div>
   <div class="price"></div>
   <div class="close"></div>

   <div class="description"></div>
   <div class="quantity"></div>
   <div class="price"></div>
   <div class="close"></div>
   
</div>

 .grid { width: 300px; display: grid; grid-template-columns: auto auto; }.close { height: 50px; background: red; grid-area: 1 / 1 / span 1 / span 2; }.description { height: 50px; background: blue; grid-area: 2 / 1 / span 1 / span 2; }.quantity { height: 50px; background: green; grid-area: 3 / 1 / span 1 / span 1; }.price { height: 50px; background: pink; grid-area: 3 / 2 / span 1 / span 1; }

 <h1>I want to repeat this format of grid row items</h1> <div class="grid"> <div class="description">Description</div> <div class="quantity">Quantity</div> <div class="price">Price</div> <div class="close">Close</div> <div class="description">Description</div> <div class="quantity">Quantity</div> <div class="price">Price</div> <div class="close">Close</div> </div>

Answer 1

你可以像下面这样尝试。 我正在考虑翻译以纠正订单：

 .grid { width: 300px; display: grid; grid-auto-rows:50px; }.close { background: red; grid-column:span 2; transform:translateY(-200%); }.description { background: blue; grid-column:span 2; transform:translateY(100%); }.quantity { background: green; transform:translateY(100%); }.price { background: pink; transform:translateY(100%); }

 <h1>I want to repeat this format of grid row items</h1> <div class="grid"> <div class="description">Description</div> <div class="quantity">Quantity</div> <div class="price">Price</div> <div class="close">Close</div> <div class="description">Description</div> <div class="quantity">Quantity</div> <div class="price">Price</div> <div class="close">Close</div> <div class="description">Description</div> <div class="quantity">Quantity</div> <div class="price">Price</div> <div class="close">Close</div> </div>