有什么方法可以插入一条线并且 CSS 知道如何将它放在网格系统中行的末尾？

Question

**编辑 18-06-2020 - 我找到了答案 break to new row with flex box

我正在 ReactJS 中制作日历组件。当我点击日历中的任何一天按钮时，我想在我点击的按钮行的正下方显示一个全宽组件，我可以在其中选择一个小时间隔进行预订。

我附上一张图片，以便更好地解释。

假设我在 3 和 4 之间插入了一个<div>，即使我没有在网格系统的末尾插入它，剩余的表格也会向下移动 300px。第一行保持原位，表格的其余部分应向下滑动 300 像素。其他的也一样。

我的带有日期按钮的 html 如下所示：

<div class="days">
<div role="button" class="day-button otherMonth ">25</div>
<div role="button" class="day-button otherMonth ">26</div>
<div role="button" class="day-button otherMonth ">27</div>
<div role="button" class="day-button otherMonth ">28</div>
<div role="button" class="day-button otherMonth ">29</div>
<div role="button" class="day-button otherMonth ">30</div>
<div role="button" class="day-button  ">1</div>
<div role="button" class="day-button  ">2</div>
...
<div role="button" class="day-button  ">30</div>
<div role="button" class="day-button  ">31</div>
<div role="button" class="day-button otherMonth ">1</div>
<div role="button" class="day-button otherMonth ">2</div>
<div role="button" class="day-button otherMonth ">3</div>
<div role="button" class="day-button otherMonth ">4</div>
<div role="button" class="day-button otherMonth ">5</div>
</div> 

我的网格样式 css

grid-display{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 0px;
    row-gap: 1em;
    justify-items: center;
}

JSBIN code

我真的需要为表格的每一行制作容器吗？

有什么方法可以让 CSS 知道如何在行尾插入元素？

Answer 1

我找到了答案break to new row with flex box