如何限制网格css中的行数？

Question

我想制作 2 列，每列包含 5 个元素。我目前有 6 个元素，这意味着其中 5 个应该在第一列，第六个应该放在第二列。应该：

但现在：

html:
 <ul class="footer-menu">
    <li><a href="#">Maps</a></li>
    <li><a href="#">Style</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Exebitions</a></li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Shop</a></li>
</ul>
css:
    .footer-menu {
     display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(5, 1fr);
    }

Answer 1

我们来看看这个属性

grid-auto-flow: column

See CanIUse usage of this property

See w3c documentation about this property

如何限制网格css中的行数？

How to limit the number of lines in grid css?

html

css

css-grid