<div class="section">
<h1 class="section__title">CSS Grid</h1>
<ul class="nav nav--grid">
<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>
<li class="nav__item"><a class="nav__link" href="#">Item 9</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 10</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 11</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 12</a></li>
</ul>
</div>
<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>
<li class="nav__item"><a class="nav__link" href="#">Item 9</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 10</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 11</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 12</a></li>
</ul>
</div>
<div class="section">
<h1 class="section__title">Flexbox</h1>
<ul class="nav nav--flex">
<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>
<li class="nav__item"><a class="nav__link" href="#">Item 9</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 10</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 11</a></li>
<li class="nav__item"><a class="nav__link" href="#">Item 12</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: 12; // max-number of items
$max-row-items: 4; // max-number of items in a single row
.nav {
max-width: 700px;
margin-left: auto;
margin-right: auto;
padding: 6px 0;
list-style: none;
}
.nav--flex {
display: flex;
flex-wrap: wrap;
}
.nav--grid {
display: grid;
grid-auto-flow: column;
@media screen and (max-width: $mq-mobile) {
grid-auto-flow: row;
}
}
.nav--grid2 {
display: grid;
grid-auto-flow: row;
@media screen and (min-width: $mq-mobile) {
grid-template-columns: repeat(#{$max-row-items}, auto);
grid-template-rows: repeat(#{$max-items/$max-row-items}, auto);
}
}
.nav__item {
.nav__hide & {
&:nth-child(n + 7) {
display: none;
}
}
.nav--flex & {
flex: 0 0 100%;
@media screen and (min-width: $mq-mobile) {
flex: 0 0 calc(100% / #{$max-row-items});
}
}
.nav--grid & {
$i: 0;
@while $i < $max-items {
$row: floor($i / $max-row-items);
$column: $i % $max-row-items;
&:nth-child(#{$i + 1}) {
@media screen and (min-width: $mq-mobile) {
grid-area: #{$row + 1} / #{$column + 1} / #{$row + 2} / #{$column + 2};
}
}
$i: $i + 1;
}
}
}
.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;
&: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.