Question

可以说，我们的目标是建立一种书架式的布局，其中每行的书数与屏幕上的所有书数一样多。

但是，现在我想设置一个底边框或图像来表示下面的书架（使用border-image-slice来实现书挡或img的外观）

如何使用css-grid或在网格内容内完成此操作？

以下是我所追求的效果类型的一个示例：https://codepen.io/TheRolf/pen/LVqEbZ

但是，我希望它使用css-grid（并且棕色的“架子”应该是图像，或者使用边框图像）。

这里的解决方案可能是Horizontal border across entire row of CSS GRID的扩展名

这是一个入门设置，其中的蓝色方块代表书籍...我没有尝试添加书架部分，因为那是我很困惑的地方：）

.grid {
    display: grid;
    background-color: red; 
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    grid-auto-rows: minmax(154px, auto);
    justify-items: center;
    grid-gap: 10px;
    margin: 10px;
}

.grid-item {
    width: 205px;
    height: 154px;
    background-color: blue;
    color: white;
}

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

如何设置自动调整（或自动填充）行之间的间隙的样式？

0 个答案: