<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;
}
}
View Compiled
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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.