How can I create list items on a grid when packaging?

Question

Let's say I have the following <ul>for use in a responsive design:

li {
  display: inline;
  padding-right: 1em;
}

<ul>
  <li>
    MenuItemHeinz
  </li>
  <li>
    MenuItemHinrich
  </li>
  <li>
    MenuItemRoffen
  </li>
  <li>
    MenuItemStaffRoffeltack
  </li>
  <li>
    MenuItemHeinz
  </li>
</ul>

Run codeHide result

When I resize my browser window or view a page on my phone, it breaks as follows:

How can I make menu items if they break beautifully on the grid, for example, like this? It is preferable to use only css ... of course;)

Answer 1

This layout is relatively simple with CSS flexbox .

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding-left: 0;
}

ul li {
  flex: 0 0 calc(50% - 10px);
  margin: 5px;
  padding: 5px 0;
  text-align: center;
  box-sizing: border-box;
  border: 1px dashed red;
  background-color: yellow;
}

<ul>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
  <li><a href="#">item</a></li>
</ul>

Run codeHide result

jsFiddle demo

: Flexbox IE < 10. , Safari 8 IE10, . Autoprefixer. .

Answer 2

css -.

li {
  display: inline;
  padding-right: 1em;
}
@media(max-width: 680px) {
  ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  li {
    display:block;
  }
}

<ul>
  <li>
    MenuItemHeinz
  </li>
  <li>
    MenuItemHinrich
  </li>
  <li>
    MenuItemRoffen
  </li>
  <li>
    MenuItemStaffRoffeltack
  </li>
  <li>
    MenuItemHeinz
  </li>
</ul>

Hide result