<div class="section">
  <h1 class="section__title">CSS Grid</h1>
  <ul class="nav nav--grid2">
    <li class="nav__item" domflag><a class="nav__link" href="#">Item 1</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 2</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 3</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 4</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 5</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 6</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 7</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 8</a></li>
  </ul>
</div>
<button type="button" class="btn js-toggle-items">Toggle items</button>
$color1: #e01258;
$color2: #ec3211;

$mq-mobile: 320px;
$mq-desktop: 960px;

$browser-context: 16px;

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em;
}

@mixin css-locks($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{em($min-value)} + #{strip-unit($max-value - $min-value)} * (100vw - #{em($min-vw)}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}

body {
  min-height: 100vh;
  @include css-locks(font-size, $mq-mobile, $mq-desktop, 14px, 16px);
}

.section {
  background: radial-gradient(circle at center, transparentize($color1, .2), transparentize($color2, .2));
  margin-bottom: 10px;
}

.section__title {
  font-size: 1.75em;
  color: white;
  font-weight: 100;
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid currentColor;
}

$max-items: 8; // max-number of items
$max-row-items: 4; // max-number of items in a single row

.nav {
  max-width: 732px;
  margin-left: auto;
  margin-right: auto;
  padding: 6px;
  list-style: none;
}

.nav--grid2 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(60px, auto));
  justify-content: center;
}

.nav__item {
  .nav__hide & {
    &:nth-child(n + 5) {
      display: none;
    }
  }
}

.nav__link {
  display: block;
  font-size: 1em;
  padding: 6px;
  text-align: center;
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .13s ease-out;
  white-space: nowrap;
  
  &:hover,
  &:focus,
  &:active {
    border-color: currentColor;
  }
}

.btn {
  margin: 6px 0;
  font-size: 1em;
  display: block;
  min-width: 120px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 18px;
  background: white;
  color: $color2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .13s ease-out;
  
  &:hover,
  &:focus,
  &:active {
    border-color: currentColor;
  }
}
const $navs = document.getElementsByClassName('nav');

const toggleItems = function() {
  for(var i = 0; i < $navs.length; i ++) {
    $navs[i].classList.toggle('nav__hide');
  }
}
  

const $btn = document.getElementsByClassName('js-toggle-items')[0];

$btn.addEventListener('click', toggleItems);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.