时间戳

首页 > 解决方案 > css网格重复布局样式列表

javascript - css网格重复布局样式列表

问题描述

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

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

标签： javascripthtmljquerycsscss-grid

解决方案

您可以尝试如下。我正在考虑翻译以纠正订单：

.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>

推荐阅读