How to limit the number of lines in grid css?-CodePudding

I want to make 2 columns with 5 elements each. I currently have 6 elements, which means that 5 of them should be in the first column, and the sixth should be put on the 2nd column. Should be:

but now:

html:
 <ul >
    <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);
    }

CodePudding user response：

Let's look at this property

grid-auto-flow: column

See CanIUse usage of this property

See w3c documentation about this property