Menu with adaptive columns

Demo for https://toster.ru/q/310952

by Gleb Kemarsky

HTML

<div id="container">
  <div id="mainmenu">
    <h1>Header</h1>
    <ul>
      <li><a href="#"><img alt="Link 1"></a></li>
      <li><a href="#"><img alt="Link 2"></a></li>
      <li><a href="#"><img alt="Link 3"></a></li>
      <li><a href="#"><img alt="Link 4"></a></li>
      <li><a href="#"><img alt="Link 5"></a></li>
    </ul>
  </div>
</div>

CSS

/* it is given on the condition of the problem */
#container {
  float: left;
  position: relative;
  width: 100%;
}

/* place the menu in the center  */
#mainmenu {
  position: absolute;
  transform: translateX(calc(50vw - 50%));
}
#mainmenu li {
  clear: left;
  display: block;
  float: left;
  margin: 10px 0 0 0;
}

/* change the number of columns  */
@media (min-width: 480px) {
  #mainmenu li {
    margin-left: 20px;
    clear: none;
  }
}
@media (min-width: 480px) and (max-width: 639px) {
  #mainmenu li:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  #mainmenu li:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #mainmenu li:nth-of-type(3n+1) {
    margin-left: 0;
    clear: left;
  }
}
@media (min-width: 992px) {
  #mainmenu li:nth-of-type(4n+1) {
    margin-left: 0;
    clear: left;
  }
}

/* beautiful appearance */
img {
  background-color: #ddd;
  height: 40px;
  width: 80px;
}
a:hover img {
  background-color: #d00;
  color: #fff;
}
h1 {
  font-size: 24px;
  margin: 0;
}
#mainmenu {
  background-color: #eee;
  outline: 1px solid #ccc;
  padding: 10px 20px;
}
#mainmenu ul {
  list-style:none;
  margin: 0;
  padding: 0;
}