我可以在不使用大量 div 的情况下定义一个完全填充的网格吗？

Question

我遇到的主要问题是我需要定义一个大网格。我想使用网格，因为它能给我最好的结果，但我只能通过使用大量元素来实现它。还有其他办法吗？

我现在拥有的是这样的：

<div class="modalDayBackground">
                        <div></div>
                        <div>8:00</div><div>10:00</div><div>12:00</div><div>14:00</div><div>16:00</div><div>18:00</div><div>20:00</div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>                           
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
                        <div></div><div></div><div></div><div></div><div></div><div></div><div></div> 

                    </div>

我的CSS看起来像这样：

::deep .modalDayBackground {
    background-color: #eee;
    position: absolute;
    display: grid;
    top: 6.5em;
    left: 0.65em;
    width: 100%;
    height: 56.3em;
    column-gap: 1px;
    row-gap: 1px;
    grid-template-columns: 2.35em 5.1em 5.2em 5.1em 5.2em 5.1em 5.2em 5.5em;
    grid-template-rows:3.5em 2.7em 2.45em 2.5em 2.55em 2.55em;

}

::deep .modalDayBackground div {
    background-color: white;
    color: #8391a2; /*#bccee4;*/
}

结果如下所示：

Answer 1

对于网格Table是最好的选择。 欲了解更多信息，请参阅点击链接 https://www.w3schools.com/html/html_tables.asp