15+ CSS Grid Layout Examples

This post contains a total of 15+ Hand-Picked CSS Grid Layout Examples with Source Code. All the Grid Layouts are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Michelle Barker

Made by Michelle Barker. Simple CSS Grid Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
* {
  box-sizing: border-box;
}

:root {
  --col: calc(
  		( var(--wrapper) -
  		( (var(--numberOfColumns) - 1) * var(--gutter) ) ) / var(--numberOfColumns) );
  --gutter: 1em;
  --wrapper: 1100px;
  --numberOfColumns: 12;
}
@media (min-width: 1600px) {
  :root {
    --wrapper: 1400px;
  }
}

@media (min-width: 25em) {
  h1 {
    font-size: 5em;
    line-height: 1;
  }
}

@media (min-width: 25em) {
  h3 {
    font-size: 1.8em;
  }
}

ul {
  padding: 0;
  list-style: none;
}
@media (min-width: 25em) {
  ul {
    font-size: 1.2em;
  }
}

a {
  text-decoration: none;
  color: #961883;
  transition: color 200ms ease-in-out;
}
a:hover, a:focus {
  color: black;
}

li:not(:last-child) {
  margin-bottom: 1em;
}

@media (min-width: 600px) {
  .grid {
    display: grid;
    grid-template-columns: [start] minmax(20px, 1fr) [wrapper-start] repeat(8, minmax(0, var(--col))) [sidebar-start] repeat(4, minmax(0, var(--col))) [wrapper-end] minmax(20px, 1fr) [end];
    grid-template-rows: minmax(3em, 1fr) auto minmax(auto, 1fr);
    grid-gap: var(--gutter);
    min-height: 100vh;
  }
}

.grid::after {
  content: "";
  display: block;
  grid-column: sidebar-start/end;
  grid-row: 1/4;
  background-color: rgba(244, 5, 237, 0.5);
}

.grid__heading {
  grid-column: wrapper-start/span 6;
  grid-row: 2;
  border: 3px solid;
  padding: 1em;
}

.grid__sidebar {
  grid-column: span 3/wrapper-end;
  grid-row: 2;
  padding: 1em 0;
  border-top: 3px dotted;
  border-bottom: 3px dotted;
  z-index: 1;
}

.grid__btn {
  grid-column: wrapper-start/sidebar-start;
  grid-row: 3;
  align-self: flex-end;
}

.grid__btn a {
  padding: 1em 1.5em;
  background-color: #f405ed;
  border-radius: 0.25em;
  display: inline-block;
  margin-bottom: 1em;
}
.grid__btn a:hover, .grid__btn a:focus {
  background-color: #c204bc;
}

.grid__fig {
  grid-column: start/end;
  grid-row: 1/4;
  max-height: 900px;
  background-color: #e5dbe5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23f405ed' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style>
</head>
<body>
  <div class="grid">
	<div class="grid__fig">
	</div>
	<div class="grid__heading">
		<h1>CSS Layout News</h1>
	</div>
	<div class="grid__btn">
		<a href="http://csslayout.news/" target="_blank">Subscribe</a>
	</div>
	<aside class="grid__sidebar">
		<h3>This week’s news</h3>
		<ul class="sidebar__list">
			<li class="sidebar__item">
				<a href="https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=web&utm_source=CSS_Layout_News_142" target="_blank">Best Practices With CSS Grid Layout</a>
			</li>
			<li class="sidebar__item">
				<a href="https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/" target="_blank">Getting rid of the β€œgrid-” prefix</a>
			</li>
			<li class="sidebar__item">
				<a href="https://meowni.ca/posts/float-layout/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=web&utm_source=CSS_Layout_News_142" target="_blank">How browsers position floats</a>
			</li>
		</ul>
	</aside>
</div>
</body>
</html>

2. By Daniel Sixl

Made by Daniel Sixl. Responsive image gallery with CSS Grid Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu:400,700'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/release/featherlight.min.css'>
  
<style>
html {
  font-size: 16px;
}

body {
  background: #444;
  font-family: "Ubuntu", sans-serif;
  line-height: 1.4;
}

a {
  color: #bada55;
}

.huge-type {
  font-size: 4rem;
}

.warning {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #333;
  color: #FFF;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@supports (display: grid) {
  .warning {
    display: none;
  }
}
.gallery {
  padding: 1vw;
  display: grid;
  grid-auto-flow: row dense;
  grid-gap: 1vw;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
}
.gallery figure {
  position: relative;
  overflow: hidden;
  box-shadow: 2px 3px 6px #00000040;
  border-radius: 3px;
  outline: 1px solid #FFFFFF00;
  transition: transform 200ms ease-in-out;
}
.gallery figure:hover {
  z-index: 2;
  transform: scale(1.025);
}
.gallery figure figcaption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 0.2em 0.4em 0.2em;
  transform: translateY(101%);
  transition: transform 200ms ease-in-out;
}
.gallery figure:hover figcaption {
  transform: translateY(0);
}
.gallery figure img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1);
  transition: transform 1200ms ease-in-out, filter 240ms ease-in-out, object-position 1200ms ease-in-out;
  transition: transform 1200ms ease-in-out, filter 240ms ease-in-out, object-position 1200ms ease-in-out, -o-object-position 1200ms ease-in-out;
}
.gallery figure:hover img {
  transform: scale(1.05) rotate(-2deg);
  filter: blur(4px) brightness(0.3);
  -o-object-position: 60% 40%;
     object-position: 60% 40%;
}

@media screen and (min-width: 480px) {
  html {
    font-size: 18px;
  }

  .gallery .intro {
    grid-area: span 2/span 2;
  }
  .gallery figure:nth-child(3n) {
    grid-area: span 2/span 1;
  }
  .gallery figure:nth-child(5n) {
    grid-area: span 1/span 2;
  }
}
@media screen and (min-width: 960px) {
  html {
    font-size: 20px;
  }

  .gallery .intro {
    grid-area: span 2/span 3;
  }
  .gallery figure:nth-child(7n) {
    grid-area: span 2/span 2;
  }
  .gallery figure:nth-child(11n) {
    grid-area: span 3/span 2;
  }
  .gallery figure:nth-child(13n) {
    grid-area: span 2/span 3;
  }
}
@media screen and (min-width: 1440px) {
  html {
    font-size: 24px;
  }

  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 250px;
  }
}
.intro {
  background-color: #000;
  color: #fff;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
}
.intro h1 {
  font-size: 2.5rem;
  font-weight: 700;
}
</style>
</head>
<body>
<section class="gallery grid-gallery">
  <div class="intro"> 
    <h1>Grid Gallery</h1>
    <p>CSS Grid Layout</p>
  </div>
  <figure class="image-1"><a href="https://picsum.photos/1600/1200/?1" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?1"/>
      <figcaption>Image β„–1</figcaption></a></figure>
  <figure class="image-2"><a href="https://picsum.photos/1600/1200/?2" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?2"/>
      <figcaption>Image β„–2</figcaption></a></figure>
  <figure class="image-3"><a href="https://picsum.photos/1600/1200/?3" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?3"/>
      <figcaption>Image β„–3</figcaption></a></figure>
  <figure class="image-4"><a href="https://picsum.photos/1600/1200/?4" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?4"/>
      <figcaption>Image β„–4</figcaption></a></figure>
  <figure class="image-5"><a href="https://picsum.photos/1600/1200/?5" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?5"/>
      <figcaption>Image β„–5</figcaption></a></figure>
  <figure class="image-6"><a href="https://picsum.photos/1600/1200/?6" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?6"/>
      <figcaption>Image β„–6</figcaption></a></figure>
  <figure class="image-7"><a href="https://picsum.photos/1600/1200/?7" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?7"/>
      <figcaption>Image β„–7</figcaption></a></figure>
  <figure class="image-8"><a href="https://picsum.photos/1600/1200/?8" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?8"/>
      <figcaption>Image β„–8</figcaption></a></figure>
  <figure class="image-9"><a href="https://picsum.photos/1600/1200/?9" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?9"/>
      <figcaption>Image β„–9</figcaption></a></figure>
  <figure class="image-10"><a href="https://picsum.photos/1600/1200/?10" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?10"/>
      <figcaption>Image β„–10</figcaption></a></figure>
  <figure class="image-11"><a href="https://picsum.photos/1600/1200/?11" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?11"/>
      <figcaption>Image β„–11</figcaption></a></figure>
  <figure class="image-12"><a href="https://picsum.photos/1600/1200/?12" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?12"/>
      <figcaption>Image β„–12</figcaption></a></figure>
  <figure class="image-13"><a href="https://picsum.photos/1600/1200/?13" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?13"/>
      <figcaption>Image β„–13</figcaption></a></figure>
  <figure class="image-14"><a href="https://picsum.photos/1600/1200/?14" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?14"/>
      <figcaption>Image β„–14</figcaption></a></figure>
  <figure class="image-15"><a href="https://picsum.photos/1600/1200/?15" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?15"/>
      <figcaption>Image β„–15</figcaption></a></figure>
  <figure class="image-16"><a href="https://picsum.photos/1600/1200/?16" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?16"/>
      <figcaption>Image β„–16</figcaption></a></figure>
  <figure class="image-17"><a href="https://picsum.photos/1600/1200/?17" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?17"/>
      <figcaption>Image β„–17</figcaption></a></figure>
  <figure class="image-18"><a href="https://picsum.photos/1600/1200/?18" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?18"/>
      <figcaption>Image β„–18</figcaption></a></figure>
  <figure class="image-19"><a href="https://picsum.photos/1600/1200/?19" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?19"/>
      <figcaption>Image β„–19</figcaption></a></figure>
  <figure class="image-20"><a href="https://picsum.photos/1600/1200/?20" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?20"/>
      <figcaption>Image β„–20</figcaption></a></figure>
  <figure class="image-21"><a href="https://picsum.photos/1600/1200/?21" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?21"/>
      <figcaption>Image β„–21</figcaption></a></figure>
  <figure class="image-22"><a href="https://picsum.photos/1600/1200/?22" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?22"/>
      <figcaption>Image β„–22</figcaption></a></figure>
  <figure class="image-23"><a href="https://picsum.photos/1600/1200/?23" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?23"/>
      <figcaption>Image β„–23</figcaption></a></figure>
  <figure class="image-24"><a href="https://picsum.photos/1600/1200/?24" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?24"/>
      <figcaption>Image β„–24</figcaption></a></figure>
  <figure class="image-25"><a href="https://picsum.photos/1600/1200/?25" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?25"/>
      <figcaption>Image β„–25</figcaption></a></figure>
  <figure class="image-26"><a href="https://picsum.photos/1600/1200/?26" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?26"/>
      <figcaption>Image β„–26</figcaption></a></figure>
  <figure class="image-27"><a href="https://picsum.photos/1600/1200/?27" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?27"/>
      <figcaption>Image β„–27</figcaption></a></figure>
  <figure class="image-28"><a href="https://picsum.photos/1600/1200/?28" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?28"/>
      <figcaption>Image β„–28</figcaption></a></figure>
  <figure class="image-29"><a href="https://picsum.photos/1600/1200/?29" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?29"/>
      <figcaption>Image β„–29</figcaption></a></figure>
  <figure class="image-30"><a href="https://picsum.photos/1600/1200/?30" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?30"/>
      <figcaption>Image β„–30</figcaption></a></figure>
  <figure class="image-31"><a href="https://picsum.photos/1600/1200/?31" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?31"/>
      <figcaption>Image β„–31</figcaption></a></figure>
  <figure class="image-32"><a href="https://picsum.photos/1600/1200/?32" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?32"/>
      <figcaption>Image β„–32</figcaption></a></figure>
  <figure class="image-33"><a href="https://picsum.photos/1600/1200/?33" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?33"/>
      <figcaption>Image β„–33</figcaption></a></figure>
  <figure class="image-34"><a href="https://picsum.photos/1600/1200/?34" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?34"/>
      <figcaption>Image β„–34</figcaption></a></figure>
  <figure class="image-35"><a href="https://picsum.photos/1600/1200/?35" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?35"/>
      <figcaption>Image β„–35</figcaption></a></figure>
  <figure class="image-36"><a href="https://picsum.photos/1600/1200/?36" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?36"/>
      <figcaption>Image β„–36</figcaption></a></figure>
  <figure class="image-37"><a href="https://picsum.photos/1600/1200/?37" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?37"/>
      <figcaption>Image β„–37</figcaption></a></figure>
  <figure class="image-38"><a href="https://picsum.photos/1600/1200/?38" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?38"/>
      <figcaption>Image β„–38</figcaption></a></figure>
  <figure class="image-39"><a href="https://picsum.photos/1600/1200/?39" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?39"/>
      <figcaption>Image β„–39</figcaption></a></figure>
  <figure class="image-40"><a href="https://picsum.photos/1600/1200/?40" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?40"/>
      <figcaption>Image β„–40</figcaption></a></figure>
  <figure class="image-41"><a href="https://picsum.photos/1600/1200/?41" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?41"/>
      <figcaption>Image β„–41</figcaption></a></figure>
  <figure class="image-42"><a href="https://picsum.photos/1600/1200/?42" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?42"/>
      <figcaption>Image β„–42</figcaption></a></figure>
  <figure class="image-43"><a href="https://picsum.photos/1600/1200/?43" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?43"/>
      <figcaption>Image β„–43</figcaption></a></figure>
  <figure class="image-44"><a href="https://picsum.photos/1600/1200/?44" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?44"/>
      <figcaption>Image β„–44</figcaption></a></figure>
  <figure class="image-45"><a href="https://picsum.photos/1600/1200/?45" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?45"/>
      <figcaption>Image β„–45</figcaption></a></figure>
  <figure class="image-46"><a href="https://picsum.photos/1600/1200/?46" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?46"/>
      <figcaption>Image β„–46</figcaption></a></figure>
  <figure class="image-47"><a href="https://picsum.photos/1600/1200/?47" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?47"/>
      <figcaption>Image β„–47</figcaption></a></figure>
  <figure class="image-48"><a href="https://picsum.photos/1600/1200/?48" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?48"/>
      <figcaption>Image β„–48</figcaption></a></figure>
  <figure class="image-49"><a href="https://picsum.photos/1600/1200/?49" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?49"/>
      <figcaption>Image β„–49</figcaption></a></figure>
  <figure class="image-50"><a href="https://picsum.photos/1600/1200/?50" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?50"/>
      <figcaption>Image β„–50</figcaption></a></figure>
  <figure class="image-51"><a href="https://picsum.photos/1600/1200/?51" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?51"/>
      <figcaption>Image β„–51</figcaption></a></figure>
  <figure class="image-52"><a href="https://picsum.photos/1600/1200/?52" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?52"/>
      <figcaption>Image β„–52</figcaption></a></figure>
  <figure class="image-53"><a href="https://picsum.photos/1600/1200/?53" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?53"/>
      <figcaption>Image β„–53</figcaption></a></figure>
  <figure class="image-54"><a href="https://picsum.photos/1600/1200/?54" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?54"/>
      <figcaption>Image β„–54</figcaption></a></figure>
  <figure class="image-55"><a href="https://picsum.photos/1600/1200/?55" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?55"/>
      <figcaption>Image β„–55</figcaption></a></figure>
  <figure class="image-56"><a href="https://picsum.photos/1600/1200/?56" data-featherlight="image"><img src="https://picsum.photos/1600/1200/?56"/>
      <figcaption>Image β„–56</figcaption></a></figure>
</section>
<section class="warning">
  <p class="huge-type">⚠️</p>
  <p>Your browser does not support CSS Grid.</p>
  <p>  <a href="https://caniuse.com/#feat=css-grid" target="_blank">CSS Grid Layout on "caniuse.com"</a></p>
</section>
<div id="lightbox"></div>
  
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/release/featherlight.min.js'></script>

</body>
</html>

3. By Morten Rand-Hendriksen

Made by Morten Rand-Hendriksen. Stacked CSS Grid layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

body {
  margin: 0;
	font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

p {
	margin-bottom: 1.5em;
}

b,
strong {
	font-weight: bold;
}

em,
i {
	font-style: italic;
}

figure {
	margin: 0;
	padding: 0;
}


/*--------------------------------------------------------------
General styling
--------------------------------------------------------------*/

h1,
h2,
h3 {
	text-align: center;
	margin: 0;
	padding: 1em 0;
}

p {
	margin: 0;
	padding: 1em 0;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


/* Promo section */

.logo,
.site-title {
	text-align: center;
}

.logo {
  margin-top: .3em;
	font-size: 6em;
}

.site-title {
	margin-top: -1em;
	margin-bottom: 2em;
}

/* Splash section */

.splash {
	background: #FFF6E5;
	padding-bottom: 2em;
}

.splash-content {
	padding: 1.5em;
}

@media screen and (min-width: 600px) {
	.splash-text {
		columns: 2;
		column-gap: 2em;
	}

	.splash-text p {
		padding-top: 0;
	}
}

/* Buckets section */

.buckets {
	padding: 2em 1em 1em;
	background: #3E454C;
}

.buckets ul {
	margin: 0;
	padding: 0;
}

.buckets li {
	margin-bottom: 1em;
	background: white;
	list-style-type: none;
}

.bucket {
	padding: 1.5em;
}

/* More section */

.more {
	padding: 2em;
}

.more-content {
	padding: 1.5em;
}

/* Twins section */

.sidebar {
	background: hsl(0, 0%, 90%);
}

.twin {
	padding: 2em;
	background: #2185C5;
	color: white;
}

.twin:last-of-type {
	background: #FF7F66;
}

.content-title {
  padding: .5em;
}

/* Colophon section */
.colophon {
	padding: 2em;
	background: hsl(0, 0%, 10%);
	color: white;
	text-align: center;
}

.colophon a {
	color: white;
}

.colophon a:hover,
.colophon a:focus {
	border-bottom: 1px solid white;
}


/*--------------------------------------------------------------
Use flex to create a three-bucket layout
--------------------------------------------------------------*/

@media screen and (min-width: 700px) {
	@supports (display: flex) {

		.buckets ul {
			display: flex;
			justify-content: space-around;
		}

		.buckets li {
			width: 48%;
		}

	}
}

/*--------------------------------------------------------------
Basic responsive layout for all browsers:
--------------------------------------------------------------*/

.site {
	max-width: 50em;
	margin: 0 auto;
}

/*--------------------------------------------------------------
CSS Grid layout for modern browsers:
--------------------------------------------------------------*/

@supports (grid-area: auto) {

	@media screen and (min-width: 50em) {

		.site {
			max-width: none;
			display: grid;
			grid-template-columns: 15em auto;
		}

		.masthead {
			grid-column: 1/3;
		}

		.main-area {
			grid-column: 2/3;
		}

		.sidebar {
			grid-column: 1/2;
			grid-row: 2/4;
		}

		.colophon {
			grid-column: 1/3;
		}

	}

	@media screen and (min-width: 65em) {

		.site {
			grid-template-columns: 15em auto 15em;
		}

		.masthead {
			grid-column: 1/4;
		}

		.sidebar {
			display: inherit;
			grid-template-columns: inherit;
			grid-column: 1/4;
			grid-row: 2/3;
		}

		.twin:last-of-type {
			grid-column: 3/4;
		}

		.main-area {
			grid-row: 2;
			z-index: 1;
		}

		.colophon {
			grid-column: 1/4;
		}
	}

}
</style>
</head>
<body>
  <div class="site">
  <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

  <header class="masthead">
    <div class="logo">GRID PILE</div>
    <h2 class="site-title">Stacked CSS Grid Effect</h2>
  </header><!-- .masthead -->

  <main id="content" class="main-area">
    <figure class="feature">
      <img src="https://source.unsplash.com/w3lQVmuK8fw/1200x600" alt="Fox.">
    </figure>
    <section class="splash">
      <div class="splash-content">
        <h2 class="content-title">Magical content restructuring with CSS Grid stacks</h2>
        <div class="splash-text">
          <p>Pulse</a>.</p>
        </div><!-- .splash-text -->
      </div><!-- .splash-content -->
    </section><!-- .splash -->

    <section class="buckets">
      <ul>
        <li>
          <img src="https://source.unsplash.com/KUfkX6gVwBU/600x400" alt="Fog over Oslo.">
          <div class="bucket">
            <h3 class="bucket-title">Grid is great</h3>
            <p>Duh</p>
          </div><!-- .bucket -->
        </li>
        <li>
          <img src="https://source.unsplash.com/1jKjJjGgDG8/600x400" alt="Sunset over the Oslo fjord.">
          <div class="bucket">
            <h3 class="bucket-title">Flex is great too</h3>
            <p>Maybe</p>
          </div><!-- .bucket -->
        </li>
      </ul>
    </section><!-- .buckets -->

    <section class="more">
      <div class="more-content">
        <h2 class="content-title">Subgrid could be nice here</h2>
        <p>opportunities?<p>
      </div><!-- .more-content -->
    </section><!-- .more -->

  </main>

  <aside class="sidebar">
    <div class="twin">
      <h2 class="content-title">First Sidebar Item</h2>
      <p>text <code>aside</code> element <code>main</code> ereens <code>main</code>sidebar.</p>
    </div>
    <div class="twin">
      <h2 class="content-title">Second Sidebar Item</h2>
      <p>text<code>aside</code>text.</p>
    </div>
  </aside><!-- .sidebar -->

  <footer class="colophon">
    <aside>All photos: <a href="https://unsplash.com/@andozo" target="_blank" rel="nofollow">Andreas RΓΈnningen</a>.</aside>
    <aside>Content, layout, design: <a href="https://twitter.com/mor10" target="_blank" rel="nofollow">Morten Rand-Hendriksen</a>.</aside>
  </footer>
  
</div><!-- .site -->
</body>
</html>

4. By Corne Bezuidenhout

Made by Corne Bezuidenhout. Responsive website with only HTML & CSS Grid. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
<style>
/* NOTE:
 * Grid layout stuff starts at line 224. 
 * The stuff before is just boring old CSS to make content look not crappy.
 */

/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 1em 0;
}

p {
	margin: 0;
	padding: 1em 0;
}

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/

.masthead {
  padding: 2em;
  background: #272427;
  text-align: center;
}

.masthead img {
  width: 180px;
  margin: 0 auto;
}

.site-title {
  margin: 1em 0 0;
  padding: 0;
  font-size: 1.5625em;
  font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #c96;
}

.site-description {  
  margin: 0 0 1em;
  padding: 0;
  font-size: 1em;
  font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-weight: 400;
  color: hsla(0,0%,100%,.6);
}

.page-title {
  text-align: center;
  background-image: url(https://2017.europe.wordcamp.org/files/2017/01/background-pattern-01.png);
  background-color: #f5ebe0
}

.main-content {
	background: white;
  padding: 2em;
}

.schedule-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.schedule-list li {
  margin: .5em 0;
  padding: 1em 0;
  border-bottom: 1px dotted black;
}

.schedule-list li:last-child {
  border-bottom: none;
}

.talk-title {
  margin: 0;
  padding: 0;
  line-height: 1.3em;
}

.talk-speaker {
  margin: .5em 0;
  padding: 0;
}

.talk-time {
  margin: .5em 0;
  padding: 0;
  font-weight: bold;
}

.sidebar {
  background: #272427;
}

.info {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: white;
}

.info li {
  padding: 1em;
  text-align: center;
}

.a11y {
  color: #272427;
  background: #f1e4d5;
}

.coc {
  background: #e7ab46;
}

.contact {
  background: #68470d;
}

.faq {
  background: #cc9966;
}

.colophon {
	padding: 1em 2em;
  background: #272427;
	color: white;
}

.colophon a {
	color: white;
}

.colophon a:hover,
.colophon a:focus {
	border-bottom: 1px solid white;
}

/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	.page-title,
  .main-content,
  .sidebar {
		max-width: 50em;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@supports (display: grid) {
  @media screen and (min-width: 800px) {
    
  	.site {
			display: grid;
			grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr 3fr;
      grid-template-areas:
        "content-head content-head"
        "main header"
        "main sidebar"
        "footer footer";
		}
    
    .masthead {
      grid-area: header;
    }
    
    .page-title {
      grid-area: content-head;
    }
    
    .main-content {
      grid-area: main;
    }
    
    .sidebar {
      grid-area: sidebar;
    }
		
    .colophon {
      grid-area: footer;
    }
    
	}
  
  @media screen and (min-width: 1200px) {
    .site {
			grid-template-columns: 2fr 1fr 1fr;
      grid-template-areas:
        "content-head content-head content-head"
        "main header header"
        "main sidebar footer";
		}
  }
}
</style>
</head>
<body>
  <div class="site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <header class="masthead">
      <img src="https://2017.europe.wordcamp.org/files/2017/03/logo-wceu17-symbol.png">
        <p class="site-title">WordCamp Europe 2017</p>
      <p class="site-description">June 15-17, Paris, France | #WCEU</p>
    </header><!-- .masthead -->
  
  <h1 class="page-title">Saturday, June 17th</h1>

    <main id="content" class="main-content">
        <ul class="schedule-list">
          <li>
            <h2 class="talk-title">CSS Grid Changes Everything (About Web Layouts)</h2>
            <p class="talk-speaker">Morten Rand-Hendriksen</p>
            <p class="talk-time">9:00 am</p>
          </li>
          <li>
            <h2 class="talk-title">Using WordPress for Good</h2>
            <p class="talk-speaker">Sasha Endoh</p>
            <p class="talk-time">10:00 am</p>
          </li>
          <li>
            <h2 class="talk-title">Accessibility in the Age of the Headless CMS</h2>
            <p class="talk-speaker">Rian Rietveld</p>
            <p class="talk-time">11:00 am</p>
          </li>
          <li>
            <h2 class="talk-title">Selfish Accessibility</h2>
            <p class="talk-speaker">Adrian Roselli</p>
            <p class="talk-time">12:00 pm</p>
          </li>
          <li class="lunch">
            <h2 class="talk-title">Lunch</h2>
            <p class="talk-time">1:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Lightning Talks - Inspire</h2>
            <p class="talk-speaker">Thabo Tswana, Marco Calicchia, Alice Orru, Tom Greenwood</p>
            <p class="talk-time">2:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Interview and Q&amp;A with Matt Mullenweg</h2>
            <p class="talk-speaker">Matt Mullenweg and Om Malik</p>
            <p class="talk-time">3:00 pm</p>    <li>
            <h2 class="talk-title">Reacting Natively with WordPress</h2>
            <p class="talk-speaker">Pirate Dunbar</p>
            <p class="talk-time">4:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Data Visualization with the REST API</h2>
            <p class="talk-speaker">K. Adam White</p>
            <p class="talk-time">5:00 pm</p>
          </li>
          <li>
            <h2 class="talk-title">Closing Remarks</h2>
            <p class="talk-speaker">Paolo Belcastro</p>
            <p class="talk-time">6:00 pm</p>
          </li>
      </ul>
    </main>

    <aside class="sidebar">
      <ul class="info">
        <li class="a11y">
          <h2 class="info-heading">Accessibility and Inclusivity</h2>
        </li>
        <li class="coc">
          <h2 class="info-heading">Code of Conduct</h2>
        </li>
        <li class="contact">
          <h2 class="info-heading">Contact</h2>
        </li>
        <li class="faq">
          <h2 class="info-heading">Frequently Asked Questions</h2>
        </li>
      </ul>
    </aside>

    
    <footer class="colophon">
      <h2>Location:</h2>
      <address>Les Docks de Paris <br />
        87 avenue des Magasins GΓ©nΓ©raux <br />
        93300 Aubervilliers <br />
        France
      </address>
    </footer>

</div>
</body>
</html>

5. By Brian Haferkamp

Made by Brian Haferkamp. Tiled Design Using CSS Grid, it also has a working menu, product card and slider. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Pragati+Narrow|Roboto" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'>
  
<style>
@charset "UTF-8";
body {
  margin: 0;
  font-family: "Pragati Narrow", sans-serif;
}

.page-wrapper {
  max-width: 425px;
  margin: auto;
  position: relative;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px) 1fr;
  align-content: stretch;
  height: 90vh;
}

.grid-item {
  position: relative;
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-item p {
  margin: 0;
}
.grid-item:nth-child(1) {
  grid-column: 2/span 3;
  grid-row: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://unsplash.it/1500?image=479);
  background-color: blue;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: right;
}
.grid-item:nth-child(5) {
  background-color: black;
}
.grid-item:nth-child(2) {
  background-color: black;
  color: white;
}
.grid-item:nth-child(3) {
  background-color: rgba(0, 0, 255, 0.7);
  color: white;
}
.grid-item:nth-child(4) {
  grid-column: 1/span 4;
  grid-row: 2/span 2;
  background-color: orange;
  background-image: linear-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3)), url(https://unsplash.it/1500?image=1068);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 1rem;
}
.grid-item:nth-child(6) {
  grid-column: 1/span 2;
  grid-row: 4/span all;
  background-color: pink;
  background-image: url(https://unsplash.it/1500?image=1027);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-items: flex-end;
  padding: 1rem;
}
.grid-item:nth-child(7) {
  grid-column: 3/span 2;
  grid-row: 4/-1;
  background-color: pink;
  background-image: url(https://unsplash.it/1500?image=580);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.grid-item:nth-child(8) {
  background-color: rgba(255, 255, 255, 0.3);
  grid-column: 4/span 1;
  grid-row: 1;
  height: 40px;
  width: 40px;
  justify-self: end;
}

.icon-menu,
.icon-shop {
  font-size: 1.5rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  color: white;
}

.icon-shop {
  font-size: 1.2rem;
}

.icon-logo {
  font-size: 1.4rem;
  color: white;
}

.go-link {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 1.5rem;
  border: 1px solid white;
  text-align: center;
  color: white;
}

.tile-heading {
  font-weight: 400;
  font-size: 1.2rem;
  margin: 0;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.tile-text {
  font-size: 0.9rem;
  line-height: 1;
}

.nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  max-width: 425px;
}
.nav ul {
  list-style: none;
  padding: 0;
}
.nav ul a {
  font-size: 1.5rem;
  text-decoration: none;
  color: white;
}
.nav ul li {
  padding: 1rem 0;
}
.nav ul .icon-apple {
  text-align: center;
  font-size: 3rem;
}

.icon-menu-close {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: white;
  z-index: 100;
}

.hide {
  display: none;
}

.page {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  background: white;
  max-width: 425px;
}
.page img {
  width: 100%;
}

.page-inner {
  padding: 1rem;
  margin-bottom: 3rem;
}

.page-intro {
  line-height: 1.2;
}

.shop-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

.shop-item {
  margin-bottom: 2rem;
}
.shop-item img {
  width: 100%;
}

.shop-item-header {
  margin: 0;
}

.shop-item-price {
  font-size: 1.5rem;
}

.shop-item-summary {
  line-height: 1.2;
  margin: 0.5rem 0 2rem;
}

.shop-item-button {
  border: 1px solid black;
  background-color: transparent;
  padding: 0.7rem 1rem;
  width: 100%;
}

.accordion-heading {
  font-size: 1.2rem;
}

details[open] summary::before {
  transform: rotate(90deg);
}
details[open] summary {
  outline: 1px solid #ccc;
}

summary {
  display: block;
  outline: none;
  padding: 0 0.3rem;
}
summary::-webkit-details-marker {
  display: none;
}
summary:before {
  display: inline-block;
  content: "β€Ί";
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 1.2rem;
}

.fade-in {
  -webkit-animation: fadeIn 300ms ease;
          animation: fadeIn 300ms ease;
  opacity: 1;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.featured-headline {
  line-height: 1.2;
}

.featured-article {
  line-height: 1.3;
}

.featured-image-strip {
  margin: 2rem 0 0;
}

.featured-image-strip-inner {
  display: flex;
  width: 100%;
  overflow-x: auto;
}
.featured-image-strip-inner img {
  height: 100%;
}

.direction-arrows {
  text-align: right;
  margin: 0;
  font-size: 1.5rem;
  color: #ccc;
}

.icon-page-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  margin: 0;
  font-size: 1.5rem;
  width: auto;
  color: black;
  z-index: 100;
}

.bottom-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  margin: 0;
  z-index: 100;
}

.fullscreen {
  color: black;
}
.fullscreen p {
  margin: 0;
}
</style>
</head>
<body>
  <div class="page-wrapper">
  <div class="toolbar">       </div>
  <div class="grid-wrapper">
    <div class="grid-item">
      <div class="grid-item-inner">
        <h3 class="tile-heading">Lorem ipsum dolor</h3>
      </div>
    </div>
    <div class="grid-item logo"><a href="#">
        <p class="icon-logo"><i class="zmdi zmdi-apple"></i></p></a></div>
    <div class="grid-item"><a href="#">
        <p class="icon-shop"><i class="zmdi zmdi-shopping-basket"></i></p></a></div>
    <div class="grid-item article-link" data-tab="article-1">
      <div class="grid-item-inner">
        <h3 class="tile-heading">Lorem ipsum dolor</h3>
        <p class="tile-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum exercitationem tenetur accusamus suscipit neque ea necessitatibus nostrum earum commodi id </p><a class="go-link" href="#">
          <p class="icon-go"><i class="zmdi zmdi-arrow-right"></i></p></a>
      </div>
    </div>
    <div class="grid-item"><a href="#">
        <p class="icon-menu"><i class="zmdi zmdi-menu"></i></p></a></div>
    <div class="grid-item article-link" data-tab="article-2">
      <div class="grid-item-inner">
        <p class="tile-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
      </div>
    </div>
    <div class="grid-item"></div>
    <div class="grid-item"><a class="fullscreen grid-item-inner" href="#">
        <p class="icon-fullscreen"><i class="zmdi zmdi-arrow-right-top"></i></p>
        <p class="icon-exit-fullscreen hide"><i class="zmdi zmdi-arrow-left-bottom"></i></p></a></div>
  </div>
  <nav class="nav hide">
    <div class="nav-inner"><a href="#">
        <p class="icon-menu-close"><i class="zmdi zmdi-close"></i></p></a>
      <ul>
        <li class="icon-apple"><i class="zmdi zmdi-apple"></i></li><a href="#" data-tab="shop">
          <li>Shop</li></a><a href="#">
          <li>Link 2</li></a><a href="#">
          <li>Link 3</li></a>
      </ul>
    </div>
  </nav>
  <section class="page hide" id="shop">
    <div class="page-inner">
      <header>
        <h2>Shop</h2>
      </header>
      <section class="shop-wrapper">
        <div class="shop-item"><img src="https://placehold.it/800x1200"/>
          <p class="shop-item-price">$13.99</p>
          <h4 class="shop-item-header">Lorem ipsum dolor</h4>
          <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
          <button class="shop-item-button">Purchase</button>
        </div>
        <div class="shop-item"><img src="https://placehold.it/800x1200"/>
          <p class="shop-item-price">$9.99</p>
          <h4 class="shop-item-header">Lorem ipsum dolor</h4>
          <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
          <button class="shop-item-button">Purchase</button>
        </div>
        <div class="shop-item"><img src="https://placehold.it/800x1200"/>
          <p class="shop-item-price">$20.99</p>
          <h4 class="shop-item-header">Lorem ipsum dolor</h4>
          <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
          <button class="shop-item-button">Purchase</button>
        </div>
        <div class="shop-item"><img src="https://placehold.it/800x1200"/>
          <p class="shop-item-price">$2.99</p>
          <h4 class="shop-item-header">Lorem ipsum dolor</h4>
          <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
          <button class="shop-item-button">Purchase</button>
        </div>
        <div class="shop-item"><img src="https://placehold.it/800x1200"/>
          <p class="shop-item-price">$99.99</p>
          <h4 class="shop-item-header">Lorem ipsum dolor</h4>
          <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
          <button class="shop-item-button">Purchase</button>
        </div>
        <div class="shop-item"><img src="https://placehold.it/800x1200"/>
          <p class="shop-item-price">$139.99</p>
          <h4 class="shop-item-header">Lorem ipsum dolor</h4>
          <p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
          <button class="shop-item-button">Purchase</button>
        </div>
      </section>
    </div>
  </section>
  <section class="page hide" id="about">
    <div class="page-inner">
      <header>
        <h2>About</h2>
      </header>
      <article>
        <p class="page-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quam, asperiores in sapiente labore, harum quis quidem quo ratione illo magnam illum eum corporis, ipsam sunt numquam iste unde earum. Excepturi repellendus dignissimos accusamus, nobis harum reprehenderit tempora placeat similique ipsam minima nisi labore magni id, cum voluptatem praesentium, reiciendis.</p>
      </article>
      <section class="accordion">
        <details role="group"> 
          <summary class="accordion-heading">Contact Info</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
        </details>
        <details role="group"> 
          <summary class="accordion-heading">Apple and the Environment</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
        </details>
        <details role="group"> 
          <summary class="accordion-heading">Newsroom</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
        </details>
        <details role="group"> 
          <summary class="accordion-heading">Supplier Responsibility</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
        </details>
        <details role="group"> 
          <summary class="accordion-heading">Apple Job Creation</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
        </details>
      </section>
    </div>
  </section>
  <article class="page hide" id="article-1">
    <header><img class="featured-image" src="https://unsplash.it/1500?image=1068"/></header>
    <div class="page-inner">
      <h2 class="featured-headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio</h2>
      <article class="featured-article">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
        <div class="featured-image-strip">
          <div class="featured-image-strip-inner"><img src="https://unsplash.it/1500?image=479"/><img src="https://unsplash.it/1500?image=447"/><img src="https://unsplash.it/1500?image=434"/></div>
          <p class="direction-arrows"><i class="zmdi zmdi-swap"></i></p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
      </article>
    </div>
  </article>
  <article class="page hide" id="article-2">
    <header><img class="featured-image" src="https://unsplash.it/1500?image=1027"/></header>
    <div class="page-inner">
      <h2 class="featured-headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio</h2>
      <article class="featured-article">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
        <div class="featured-image-strip">
          <div class="featured-image-strip-inner"><img src="https://unsplash.it/1500?image=424"/><img src="https://unsplash.it/1500?image=407"/><img src="https://unsplash.it/1500?image=375"/><img src="https://unsplash.it/1500?image=365"/><img src="https://unsplash.it/1500?image=257"/></div>
          <p class="direction-arrows"><i class="zmdi zmdi-swap"></i></p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
      </article>
    </div>
  </article><a class="page-close" href="#">
    <p class="icon-page-close hide"><i class="zmdi zmdi-close"></i></p></a>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script id="rendered-js" >
// Launch fullscreen
function launchIntoFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

$('.icon-fullscreen').on('click', function () {
  $(this).addClass('hide');
  launchIntoFullscreen(document.documentElement);
  $('.icon-exit-fullscreen').removeClass('hide');
  $('.grid-wrapper').css({
    'height': '100vh' });

});


// Exit fullscreen
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

$('.icon-exit-fullscreen').on('click', function () {
  $(this).addClass('hide');
  exitFullscreen(document.documentElement);
  $('.icon-fullscreen').removeClass('hide');
  $('.grid-wrapper').css({
    'height': '90vh' });

});


$('.icon-menu').on('click', function () {
  $('.nav').removeClass('hide').addClass('fade-in');
  $('.icon-page-close').removeClass('hide');
});

$('.icon-menu-close').on('click', function () {
  $('.nav').addClass('hide').removeClass('fade-in');
  $('.icon-page-close').addClass('hide');
});

$('.icon-shop').on('click', function () {
  $('#shop').removeClass('hide').addClass('fade-in');
  $('.icon-page-close').removeClass('hide');
});

$('.logo').on('click', function () {
  $('#about').removeClass('hide').addClass('fade-in');
  $('.icon-page-close').removeClass('hide');
});

$('.icon-page-close').on('click', function () {
  $('.page, .icon-page-close').addClass('hide');
});

// menu links

$('.nav a').on('click', function () {
  var tabID = $(this).attr('data-tab');
  $('.icon-page-close, #' + tabID).removeClass('hide');
  $('.nav').addClass('hide');
});

// article links

$('.article-link').on('click', function () {
  var tabID = $(this).attr('data-tab');
  $('.icon-page-close, #' + tabID).removeClass('hide').addClass('fade-in');
});
    </script>
</body>
</html>

6. By Varun Vachhar

Made by Varun Vachhar. Image Grid Layout with hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - CSS Grid - Collections | Vinyl</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.6.2/tachyons.min.css'>
  
<style>
.grid { display: grid; }

.layout {
  grid-template-columns: repeat(auto-fill, 12.5vw);
  grid-auto-rows: 12.5vw;
  grid-auto-flow: dense;
}

/**
 * Col and row spans
 */
.span-1 { grid-column-end: span 1; }
.span-2 { grid-column-end: span 2; }
.span-3 { grid-column-end: span 3; }
.span-4 { grid-column-end: span 4; }

.tall-1 { grid-row-end: span 1; }
.tall-2 { grid-row-end: span 2; }
.tall-3 { grid-row-end: span 3; }
.tall-4 { grid-row-end: span 4; }
</style>
</head>
<body>
  <main>
  <article class="grid layout">

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/BEYONCÉ-Beyonce/dp/B00KCOMBJC/ref=sr_1_2_twi_lp__3?s=music&ie=UTF8&qid=1480422067&sr=1-2&keywords=beyonce&tag=mrmrs01-20">
      <div role="img" aria-label="BeyoncΓ©"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/beyonce.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/99-9-KAYTRANADA/dp/B01D9DBNX2/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422105&sr=1-1&keywords=kaytranada+vinyl&tag=mrmrs01-20">
      <div role="img" aria-label="Kaytranada"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/kaytranada.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/Woman-2LP-Set-Full-Album/dp/B01LX3E0ET/ref=sr_1_1?s=music&ie=UTF8&qid=1480422119&sr=1-1&keywords=justice&tag=mrmrs01-20">
      <div role="img" aria-label="Woman - Justice"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/justice.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/Skin-Flume/dp/B01DD5N35W/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422133&sr=1-1&keywords=flume&tag=mrmrs01-20">
      <div role="img" aria-label="Skin - Flume"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/flume.jpg);"></div>
    </a>

    <a class="db dim span-4 tall-4" href="https://www.amazon.com/Seat-at-Table-Solange/dp/B01LXP7I5N/ref=sr_tnr_p_1_195429011_1_twi_lp__3?s=music&ie=UTF8&qid=1480422087&sr=1-1&keywords=solange+seat+at+the+table&tag=mrmrs01-20" >
      <div role="img" aria-label="Seat at Table Solange"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/solange.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/untitled-unmastered-LP-Kendrick-Lamar/dp/B01DET9BV2/ref=sr_1_3_twi_lp__3?s=music&ie=UTF8&qid=1480370912&sr=1-3&keywords=kendrick+lamar&tag=mrmrs01-20">
      <div role="img"
        aria-label="Untitled Unmastered - Kendrick Lamar"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/untitledunmastered.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/Moon-Shaped-Pool-2-LP-Download/dp/B01FDF12UI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480370971&sr=1-1&keywords=moon+shaped+pool&tag=mrmrs01-20">
      <div role="img" aria-label="Moon Shaped Pool 2"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/moonshapedpool.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/Colour-Anything-2-LP/dp/B01F8674B8/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371036&sr=1-1&keywords=color+in+anything&tag=mrmrs01-20">
      <div role="img" aria-label="Colour Anything 2"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/colouranything.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/Good-Luck-Do-Your-Best/dp/B01C3IHINI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371123&sr=1-1&keywords=good+luck+gold+panda&tag=mrmrs01-20">
      <div role="img" aria-label="Good Luck Do Your Best"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/goldpanda.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/32-Levels-Clams-Casino/dp/B01GU83I4K/ref=sr_1_2_twi_lp__1?s=music&ie=UTF8&qid=1480371183&sr=1-2&keywords=clams+casino&tag=mrmrs01-20">
      <div role="img" aria-label="32 Levels Clams Casino"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/clamscasino.jpg);"></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/Human-Energy-MACHINEDRUM/dp/B01HC7UTBI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371226&sr=1-1&keywords=human+energy&tag=mrmrs01-20">
      <div role="img" aria-label="Human Energy - Machinedrum"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/humanenergy.jpg);"></div>
    </a>

    <a class="db dim span-4 tall-4"
      href="https://www.amazon.com/Malibu-Anderson-Paak/dp/B01BXNXBAS/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422041&sr=1-1&keywords=paak&tag=mrmrs01-20">
      <div role="img" aria-label="Malibu -  Anderson Paak"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/paak.jpg);" ></div>
    </a>

    <a class="db dim span-2 tall-2"
      href="https://www.amazon.com/Danny-Brown-Atrocity-Exhibition-Exclusive/dp/B01M9F0LSQ/ref=sr_1_2?ie=UTF8&qid=1480421198&sr=8-2&keywords=danny+brown+vinyl&tag=mrmrs01-20">
      <div role="img"
        aria-label="Danny Brown Atrocity Exhibition Exclusive"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/dannybrown.jpg);"></div>
    </a>

    <a class="db dim"
      href="https://www.amazon.com/Moodymann-DJ-Kicks-DJ-KICKS/dp/B01AEOM6D0/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371894&sr=1-1&keywords=dj+kicks+moodymann&tag=mrmrs01-20">
      <div role="img" aria-label="Moodymann - DJ Kicks"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/moodyman.jpg);"></div>
    </a>

    <a class="db dim"
      href="https://www.amazon.com/Stranger-Things-Netflix-Original-Soundtrack/dp/B01KA4MVF2/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480423240&sr=1-1&keywords=stranger+things&tag=mrmrs01-20">
      <div role="img"
        aria-label="Stranger Things Netflix Original Soundtrack"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/strangerthings.jpg);"></div>
    </a>

    <a class="db dim"
      href="https://www.amazon.com/How-Be-Human-Being-LP/dp/B01GQ7DIJA/ref=tmm_vnl_swatch_0?_encoding=UTF8&qid=1480421224&sr=8-1&tag=mrmrs01-20">
      <div role="img" aria-label="How Be Human Being LP"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/glassanimals.jpg);"></div>
    </a>

    <a class="db dim"
      href="https://www.amazon.com/22-Million-Bon-Iver/dp/B01KBKVK2K/ref=sr_tnr_p_6_195212011_1_twi_lp__3?s=music&ie=UTF8&qid=1480422776&sr=1-6&tag=mrmrs01-20">
      <div role="img" aria-label="22 Million - Bon Iver"
        class="w-100 h-100 bg-center cover"
        style="background-image:url(//s3-us-west-2.amazonaws.com/s.cdpn.io/149125/boniver.jpg);"></div>
    </a>
  </article>
</main>

<a href="https://github.com/winkerVSbecks/grid-experiments"
   target="_blank"
   class="dib grow f4 pa3 lh-solid fixed bottom-1 right-1">
  <svg class="bg-white ba b--white br-100 dark-gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill-rule="nonzero" fill="currentColor" d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 "></path></svg>
</a>
</body>
</html>

7. By Maxwell Antonucci

Made by Maxwell Antonucci. CSS Staff Grid. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
<style>
.staffgrid {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.staffgrid:after {
  content: "";
  display: block;
  clear: both;
}

.staffgrid__item {
  position: relative;
  float: left;
  width: 100%;
  height: 275px;
  box-sizing: border-box;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  border: 1px solid #0f0f9b;
}
.staffgrid__item:nth-of-type(odd) {
  height: 330px;
}
.staffgrid__item:nth-of-type(3n + 5) {
  height: 247.5px;
}
.staffgrid__item:hover .staffgrid__item-title {
  transition: 0.5s;
  bottom: 0;
}
@media (min-width: 319px) {
  .staffgrid__item {
    width: 50%;
  }
}
@media (min-width: 640px) {
  .staffgrid__item {
    width: 25%;
  }
}

.staffgrid__item-title {
  transition: 0.5s;
  position: absolute;
  right: 0;
  bottom: -100%;
  left: 0;
  padding: 1rem 0.5rem;
  margin: 0;
  color: #05057d;
  text-align: center;
  border-top: 0.5rem solid #05057d;
  background-color: #b9b9ff;
}

.staffgrid__descriptor {
  position: absolute;
  left: 0;
  top: 275px;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  color: #b9b9ff;
  background: #05057d;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
@media (min-width: 640px) {
  .staffgrid__descriptor {
    left: 25%;
    width: 50%;
  }
}
</style>
</head>
<body>
  <div class="staffgrid">
  <div class="staffgrid__descriptor">
    <h1>This is who we are</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci soluta deleniti quisquam veritatis minus reprehenderit doloremque consequuntur porro accusantium reiciendis illo assumenda saepe cupiditate, nam libero et quae nemo. Eaque!</p>
    <p>Mollitia sunt voluptates debitis quaerat, nostrum illum vitae omnis unde fugit numquam tenetur, provident a ipsa ullam animi sint cumque est labore id expedita dolores explicabo culpa aliquid. Labore, veniam.</p>
    <p>Dolorem, magnam magni. Impedit, corrupti, sapiente. Esse atque, praesentium officiis nobis nulla corporis delectus accusamus officia dicta enim vel quia deserunt aliquid ad quod alias, vero velit ut hic eligendi.</p>
  </div><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette3.wikia.nocookie.net/aceattorney/images/b/bd/Phoenix_Wright_Portrait_AA6.png/revision/latest/scale-to-width-down/240?cb=20160407184259)">
    <h3 class="staffgrid__item-title">Phoenix Wright</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(https://vignette.wikia.nocookie.net/aceattorney/images/6/69/Bg_01.png/revision/latest?cb=20160407180220)">
    <h3 class="staffgrid__item-title">Athena Cykes</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette3.wikia.nocookie.net/aceattorney/images/c/c6/Apollo_portrait.png/revision/latest?cb=20160407181832)">
    <h3 class="staffgrid__item-title">Apollo Justice</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette3.wikia.nocookie.net/aceattorney/images/7/70/Trucy_Wright_Portrait.png/revision/latest?cb=20140620171239)">
    <h3 class="staffgrid__item-title">Trucy Wright</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette4.wikia.nocookie.net/aceattorney/images/0/02/Maya_Fey_Portrait_AA6.png/revision/latest/scale-to-width-down/240?cb=20160407182727)">
    <h3 class="staffgrid__item-title">Maya Fey</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette2.wikia.nocookie.net/aceattorney/images/9/96/Ema_AA6_Portrait.png/revision/latest/scale-to-width-down/230?cb=20160407040510)">
    <h3 class="staffgrid__item-title">Ema Skye</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette4.wikia.nocookie.net/aceattorney/images/2/27/Franziska_von_Karma_Portrait.png/revision/latest?cb=20140706175640)">
    <h3 class="staffgrid__item-title">Franziska Von Karma</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette3.wikia.nocookie.net/aceattorney/images/3/38/Godot_Portrait.png/revision/latest?cb=20140622043708)">
    <h3 class="staffgrid__item-title">Diego Armando</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette1.wikia.nocookie.net/aceattorney/images/c/cf/Mia_Fey_Portrait.png/revision/latest/scale-to-width-down/220?cb=20140625121032)">
    <h3 class="staffgrid__item-title">Mia Fey</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette2.wikia.nocookie.net/aceattorney/images/e/ef/Edgyprof.png/revision/latest?cb=20160627075729)">
    <h3 class="staffgrid__item-title">Miles Edgeworth</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette4.wikia.nocookie.net/aceattorney/images/5/5c/Kay_Faraday_Portrait_3.png/revision/latest?cb=20160308054722)">
    <h3 class="staffgrid__item-title">Kay Faraday</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette3.wikia.nocookie.net/aceattorney/images/6/6e/Dick_Gumshoe_Portrait_3.png/revision/latest?cb=20160308054706)">
    <h3 class="staffgrid__item-title">Dick Gumshoe</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette3.wikia.nocookie.net/aceattorney/images/b/be/Pearl_Fey_Portrait.png/revision/latest/scale-to-width-down/220?cb=20140625122748)">
    <h3 class="staffgrid__item-title">Pearl Fey</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette2.wikia.nocookie.net/aceattorney/images/2/2b/Simon_Blackquill_Portrait.png/revision/latest/scale-to-width-down/220?cb=20160626124012)">
    <h3 class="staffgrid__item-title">Simon Blackquil</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette2.wikia.nocookie.net/aceattorney/images/d/dc/Klavier_Gavin_Portrait.png/revision/latest?cb=20140625154035)">
    <h3 class="staffgrid__item-title">Klavier Gavin</h3></a><a class="staffgrid__item" href="javascript:void(0)" style="background-image: url(http://vignette3.wikia.nocookie.net/aceattorney/images/2/21/Sadmadhi_Portrait.png/revision/latest/scale-to-width-down/240?cb=20160407183735)">
    <h3 class="staffgrid__item-title">Nahyuta Sahdmadhi</h3></a>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.1/packery.pkgd.min.js'></script>
      <script id="rendered-js" >
$('.staffgrid').packery({
  itemSelector: '.staffgrid__item',
  stamp: '.staffgrid__descriptor' });
    </script>
</body>
</html>

8. By Sheelah Brennan

Made by Sheelah Brennan. CSS-only animated grid layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
body {
  color: #5A5656;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.row {
  max-width: 1200px;
  margin: 0 auto;
}

h2 {
  font-size: 26px;
  text-transform: uppercase;
}

.service-offerings {
  margin-top: 50px;
  text-align: center;
  overflow: hidden;
  padding-bottom: 100px;
}
.service-offerings i.fa {
  font-size: 55px;
  transition: all 0.5s ease-in-out;
}

li {
  list-style: none;
  font-size: 18px;
}

.service-details {
  padding: 10px 0;
  border-radius: 3px;
}

.services-list {
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.service-category {
  margin-bottom: 100px;
  transition: all 0.5s ease-in-out;
}
.service-category:hover .services-list {
  height: 280px;
  margin-bottom: 0;
}
.service-category:hover i.fa {
  font-size: 80px;
}

.service-details {
  background-color: #a7dbd8;
  padding: 80px;
  text-align: center;
}
</style>
</head>
<body>
  <section class="container service-offerings">
  <div class="row">
    <div class="col-sm-4 service-category">
      <div class="service-details">
        <i class="fa fa-lightbulb-o"></i></p>
        <h2>Strategy</h2>
        <ul class="services-list">
          <li>Marketing strategy and planning</li>
          <li>Content writing</li>
          <li>Search engine optimization</li>
          <li>Social media management</li>
          <li>Advertising</li>
          <li>Email marketing</li>
          <li>Client relationship management</li>
          </ol>
      </div>
    </div>
    <div class="col-sm-4 service-category">
      <div class="service-details">
        <i class="fa fa-pencil"></i></p>
        <h2>Design</h2>
        <ul class="services-list">
          <li>Logo design</li>
          <li>Website design</li>
          <li>Blog design</li>
          <li>Interior design</li>
          <li>Event management design</li>
        </ul>
      </div>
    </div>
    <div class="col-sm-4 service-category">
      <div class="service-details">
        <i class="fa fa-line-chart"></i></p>
        <h2>Maintenance</h2>
        <ul class="services-list">
          <li>Strategy</li>
          <li>Design</li>
        </ul>
      </div>
    </div>
  </div>
</section>
</body>
</html>

9. By Ricardo

Made by Ricardo. Yoshi Grid layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
  align-items: center;
  display: flex;
  height: calc((100vh - 64px) + 64px);
  justify-content: center;
}

section {
  display: grid;
  grid-template-columns: repeat(25, 15px);
  grid-template-rows: repeat(30, 15px);
  gap: 0;
}
section div {
  background-color: white;
  height: 15px;
  width: 15px;
}

.black {
  background-color: #2B2B2A;
}

.red {
  background-color: #FE3217;
}

.brown {
  background-color: #F55300;
}

.brown-light {
  background-color: #FB7F16;
}

.brown-dark {
  background-color: #9D1E00;
}

.skill {
  background-color: #FFB893;
}

.green {
  background-color: #27B204;
}

.green-light {
  background-color: #0FFF1F;
}

.green-dark {
  background-color: #026E00;
}
</style>
</head>
<body>
  <section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="red"></div>
  <div class="brown"></div>
  <div class="brown"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="red"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-dark"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="green-dark"></div>
  <div></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="brown"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div></div>
  <div class="green-light"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="green-light"></div>
  <div class="green-dark"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div></div>
  <div></div>
  <div class="green-light"></div>
  <div class="black"></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="red"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="green-light"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  
 
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="brown-dark"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="skill"></div>
  <div></div>
  <div></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green"></div>
  <div class="black"></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="red"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="black"></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="red"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="green-dark"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="brown-light"></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="brown-light"></div>
  <div class="brown-light"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div class="black"></div>
  <div></div>
  <div class="green-dark"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div></div>
  <div></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div class="black"></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div class="black"></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="green-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 
  <div></div>
  <div class="black"></div>
  <div class="skill"></div>
  <div></div>
  <div class="black"></div>
  <div class="green-dark"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="brown"></div>
  <div class="brown-light"></div>
  <div class="brown-light"></div>
  <div class="black"></div>
  <div class="skill"></div>
  <div class="skill"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 
  <div></div>
  <div></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="brown"></div>
  <div class="brown-light"></div>
  <div class="brown-light"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="brown-light"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="brown-dark"></div>
  <div class="brown-dark"></div>
  <div class="brown"></div>
  <div></div>
  <div class="brown-light"></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="brown"></div>
  <div class="brown-light"></div>
  <div class="brown-light"></div>
  <div></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="brown-dark"></div>
  <div class="brown"></div>
  <div class="brown-light"></div>
  <div class="brown-light"></div>
  <div class="brown-light"></div>
  <div class="black"></div>
  <div class="brown-dark"></div>
  <div class="brown-dark"></div>
  <div class="brown"></div>
  <div class="brown"></div>
  <div class="brown-light"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 
  <div></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
</body>
</html>

10. By kw7oe

Made by kw7oe. Image Gallery Grid Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
* { box-sizing: border-box; }

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-bottom: 1em;	
	cursor: pointer;
}

.grid-item:after {
	position: absolute;
	content: "";
	top: 0; bottom: 0;
	left: 0.5em; right: 0.5em;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	transition: opacity 0.4s ease-in-out;	
}

.grid-item:hover:after {
	opacity: 1;
}

.grid-item .caption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	z-index: 1;
}

.grid-item:hover .caption {
	opacity: 1;
}

.grid-item img {
  display: block;
  max-width: 100%;
	-webkit-filter: grayscale(1);
}

.row {
	margin: 20px auto;
}

h1, h2, p {
	font-family: "Lato";
}

h1 {
	font-weight: 700;
	text-transform: uppercase;
}

a {
	font-weight: 700;
}
</style>
</head>
<body>
  <div class = "container">
	<div class = "row">
		<h1 class = "text-center">Black And White</h1>
	</div>
	 <div class = "grid">
		<div class="grid-sizer"></div>
		<div class = "grid-item">			
			<img src="https://rack.3.mshcdn.com/media/ZgkyMDEzLzA5LzI0L2RkL2JsYWNrX3doaXRlLmMzY2VjLnBuZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/6088aa87/26c/black_white_thumb.jpg">	
			<div class = "caption"><h2>Hello</h2></div>
			
					
		</div>		
		<div class = "grid-item">
			<img src = "http://media3.popsugar-assets.com/files/2015/08/27/708/n/2589278/76c8507697407135_GettyImages-479456327_masterEMP37T.xxxlarge/i/Theo-James.jpg">
			<div class = "caption"><h2>Some</h2></div>
			
		</div>
		<div class = "grid-item">
			<img src = "https://upload.wikimedia.org/wikipedia/en/2/22/The-Maine-Black-And-White-Artwork.jpg">
			<div class = "caption"><h2>Random</h2></div>
			
		</div>
		 <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
			 <div class = "caption"><h2>Caption</h2></div>
			
  </div>  
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
		<div class = "caption"><h2>Random</h2></div>
			
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
		<div class = "caption"><h2>And</h2></div>
			
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
		<div class = "caption"><h2>Some</h2></div>
			
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
		<div class = "caption"><h2>Image</h2></div>
		
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
		<div class = "caption"><h2>For</h2></div>
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
		<div class = "caption"><h2>You</h2></div>
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
		<div class = "caption"><h2>Guys</h2></div>
  </div>
	</div>
	<div class = "row">
		<p class = "text-center">Created using: <a href= "https://masonry.desandro.com/" target = "_blank">Masonry</a>.</p>
		<p class = "text-center">View their Codepen's example <a href= "https://codepen.io/desandro/pen/bdgRzg" target = "_blank">here</a>.</p>
	</div>

	
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/masonry.pkgd.js'></script>
<script src='https://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script>
      <script id="rendered-js" >
var $grid = $('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true });


$grid.imagesLoaded().progress(function () {
  $grid.masonry();
});
    </script>
</body>
</html>
 

11. By Gustaf Holm

Made by Gustaf Holm. CSS Grid Layout with flexbox fallback support. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@supports (display: grid) {

  .grid {
    display: grid;
    grid-gap: 1.5vw;
    min-height: 100vh;
    padding: 1.5vw;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 50vh 30vh repeat(7, minmax(20vh, 1fr));
    grid-template-areas:
      "hero   hero"
      "big1   big1"
      "med1   med1"
      "med2   med2"
      "small1 small2"
      "small3 small4"
      "small5 small6"
      "small7 small8"
      "small9 small10";
  }

  @media screen and (min-width: 750px) {
    .grid {
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 25vh);
      grid-template-areas:
        "hero   hero   hero   med1   med1"
        "hero   hero   hero   med2   med2"
        "big1   big1   big1   big1   big1"
        "small1 small2 small3 small4 small5"
        "small6 small7 small8 small9 small10";
    }
  }

  @media screen and (min-width: 1400px) {
    .grid {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
      "small1 hero   hero hero med1   med1"
      "small2 hero   hero hero med2   med2"
      "small3 small5 big1 big1 small7 small8"
      "small4 small6 big1 big1 small9 small10";
    }
  }

  .grid .item:nth-child(1)  { grid-area: hero; }
  .grid .item:nth-child(2)  { grid-area: big1; }
  .grid .item:nth-child(3)  { grid-area: med1; }
  .grid .item:nth-child(4)  { grid-area: med2; }
  .grid .item:nth-child(5)  { grid-area: small1; }
  .grid .item:nth-child(6)  { grid-area: small2; }
  .grid .item:nth-child(7)  { grid-area: small3; }
  .grid .item:nth-child(8)  { grid-area: small4; }
  .grid .item:nth-child(9)  { grid-area: small5; }
  .grid .item:nth-child(10) { grid-area: small6; }
  .grid .item:nth-child(11) { grid-area: small7; }
  .grid .item:nth-child(12) { grid-area: small8; }
  .grid .item:nth-child(13) { grid-area: small9; }
  .grid .item:nth-child(14) { grid-area: small10; }

}

/* flexbox fallback is the browser does not support display:grid */
@supports not (display: grid) {

  .grid {
    display: flex;
    flex-flow: row wrap;
    min-height: 100vh;
    padding: 0.75vw;
  }

  .grid .item {
    min-height: 20vh;
    margin: 0.75vw;
  }

  .grid .item:nth-child(1)  { flex: 0 1 calc(100% - 1.5vw); height: 50vh; }
  .grid .item:nth-child(2)  { flex: 0 1 calc(100% - 1.5vw); height: 30vh; }
  .grid .item:nth-child(3)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(4)  { flex: 0 1 calc(100% - 1.5vw); }
  .grid .item:nth-child(5)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(6)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(7)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(8)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(9)  { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(10) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(11) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(12) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(13) { flex: 0 1 calc(50% - 1.5vw); }
  .grid .item:nth-child(14) { flex: 0 1 calc(50% - 1.5vw); }

  @media screen and (min-width: 750px) {
    .grid .item:nth-child(1)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(2)  { flex: 0 1 calc(40% - 1.5vw); height: 50vh; }
  }

  @media screen and (min-width: 1400px) {
    .grid .item:nth-child(1)  { flex: 0 1 calc(60% - 1.5vw); }
    .grid .item:nth-child(2)  { flex: 0 1 calc(40% - 1.5vw); }
    .grid .item:nth-child(3)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(4)  { flex: 0 1 calc(50% - 1.5vw); }
    .grid .item:nth-child(5)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(6)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(7)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(8)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(9)  { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(10) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(11) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(12) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(13) { flex: 0 1 calc(25% - 1.5vw); }
    .grid .item:nth-child(14) { flex: 0 1 calc(25% - 1.5vw); }
  }

}

/* Styles, just for fun */

*,*:before,*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #29343d;
}

@supports not (display: grid) {
  body:before {
    content: 'Sorry, seems like your browser doesn\'t support display: grid. Below is the flexbox fallback.';
    display: block;
    padding: 2rem 2rem 0;
    color: #ffffff;
    text-align: center;
  }
}

.header {
  margin: 10vh 1.5vw;
  text-align: center;
  color: #cedfe9;
}

.header h1,
.header h2 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
}

.header h1 {
  position: relative;
  padding-bottom: 0.5em;
  color: #ffffff;
  font-size: 2rem;
}

.header h2 {
  font-weight: normal;
  font-size: 0.875rem;
}

@media screen and (min-width: 750px) {

  .header h1 {
    font-size: 3.75rem;
  }

  .header h2 {
    font-weight: normal;
    font-size: 1.125rem;
    letter-spacing: 0.5em;
  }
}

@media screen and (min-width: 1400px) {

  .header h1 {
    font-size: 6rem;
  }

  .header h2 {
    font-weight: normal;
    font-size: 1.5rem;
  }
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.diamond {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  background-image: linear-gradient(to top left, #ddd 0%, #fff 100%);
  text-align: center;
  transform-origin: center;
  transform: rotateZ(45deg);
  transition: box-shadow 250ms, transform 250ms;
}

.diamond span {
  font-weight: bold;
  transform: rotateZ(-45deg)
}

.grid .item:hover .diamond,
.grid .item:focus .diamond {
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  transform:  rotateZ(45deg) scale(1.2);
}

.tooltip {
  position: absolute;
  z-index: 1;
  padding: 0.25rem 1rem;
  border-radius: 5px;
  background: #29343d;
  opacity: 0;
  color: #cedfe9;
  font-size: 0.875rem;
  transition: opacity 500ms, transform 500ms;
}

.tooltip:before {
  content: '';
  position: absolute;
  top: -9px;
  left: calc(50% - 10px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #29343d;
}

.grid .item:hover .tooltip,
.grid .item:focus .tooltip {
  opacity: 1;
  transform: translateY(70px);
}

.grid .item {
  position: relative;
  padding: 1vw;
  background-position:  left bottom;
  background-size: 150% 100%;
  transition: background 500ms, outline 500ms;
  background-position: top left;
  outline: transparent;
}

.grid .item:hover,
.grid .item:focus {
  background-position: top right;
}

.grid .item:focus {
  outline: 2px solid #3eabfa;
}

.grid .item:nth-child(1)  { background-image: linear-gradient(45deg, #cbabfb 0%, #fb7ef6 60%); }
.grid .item:nth-child(2)  { background-image: linear-gradient(45deg, #fb7ef6 0%, #cbabfb 60%); }
.grid .item:nth-child(3)  { background-image: linear-gradient(45deg, #70c1fb 0%, #79ebe0 60%); }
.grid .item:nth-child(4)  { background-image: linear-gradient(45deg, #79ebe0 0%, #70c1fb 60%); }
.grid .item:nth-child(5),
.grid .item:nth-child(6),
.grid .item:nth-child(7),
.grid .item:nth-child(8),
.grid .item:nth-child(9),
.grid .item:nth-child(10),
.grid .item:nth-child(11),
.grid .item:nth-child(12),
.grid .item:nth-child(13),
.grid .item:nth-child(14) { background-image: linear-gradient(45deg, #feeeab 0%, #fb7eb3 60%); }
</style>
</head>
<body>
  <header class="header">
  <h1>CSS Grid Layout</h1>
  <h2>With @support flexbox fallback.</h2>
</header>

<div class="grid ">
  <div class="item" tabindex="1">
    <div class="box">
      <div class="diamond"><span>1</span></div>
      <div class="tooltip">grid-area: hero</div>
    </div>
  </div>
  <div class="item" tabindex="2">
    <div class="box">
      <div class="diamond"><span>2</span></div>
      <div class="tooltip">grid-area: big</div>
    </div>
  </div>
  <div class="item" tabindex="3">
    <div class="box">
      <div class="diamond"><span>3</span></div>
      <div class="tooltip">grid-area: medium</div>
    </div>
  </div>
  <div class="item" tabindex="4">
    <div class="box">
      <div class="diamond"><span>4</span></div>
      <div class="tooltip">grid-area: medium</div>
    </div>
  </div>
  <div class="item" tabindex="5">
    <div class="box">
      <div class="diamond"><span>5</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="6">
    <div class="box">
      <div class="diamond"><span>6</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="7">
    <div class="box">
      <div class="diamond"><span>7</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="8">
    <div class="box">
      <div class="diamond"><span>8</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="9">
    <div class="box">
      <div class="diamond"><span>9</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="10">
    <div class="box">
      <div class="diamond"><span>10</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="11">
    <div class="box">
      <div class="diamond"><span>11</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="12">
    <div class="box">
      <div class="diamond"><span>12</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="13">
    <div class="box">
      <div class="diamond"><span>13</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
  <div class="item" tabindex="14">
    <div class="box">
      <div class="diamond"><span>14</span></div>
      <div class="tooltip">grid-area: small</div>
    </div>
  </div>
</div>
</body>
</html>

12. By Mozilla Developers

Made by Mozilla Developers. Simple Grid layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}





/* OTHER STYLES */

body {
  background-color: #3b404e;
  display: flex;
  justify-content: center;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.item {
  background-color: #1EAAFC;
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  color: #ffffff;
  border-radius: 4px;
  border: 6px solid #171717;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header {
  background-color: #1EAAFC;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

.sidebar {
  background-image: linear-gradient(203deg, #3EDFD7 0%, #29A49D 90%)
}

.content-1,
.content-2,
.content-3 {
  background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
}

.footer {
  background-color: #6C52D9;
  background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}
</style>
</head>
<body>
  <div class="container">
  <div class="item header">header</div>
  <div class="item sidebar">sidebar</div>
  <div class="item content-1">Content-1</div>
  <div class="item content-2">Content-2</div>
  <div class="item content-3">Content-3</div>
  <div class="item footer">footer</div>
</div>
</body>
</html>

13. By ilithya

Made by ilithya. Magazine layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Aleo|Open+Sans:600,700|Sree+Krushnadevaraya" rel="stylesheet">

<style>
:root {
  --color_base: #FFF;
  --color_mag: #FFCDD2;
  --color_ink: #282724;
  --color_highlight: #FFFF00;
  --magazine: 56rem;
  --mag_col: 12rem;
  --gap: 1.25rem;
  --gap_half: calc(var(--gap) / 2);
  --border_sm: 1px;
  --border_md: 3px;
}
@media screen and (min-width: 32.5rem) {
  :root {
    --gap: calc(var(--magazine) / 24);
  }
}

body {
  min-width: 20rem;
  background-color: var(--color_base);
  color: var(--color_ink);
  font-family: "Aleo", serif;
  margin: 0;
}

figure,
figcaption {
  margin: 0;
}

p {
  font-size: 0.9rem;
  line-height: 1.7;
  margin-top: 0;
  text-align: justify;
}
@media screen and (min-width: 40.625rem) {
  p {
    font-size: 0.8rem;
  }
}
p:last-child {
  margin: 0;
}

::-moz-selection {
  background-color: var(--color_highlight);
}

::selection {
  background-color: var(--color_highlight);
}

.u-txt-center {
  text-align: center;
}

.c-heading {
  font-weight: normal;
  margin: 0;
}
.c-heading:not(.c-heading--03) {
  text-transform: uppercase;
}
.c-heading--01, .c-heading--03, .c-heading--05 {
  font-family: "Sree Krushnadevaraya", serif;
}
.c-heading--02, .c-heading--04 {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.2rem;
}
.c-heading--01 {
  font-size: 5.5rem;
  line-height: 1.1;
  margin-top: -1.8rem;
}
@media screen and (min-width: 32.5rem) {
  .c-heading--01 {
    font-size: 7rem;
  }
}
@media screen and (min-width: 40.625rem) {
  .c-heading--01 {
    font-size: 9rem;
    margin-top: -3rem;
  }
}
.c-heading--02 {
  font-size: 1rem;
  line-height: 1.7;
}
.c-heading--03 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-top: calc(var(--gap_half) / -2);
  margin-bottom: calc(var(--gap_half) / 2);
  padding-bottom: 1rem;
}
@media screen and (min-width: 32.5rem) {
  .c-heading--03 {
    font-size: 1.7rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
@media screen and (min-width: 53.125rem) {
  .c-heading--03 {
    font-size: 2.2rem;
  }
}
.c-heading--04 {
  border-top: var(--border_sm) solid var(--color_ink);
  border-bottom: var(--border_sm) solid var(--color_ink);
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.3;
  padding: 0.3rem 0;
}
@media screen and (min-width: 32.5rem) {
  .c-heading--04 {
    font-size: 0.9rem;
  }
}
.c-heading--05 {
  font-size: 1.2rem;
  line-height: 1;
}

.o-grid {
  --minmax: var(--mag_col);
  max-width: var(--magazine);
  background-color: var(--color_mag);
  border-left: var(--border_sm) solid var(--color_ink);
  border-right: var(--border_sm) solid var(--color_ink);
  display: grid;
  grid-template: auto/var(--gap) repeat(2, 1fr) minmax(var(--minmax), 1fr) var(--gap);
  grid-template-areas: ". header header header ." ". subheader subheader subheader ." ". profile profile profile ." ". content content content ." ". work-sample work-sample work-sample ." ". footer footer footer .";
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap_half);
  margin: 0 auto;
  padding-top: var(--gap);
}
@media screen and (min-width: 40.625rem) {
  .o-grid {
    --minmax: 15rem;
    grid-template-areas: ". header header header ." ". subheader subheader subheader ." ". content content profile ." ". work-sample work-sample profile ." ". footer footer footer .";
  }
}
.o-grid__area-01 {
  grid-area: header;
}
.o-grid__area-02 {
  grid-area: subheader;
}
.o-grid__area-03 {
  grid-area: profile;
}
.o-grid__area-04 {
  grid-area: content;
}
.o-grid__area-05 {
  grid-area: work-sample;
}
.o-grid__area-06 {
  grid-area: footer;
}

.o-header {
  border-top: var(--border_md) solid var(--color_ink);
  border-bottom: var(--border_md) solid var(--color_ink);
  padding: calc(var(--gap_half) / 4) 0;
  position: relative;
}
.o-header:before {
  width: 100%;
  content: "";
  border-top: var(--border_sm) solid var(--color_ink);
  position: absolute;
  top: var(--border_md);
  left: 0;
}

.o-profile {
  position: relative;
}
@media screen and (max-width: 32.438rem) {
  .o-profile {
    margin-bottom: var(--gap_half);
  }
}
.o-profile:after {
  width: 100%;
  height: 100%;
  background-color: var(--color_base);
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23282724' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.o-profile__inner {
  background-color: var(--color_base);
  border-bottom: var(--border_md) solid var(--color_ink);
  padding: var(--gap);
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 40.625rem) {
  .o-profile__inner {
    padding: var(--gap_half);
  }
}

.o-media {
  background-color: var(--color_base);
}
.o-media__img {
  width: 100%;
}
.o-media__caption {
  font-family: "Open Sans", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: var(--gap);
}
@media screen and (min-width: 32.5rem) {
  .o-media__caption {
    margin-bottom: var(--gap_half);
  }
}
@media screen and (min-width: 40.625rem) {
  .o-media__caption {
    font-size: 1rem;
  }
}
.o-media__legend {
  border-bottom: var(--border_sm) solid var(--color_ink);
  font-family: "Open Sans", sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 0 var(--gap_half) 0.3rem;
}

.o-content {
  -moz-columns: var(--mag_col);
       columns: var(--mag_col);
  -moz-column-gap: var(--gap);
       column-gap: var(--gap);
}

.o-footer {
  margin: var(--gap_half) 0;
}
.o-footer p {
  line-height: 1.3;
  opacity: 0.2;
  word-break: break-all;
}
</style>
</head>
<body>
  <article class="o-grid">
  <header class="o-grid__area-01 o-header u-txt-center"> 
    <h3 class="c-heading c-heading--05"> <em>1665 – 1736</em></h3>
    <h1 class="c-heading c-heading--01">Seba</h1>
    <h2 class="c-heading c-heading--02">Albertus Seba</h2>
  </header>
  <div class="o-grid__area-02 u-txt-center"> 
    <h4 class="c-heading c-heading--03">text.</h4>
    <h5 class="c-heading c-heading--04">text</h5>
  </div>
  <section class="o-grid__area-03 o-profile">
    <div class="o-profile__inner">
      <figure class="o-media"><img class="o-media__img" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Albertus_Seba_Portrait_farbig.jpg" alt="Albertus Seba showing a lizard in a bottle"/>
        <figcaption class="o-media__caption u-txt-center">text.</figcaption>
      </figure>
      <p>text</p>
    </div>
  </section>
  <div class="o-grid__area-04 o-content">
    <p>text</p>
  </div>
  <figure class="o-grid__area-05 o-media"><img class="o-media__img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Albertus_Seba_-_Hydra.jpg/1920px-Albertus_Seba_-_Hydra.jpg" alt="The Hamburg Hydra, from the Thesaurus (1734)"/>
    <figcaption class="o-media__legend">↑ The Hamburg Hydra, from the Thesaurus (1734).</figcaption>
  </figure>
  <footer class="o-grid__area-06 o-footer">
    <p> <small>text</small></p>
  </footer>
</article>
</body>
</html>

14. By Kseso

Made by Kseso. Auto Hexagonal CSS Grid Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
*, *:after, *:before {box-sizing: inherit;}
* {margin:0;padding:0;border: 0 none; position: relative;}
:root {
	--sinSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	--Nhexa: 4;
	--gap: 2vw;
	--size: calc(calc(100vw / var(--Nhexa)) - var(--gap));
}
@media only screen and (min-width: 1100px) {:root {--Nhexa: 6;}}
@media only screen and (max-width: 600px) {
	:root {--Nhexa: 2;}
	body {margin-right: calc(var(--size) * .3);}
}
html {
	background: #e9e9e7;
  box-sizing: border-box;
	font-family: var(--sinSerif);
	font-size: 1rem;
}
body {
	padding-right: calc(var(--size) * .5);
	overflow-X: hidden;
	-webkit-hyphens: auto;
	    -ms-hyphens: auto;
	        hyphens: auto;
}
section {
  margin: calc(var(--size) * .5) auto 0;
  width: calc(var(--size) * calc(var(--Nhexa) - 1));
	display: grid;
	grid-template-columns: repeat(var(--Nhexa), 1fr);
	grid-gap: var(--gap);
}
article {
	background: cadetblue;
  width: var(--size); 
  height: calc(var(--size) / 1.1111111);
	-webkit-clip-path: url(#hexagono);
	        clip-path: url(#hexagono);
  -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
          clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  margin-right: calc(var(--size) / 2);
	color: #fff;
	overflow: hidden;
}
article:nth-child(2n) {margin: calc(var(--size) * -.5) calc(var(--size) * -.25) 0 calc(var(--size) * -.75);}
article::before {
	content: '';
	float: left;
	width: 25%;
	height: 100%;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	        clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}
img {
  width: var(--size);
	height: var(--size);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 0% 50%;
	transition: .75s;
	-webkit-clip-path: url(#hexagono);
	        clip-path: url(#hexagono);
	-webkit-clip-path: inherit;
	        clip-path: inherit;
	z-index:  10;
}
article:hover img {transform: translate(-50%, -50%) rotate(-110deg);}
h2 {font-size: 100%;}
figure {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	max-width: 50%;
	height: 100%;
	font-size: calc(9 / var(--Nhexa) * 1vw);
	line-height: 1;
	color: #fff;
	transition: .75s .05s;
  text-align: center;
}
figure p {
	font-size: 70%;
	line-height: 1.2;
	width: 100%;
}
h1 {
	width: 100vw;
	background: #FF0066;
	position: sticky;
	top: 0;
	z-index: 1;
	margin-bottom: calc(var(--size) * .55 + var(--gap));
	padding: 2vh 0;
	text-align: center;
	font-weight: 400;
	color: #fff;
}
body > p {
	font-size: 1.5rem;
	margin: 2rem 0 1rem calc(var(--size) * .5);
	font-weight: 200;
}
</style>
</head>
<body>
  <h1>Auto Hexagonal CSS Grid Layout</h1>
  <section>
		<article>
			<figure>
				<h2>@Xavisu</h2>
				<p>text</p>
			</figure>
			<img alt src='https://kaleidos.net/media/filer_public_thumbnails/filer_public/91/7c/917ca0ca-f069-455e-b25f-154db357d09a/xaviju2.jpg__300x300_q85_crop_subject_location-3257%2C1894_subsampling-2_upscale.jpg' />
		</article>
		<article>
			<figure>
			<h2>@Kseso</h2>
				<p>text</p>
			</figure>
			<img alt src='https://1.bp.blogspot.com/-8xv4oUIGGdo/WR3XHvAb5hI/AAAAAAAANjo/Pi2TSd9llSQBvuIgWWe4RY8l9msbOgcbgCK4B/s250-c/hrRtW6LJ.jpg' />
		</article>
		<article>
			<figure>
				<h2>@abelsutilo</h2>
			<p>text</p>
			</figure>
			<img alt src='http://abelsutilo.com/wp-content/uploads/2009/01/10850250_10152894635423684_7160074995457018570_n.jpg.pagespeed.ce.tgatamlOAJ.jpg' />
		</article>
		<article>
			<figure>
				<h2>@Olgacarreras</h2>
			<p>text</p>
			</figure>
			<img alt src='https://www.usableyaccesible.com/images/olga_carreras_montoto.jpg' />
		</article>
		<article>
			<figure>
				<h2>@cristinafsanz<h2>
					<p>text</p>
			</figure>
			<img alt src='https://cristinafsanz.github.io/images/avatar.png' />
		</article>
		<article>
			<figure>
				<h2>@lau_es</h2>
				<p>text</p>
			</figure>
			<img alt src='https://www.gravatar.com/avatar/73f55f92af57327a909da02fd88ac4d0?d=404&s=250' />
		</article>
		<article>
			<figure>
				<h2>@yoksel_en</h2>
				<p>text</p>
			</figure>
			<img alt src='https://avatars3.githubusercontent.com/u/2571308?s=400&v=4' />
		</article>
		<article>
			<figure>
				<h2>@jorgeATGU</h2>
				<p>text</p>
			</figure> 
			<img alt src='https://avatars1.githubusercontent.com/u/2649175?s=400&v=4' />
		</article>
		<article>
			<figure>
			<h2>@SaraSoueidan</h2>
				<p>text</p>
			</figure>
			<img alt src='http://www.webdirections.org/respond16/images/speakers/speaker-sara-soueidan.jpg' />
		</article>
		<article>
			<figure>
			<h2>@Furoya</h2>
				<p>text</p>
			</figure>
			<img alt src='https://4.bp.blogspot.com/-oEYLUC8u3Jg/Ua55qLcPbtI/AAAAAAAAADc/H-X_ID0b5bo/s250-c/avatarFuroya.jpg' />
		</article>
		<article>
			<figure>
				<h2>@AmeliasBrain</h2>
				<p>text</p>
			</figure>
			<img alt src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/profile/profile-512.jpg?3' />
		</article>
		<article>
			<figure>
			<h2>@lpez_elena</h2>
				<p>text</p>
			</figure>
			<img alt src='https://cdn-images-1.medium.com/fit/c/125/125/0*oNbktSWCpFc07xOj.jpg' />
		</article>
  </section>
			<p>text</p>			
<svg width="0" height="0">
  <defs>
    <clipPath id="hexagono" clipPathUnits="objectBoundingBox">
      <polygon points=".25 0, .75 0, 1 .5, .75 1, .25 1, 0 .5" />
    </clipPath>
  </defs>
</svg>
</body>
</html>

15. By Envato Tuts+

Made by Envato Tuts+. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://codepen.io/tutsplus/pen/edyZBz.css'>
  
<style>
/* basics */
body {
  background: #f8f7f2;
  padding: 0 10%;
  font: 100%/1.5 'Kalam', cursive;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 10px;
  color: #251b19;
}

p {
  margin: 0;
  padding: 10px;
  color: #251b19;
  font-size: 1.2em;
}

a {
  color: #e56633;
}

a:hover {
  text-decoration: none;
}

/* the grid */
.grid-1 {
  display: grid;
  width: 100%;
  max-width: 770px;
  margin: 10% auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;
  grid-gap: 25px;
}

/* panels */
.panel {
  color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0px 0px 5px #251b19;
}

/* individual panels */
.panel-title {
  box-shadow: none;
}
.panel-1 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-002.svg);
  box-shadow: none;
}
.panel-2 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-001.svg);
}
.panel-3 {
  box-shadow: none;
}
.panel-4 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-003.svg);
}
.panel-5 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-004.svg);
}
.panel-6 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-005.svg);
}
.panel-7 {
  box-shadow: none;
}
.panel-8 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-007.svg);
}
.panel-9 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-008.svg);
  box-shadow: none;
}
.panel-copyright {
  box-shadow: none;
  font-size: .75em;
}

/* media query 1 */
@media only screen and (min-width: 400px) {
  
  .grid-1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 200px auto 200px 200px auto 200px auto;
  }  
  .panel-title,
  .panel-3,
  .panel-6,
  .panel-7,
  .panel-copyright {
    grid-column: span 2;
  }
  .panel-copyright {
    text-align: right;
  }
  .panel-7 {
    text-align: center;
  }
  h1 {
    font-size: 3em;
  }
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
  .grid-1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 200px 200px 200px auto;
  }
  .panel-title,
  .panel-copyright {
    grid-column: span 3;
  }
  .panel-3,
  .panel-6 {
    grid-column: auto;
  }
  .panel-8 {
    grid-column: span 2;
  }
  h1 {
    font-size: 3.5em;
  }
  p {
    font-size: 1.3em;
  }
  
  /* flexbox centering */
  .panel-3 {  
    display: flex;
    align-items: center;
  }
  
  /* layering */
  .panel-7 {
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
    margin: -5px 0 0 -10px;
    transform: rotate(-2deg);
  }
  
  .panel-7 p {
    background: #f8f7f2;
    box-shadow: 0 0px 0px 5px #251b19;
    text-align: left;
  }
  
  .panel-8 {
    grid-column: 1 / span 2;
    grid-row: 4;
    background-size: 70%;
    background-position: right;
  }
  
}
</style>
</head>
<body>
  <div class="support-grid"></div>

<section class="grid-1">

  <div class="panel panel-title">
    <h1>Barry’s Cushion</h2>
    <p>A tale of lethargy and soft furnishings</p>
  </div>
    <div class="panel panel-1"></div>
    <div class="panel panel-2"></div>
    <div class="panel panel-3">
      <p>β€œI should probably get up–things to do.”</p>
    </div>
    <div class="panel panel-4"></div>
    <div class="panel panel-5"></div>
    <div class="panel panel-6"></div>
    <div class="panel panel-7">
      <p>β€œNaaah.”</p>
    </div>
    <div class="panel panel-8"></div>
    <div class="panel panel-9"></div>
    <div class="panel panel-copyright">
      <p>Sleepy Fat Cat by messenj4h<br>&copy; Copyright happily ever after <a href="https://webdesign.tutsplus.com/tutorials/css-grid-layout-and-comics-as-explained-by-barry-the-cat--cms-27617">Envato Tuts+</a>
    </div>
</section>
</body>

16. By Ruslan Pivovarov

Made by Ruslan Pivovarov. Fully Responsive Expandable Grid Layout with hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
  
<style>
html {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}

.container {
  height: 100vh;
  background-color: #131417;
}

.box {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/smoke_texture2714-min.jpg") center center no-repeat;
  background-size: cover;
  box-shadow: 0 0 50px 0 rgba(75, 27, 27, 0.7);
  z-index: 1;
  overflow: hidden;
}
.box__row-cell {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 24%;
  height: 29%;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translateZ(0);
  transition: all 400ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
}
.box__row-cell:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: 500ms;
}
.box__row-cell:before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-color: rgba(0, 0, 0, 0);
  opacity: 1;
  transition: 300ms;
  z-index: -3;
}
.box__row-cell:hover:before {
  background-color: #F25555;
}
.box__row-cell-info {
  margin-left: 20px;
  width: 100px;
  color: #fff;
  transition: 400ms 850ms;
}
.box__row-cell-info-ep {
  margin-top: 25px;
  font-size: 10px;
}
.box__row-cell-info-ep span {
  padding-left: 10px;
}
@media screen and (max-height: 915px) {
  .box__row-cell-info-ep {
    margin-top: 10px;
  }
}
.box__row-cell-info-title {
  letter-spacing: 2px;
  margin-top: 15px;
  font-size: 20px;
}
@media screen and (max-height: 692px) {
  .box__row-cell-info-title {
    margin-top: 8px;
    font-size: 18px;
  }
}
@media screen and (max-height: 692px) {
  .box__row-cell-info-title {
    font-size: 16px;
    margin-top: 4px;
  }
}
.box__row-cell-info-sign {
  margin: 15px 0 0 2px;
  height: 3px;
  width: 20px;
  background-color: #fff;
  border-radius: 1px;
  transition: 200ms;
  z-index: 10;
}
@media screen and (max-height: 800px) {
  .box__row-cell-info-sign {
    margin-top: 10px;
  }
}
.box__row-cell-info--time {
  position: absolute;
  bottom: 18px;
  font-size: 10px;
}
@media screen and (max-height: 650px) {
  .box__row-cell-info--time {
    right: 20px;
    text-align: right;
  }
}
.box__row-cell-info--full {
  transform: translateX(-50px);
  opacity: 0;
  margin: 50px 0 0 90px;
  transition: 300ms;
}
.box__row-cell-info--full-heading {
  line-height: 60px;
  width: 300px;
  color: #131313;
  font-size: 60px;
  font-weight: 900;
}
.box__row-cell-info--full-par {
  padding-top: 50px;
  color: #fff;
}
.box__row-cell:nth-child(2) {
  left: 75%;
}
.box__row-cell:nth-child(3) {
  left: 100%;
}
.box__row:nth-child(2) .box__row-cell {
  top: 67.5%;
}
.box__row:nth-child(3) .box__row-cell {
  top: 100%;
}
.box__content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: #1C1E22;
  transform: translateZ(0);
  opacity: 0;
  z-index: -10;
  transition: all 400ms 600ms, z-index 0ms 0ms;
}
.box__content-wrapper {
  position: relative;
  margin-left: auto;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.box__content-inner {
  position: absolute;
  left: 18px;
  transform: translateX(50px);
  width: 100%;
  height: 100%;
  overflow: auto;
  opacity: 0;
  transition: 400ms, opacity 200ms;
}
.box__content-text {
  padding: 20px 0 30px 8px;
  width: 300px;
  max-width: 100%;
  color: #ababab;
}
.box__content-text-heading {
  position: relative;
  margin: 50px 0 20px 0;
  color: #f5f5f5;
  font-size: 16px;
}
.box__content-text-heading:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #a73c3c;
  box-shadow: 0 0 1px 0 #a73c3c;
}
.box__content-text-par {
  line-height: 22px;
  padding-bottom: 10px;
  font-size: 14px;
}
.box__content-text-list {
  list-style-type: none;
}
.box__content-text-item {
  padding-bottom: 3px;
  font-size: 14px;
}
.box__content-text-link {
  text-decoration: none;
  color: #ababab;
  font-size: 14px;
}
.box__content-text-link:hover {
  text-decoration: underline;
}
.box__close {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 20px;
  width: 20px;
  font-size: 0;
  cursor: pointer;
  z-index: 9999;
}
.box__close:after, .box__close:before {
  content: "";
  position: absolute;
  top: 9px;
  left: -14px;
  transform: rotate(45deg);
  width: 35px;
  height: 2px;
  background-color: #fff;
  opacity: 0;
  transition: 500ms;
}
.box__close:before {
  transform: rotate(-45deg);
}
.box__close span {
  position: relative;
  display: inline-block;
  margin: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #fff;
  transition: 400ms 500ms;
}
.box__close span:nth-child(6) {
  right: 6px;
}
.box__close span:nth-child(7) {
  right: 6px;
}
.box__close span:nth-child(8) {
  right: 6px;
}
.box__close span:nth-child(9) {
  right: 6px;
}
.box__close span:nth-child(10) {
  right: 6px;
}
.box__episodes {
  position: absolute;
  top: 28%;
  right: 15px;
  color: #fff;
  letter-spacing: 2px;
  font-size: 10px;
}
.box__episodes:after {
  content: "";
  position: absolute;
  top: -20px;
  right: 2px;
  width: 15px;
  height: 1px;
  background-color: #fff;
}
.box__smokebg {
  position: absolute;
  top: -10%;
  left: -10%;
  transform: translate3d(0, 0, 0) rotate(0.01deg);
  width: 120%;
  height: 120%;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/smoke-min.png") center center no-repeat;
  background-size: cover;
  z-index: -10;
  opacity: 0.5;
  -webkit-animation: smokebg 60s infinite alternate;
          animation: smokebg 60s infinite alternate;
}
@-webkit-keyframes smokebg {
  25% {
    transform: translate3d(100px, 0, 0) rotate(0.01deg);
  }
  50% {
    transform: translate3d(75px, -25px, 0) rotate(0.01deg);
  }
  75% {
    transform: translate3d(45px, 30px, 0) rotate(0.01deg);
  }
  100% {
    transform: translate3d(25px, -15px, 0) rotate(0.01deg);
  }
}
@keyframes smokebg {
  25% {
    transform: translate3d(100px, 0, 0) rotate(0.01deg);
  }
  50% {
    transform: translate3d(75px, -25px, 0) rotate(0.01deg);
  }
  75% {
    transform: translate3d(45px, 30px, 0) rotate(0.01deg);
  }
  100% {
    transform: translate3d(25px, -15px, 0) rotate(0.01deg);
  }
}
.box__title {
  position: absolute;
  top: 25%;
  left: 9%;
}
.box__title-heading {
  position: relative;
  color: #7b2222;
  letter-spacing: 3px;
  line-height: 65px;
  font-size: 65px;
}
.box__title-heading:after {
  content: "";
  position: absolute;
  top: 170px;
  left: 0;
  width: 20px;
  height: 2px;
  box-shadow: 0 0 1px 0 #000;
  background-color: #000;
}
.box__title-heading span {
  letter-spacing: 6px;
  color: #fff;
}
.box__title-par {
  text-transform: uppercase;
  margin-top: 35%;
  color: #7b2222;
  font-size: 13px;
  font-weight: bold;
}

.active {
  left: 0 !important;
  top: 0 !important;
  height: 100%;
  width: 50%;
  background-color: #F25555;
  z-index: 5;
  transition: all 400ms 400ms, width 300ms 800ms;
  cursor: default;
  opacity: 1 !important;
}
.active .box__row-cell-info:nth-child(1) {
  transform: translateX(50px);
  opacity: 0;
  transition: 300ms 0ms ease-in, opacity 375ms 0ms;
}
.active .box__row-cell-info:nth-child(2) {
  transform: translateX(50px);
  opacity: 0;
  transition: 300ms 50ms ease-in, opacity 375ms 50ms;
}
.active .box__row-cell-info:nth-child(3) {
  transform: translateX(50px);
  opacity: 0;
  transition: 300ms 100ms ease-in, opacity 375ms 100ms;
}
.active .box__row-cell-info:nth-child(4) {
  transform: translateX(50px);
  opacity: 0;
  transition: 300ms 150ms ease-in, opacity 375ms 150ms;
}
.active .box__row-cell-info--full {
  transform: translateX(0);
  opacity: 1;
  transition: 300ms 900ms;
}

.cell-fade {
  opacity: 0;
  transition: all 400ms 400ms, width 300ms 800ms, opacity 200ms 300ms;
}

.hover-cell:after {
  opacity: 1;
}

.show-content {
  opacity: 1;
  z-index: 2;
  transition: all 300ms 400ms, z-index 0ms 0ms;
}
.show-content .box__content-inner {
  transform: translateX(0);
  opacity: 1;
  transition: 300ms 1100ms;
}

.box-close-active:after, .box-close-active:before {
  opacity: 1;
  transform: rotate(135deg);
  transition: 500ms 800ms;
}
.box-close-active:before {
  transform: rotate(45deg);
}
.box-close-active span {
  opacity: 0;
  transition: 0ms 800ms;
}
</style>
</head>
<body>
  <div class="container">
  <div class="box">
    <div class="box__row">
      <div data-cell='1' class="box__row-cell">
        <div class="box__row-cell-info">
          <p class='box__row-cell-info-ep'>EP <span>04</span></p>
        </div>
        <div class="box__row-cell-info">
          <p class='box__row-cell-info-title'>Proxima Nova is Over</p>
        </div>
        <div class="box__row-cell-info">
          <div class="box__row-cell-info-sign"></div>
        </div>
        <div class="box__row-cell-info box__row-cell-info--time">
          <p>43 minutes</p>
        </div>
        <div class="box__row-cell-info--full">
          <h1 class="box__row-cell-info--full-heading">Proxima Nova is Over</h1>
          <p class="box__row-cell-info--full-par">
            Seriously though, it's over.
          </p>
        </div>
      </div>


      <div data-cell='2' class="box__row-cell">
        <div class="box__row-cell-info">
          <p class=' box__row-cell-info-ep'>EP <span>03</span></p>
        </div>
        <div class="box__row-cell-info">
          <p class=' box__row-cell-info-title'>Proxima Nova is Over</p>
        </div>
        <div class="box__row-cell-info">
          <div class="box__row-cell-info-sign"></div>
        </div>
        <div class="box__row-cell-info box__row-cell-info--time">
          <p>44 minutes</p>
        </div>
        <div class="box__row-cell-info--full">
          <h1 class="box__row-cell-info--full-heading">Proxima Nova is Over</h1>
          <p class="box__row-cell-info--full-par">
            Seriously though, it's over.
          </p>
        </div>
      </div>
    </div>

    <div class="box__row">
      <div data-cell='3' class="box__row-cell">
        <div class="box__row-cell-info">
          <p class=' box__row-cell-info-ep'>EP <span>02</span></p>
        </div>
        <div class="box__row-cell-info">
          <p class=' box__row-cell-info-title'>Proxima Nova is Over</p>
        </div>
        <div class="box__row-cell-info">
          <div class="box__row-cell-info-sign"></div>
        </div>
        <div class="box__row-cell-info box__row-cell-info--time">
          <p>41 minutes</p>
        </div>
        <div class="box__row-cell-info--full">
          <h1 class="box__row-cell-info--full-heading">Proxima Nova is Over</h1>
          <p class="box__row-cell-info--full-par">
            Seriously though, it's over.
          </p>
        </div>
      </div>

      <div data-cell='4' class="box__row-cell">
        <div class="box__row-cell-info">
          <p class=' box__row-cell-info-ep'>EP <span>01</span></p>
        </div>
        <div class="box__row-cell-info">
          <p class=' box__row-cell-info-title'>Proxima Nova is Over</p>
        </div>
        <div class="box__row-cell-info">
          <div class="box__row-cell-info-sign"></div>
        </div>
        <div class="box__row-cell-info box__row-cell-info--time">
          <p >42 minutes</p>
        </div>
        <div class="box__row-cell-info--full">
          <h1 class="box__row-cell-info--full-heading">Proxima Nova is Over</h1>
          <p class="box__row-cell-info--full-par">
            Seriously though, it's over.
          </p>
        </div>
      </div>
    </div>

    <div data-content='1' class="box__content">
      <div class="box__content-wrapper">
        <div class="box__content-inner">
          <div class="box__content-text">
            <h2 class='box__content-text-heading'>SYNOPSIS - 43 MIN</h2>
            <p class='box__content-text-par'>
              Suspendisse non orci porta, consectetur tellus in, gravida felis. Aenean vel posuere lacus. Quisque eget rutrum elit. In eu tortor eget velit scelerisque porttitor.
            </p>
            <p class='box__content-text-par'>
              Morbi nisl metus, hendrerit eget ante sed, consequat egestas urna. Quisque et rutrum ligula, eu rutrum ex. Nunc neque mauris, laoreet eu auctor vitae, rutrum molestie dolor. Pellentesque vel vulputate elit, quis rhoncus sapien.
            </p>
            <h2 class='box__content-text-heading'>SHOW NOTES</h2>
            <ul class='box__content-text-list'>
              <li class='box__content-text-item'>
                Vitae ultrices
              </li>
              <li class='box__content-text-item'>
                Aenean vel
              </li>
              <li class='box__content-text-item'>
                Ut condimentum
              </li>
              <li class='box__content-text-item'>
                Aenean metus
              </li>
              <li class='box__content-text-item'>
                Quisque sodales
              </li>
              <li class='box__content-text-item'>
                Accumsan metus
              </li>
            </ul>
            <h2 class='box__content-text-heading'>FOLLOW</h2>
            <a class='box__content-text-link' href="https://twitter.com/mrspok407" target='_blank'>mrspok407 | @mrspok407</a><br>
            <a class='box__content-text-link' href="https://codepen.io/mrspok407/" target='_blank'>Checkout my other pens</a>
          </div>
        </div>
      </div>
    </div>

    <div data-content='2' class="box__content">
      <div class="box__content-wrapper">
        <div class="box__content-inner">
          <div class="box__content-text">
            <h2 class='box__content-text-heading'>SYNOPSIS - 44 MIN</h2>
            <p class='box__content-text-par'>
              Suspendisse non orci porta, consectetur tellus in, gravida felis. Aenean vel posuere lacus. Quisque eget rutrum elit. In eu tortor eget velit scelerisque porttitor.
            </p>
            <p class='box__content-text-par'>
              Morbi nisl metus, hendrerit eget ante sed, consequat egestas urna. Quisque et rutrum ligula, eu rutrum ex. Nunc neque mauris, laoreet eu auctor vitae, rutrum molestie dolor. Pellentesque vel vulputate elit, quis rhoncus sapien.
            </p>
            <h2 class='box__content-text-heading'>SHOW NOTES</h2>
            <ul class='box__content-text-list'>
              <li class='box__content-text-item'>
                Vitae ultrices
              </li>
              <li class='box__content-text-item'>
                Aenean vel
              </li>
              <li class='box__content-text-item'>
                Ut condimentum
              </li>
              <li class='box__content-text-item'>
                Aenean metus
              </li>
              <li class='box__content-text-item'>
                Quisque sodales
              </li>
              <li class='box__content-text-item'>
                Accumsan metus
              </li>
            </ul>
            <h2 class='box__content-text-heading'>FOLLOW</h2>
            <a class='box__content-text-link' href="https://twitter.com/mrspok407" target='_blank'>mrspok407 | @mrspok407</a><br>
            <a class='box__content-text-link' href="https://codepen.io/mrspok407/" target='_blank'>Checkout my other pens</a>
          </div>
        </div>
      </div>
    </div>

    <div data-content='3' class="box__content">
      <div class="box__content-wrapper">
        <div class="box__content-inner">
          <div class="box__content-text">
            <h2 class='box__content-text-heading'>SYNOPSIS - 41 MIN</h2>
            <p class='box__content-text-par'>
              Suspendisse non orci porta, consectetur tellus in, gravida felis. Aenean vel posuere lacus. Quisque eget rutrum elit. In eu tortor eget velit scelerisque porttitor.
            </p>
            <p class='box__content-text-par'>
              Morbi nisl metus, hendrerit eget ante sed, consequat egestas urna. Quisque et rutrum ligula, eu rutrum ex. Nunc neque mauris, laoreet eu auctor vitae, rutrum molestie dolor. Pellentesque vel vulputate elit, quis rhoncus sapien.
            </p>
            <h2 class='box__content-text-heading'>SHOW NOTES</h2>
            <ul class='box__content-text-list'>
              <li class='box__content-text-item'>
                Vitae ultrices
              </li>
              <li class='box__content-text-item'>
                Aenean vel
              </li>
              <li class='box__content-text-item'>
                Ut condimentum
              </li>
              <li class='box__content-text-item'>
                Aenean metus
              </li>
              <li class='box__content-text-item'>
                Quisque sodales
              </li>
              <li class='box__content-text-item'>
                Accumsan metus
              </li>
            </ul>
            <h2 class='box__content-text-heading'>FOLLOW</h2>
            <a class='box__content-text-link' href="https://twitter.com/mrspok407" target='_blank'>mrspok407 | @mrspok407</a><br>
            <a class='box__content-text-link' href="https://codepen.io/mrspok407/" target='_blank'>Checkout my other pens</a>
          </div>
        </div>
      </div>
    </div>

    <div data-content='4' class="box__content">
      <div class="box__content-wrapper">
        <div class="box__content-inner">
          <div class="box__content-text">
            <h2 class='box__content-text-heading'>SYNOPSIS - 42 MIN</h2>
            <p class='box__content-text-par'>
              Suspendisse non orci porta, consectetur tellus in, gravida felis. Aenean vel posuere lacus. Quisque eget rutrum elit. In eu tortor eget velit scelerisque porttitor.
            </p>
            <p class='box__content-text-par'>
              Morbi nisl metus, hendrerit eget ante sed, consequat egestas urna. Quisque et rutrum ligula, eu rutrum ex. Nunc neque mauris, laoreet eu auctor vitae, rutrum molestie dolor. Pellentesque vel vulputate elit, quis rhoncus sapien.
            </p>
            <h2 class='box__content-text-heading'>SHOW NOTES</h2>
            <ul class='box__content-text-list'>
              <li class='box__content-text-item'>
                Vitae ultrices
              </li>
              <li class='box__content-text-item'>
                Aenean vel
              </li>
              <li class='box__content-text-item'>
                Ut condimentum
              </li>
              <li class='box__content-text-item'>
                Aenean metus
              </li>
              <li class='box__content-text-item'>
                Quisque sodales
              </li>
              <li class='box__content-text-item'>
                Accumsan metus
              </li>
            </ul>
            <h2 class='box__content-text-heading'>FOLLOW</h2>
            <a class='box__content-text-link' href="https://twitter.com/mrspok407" target='_blank'>mrspok407 | @mrspok407</a><br>
            <a class='box__content-text-link' href="https://codepen.io/mrspok407/" target='_blank'>Checkout my other pens</a>
          </div>
        </div>
      </div>
    </div>
    <div class="box__close">
      <span></span><br>
      <span></span>
      <span></span><br>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="box__episodes">EPISODES</div>
    <div class='box__smokebg'>
      
    </div>
    <div class='box__title'>
      <h1 class='box__title-heading'>LOREM<br>
        <span>IPSUM</span></h1>
      <p class='box__title-par'>egestas sapien</p>
    </div>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script>
$(document).ready(function () {
  var animation = false,
  animDur = 1000,
  $row = $('.box__row'),
  $cell = $('.box__row-cell'),
  $content = $('.box__content'),
  $closeBtn = $('.box__close');

  var animFalse = function () {
    animation = false;
  };

  var active = function () {
    if (animation) return;
    var cellData = $(this).data('cell');
    var $content = $('.box__content[data-content=' + cellData + ']');
    animation = true;

    $cell.addClass('cell-fade');
    $(this).addClass('active');
    $content.addClass('show-content');
    $closeBtn.addClass('box-close-active');

    setTimeout(animFalse, animDur);
  };

  var close = function () {
    animation = true;

    $cell.removeClass('active cell-fade');
    $content.removeClass('show-content');
    $(this).removeClass('box-close-active');

    setTimeout(animFalse, animDur);
  };

  $row.on('click', '.box__row-cell', active);
  $closeBtn.on('click', close);
  $cell.on({
    mouseenter: function () {
      $cell.addClass('hover-cell');
      $(this).removeClass('hover-cell');
    },
    mouseleave: function () {
      $cell.removeClass('hover-cell');
    } });

});
    </script>
</body>
</html>