Simple Flexbox Grid

In this example below you will see how to do a Simple Flexbox Grid with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ScottMarshall, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ScottMarshall ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simple Flexbox Grid</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="flex-grid">
  <h1>Simple Flexbox Grid</h1>
  <p>Resize your browser window and check it out!</p>
  <div class="flex-row">
    <div class="flex-item flex-whole"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-half"></div>
    <div class="flex-item flex-half"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-third"></div>
    <div class="flex-item flex-third"></div>
    <div class="flex-item flex-third"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-quarter"></div>
    <div class="flex-item flex-quarter"></div>
    <div class="flex-item flex-quarter"></div>
    <div class="flex-item flex-quarter"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-fifth"></div>
    <div class="flex-item flex-fifth"></div>
    <div class="flex-item flex-fifth"></div>
    <div class="flex-item flex-fifth"></div>
    <div class="flex-item flex-fifth"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-sixth"></div>
    <div class="flex-item flex-sixth"></div>
    <div class="flex-item flex-sixth"></div>
    <div class="flex-item flex-sixth"></div>
    <div class="flex-item flex-sixth"></div>
    <div class="flex-item flex-sixth"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-eighth"></div>
    <div class="flex-item flex-eighth"></div>
    <div class="flex-item flex-eighth"></div>
    <div class="flex-item flex-eighth"></div>
    <div class="flex-item flex-eighth"></div>
    <div class="flex-item flex-eighth"></div>
    <div class="flex-item flex-eighth"></div>
    <div class="flex-item flex-eighth"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
    <div class="flex-item flex-tenth"></div>
  </div>
  <div class="flex-row">
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
    <div class="flex-item flex-twelfth"></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ScottMarshall/simple-flexbox-grid-mWbodo */
body {
  background-color: #1C226B;
}
body h1 {
  color: #FFF;
  text-align: center;
  font: 300 46px poppins;
  margin-bottom: 0;
  line-height: 46px;
}
body p {
  color: #FFF;
  text-align: center;
  font: 300 10px poppins;
  margin-bottom: 2em;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.flex-grid {
  width: 80%;
  margin: 0 auto;
}

.flex-row {
  display: flex;
}
@media screen and (max-width: 767px) {
  .flex-row {
    flex-direction: column;
  }
}

.flex-half {
  width: 50%;
}

.flex-whole {
  width: 100%;
}

.flex-third {
  width: 33.333%;
}

.flex-quarter {
  width: 25%;
}

.flex-fifth {
  width: 20%;
}

.flex-sixth {
  width: 16.666%;
}

.flex-eighth {
  width: 12.5%;
}

.flex-tenth {
  width: 10%;
}

.flex-twelfth {
  width: 8.333%;
}

.flex-item {
  height: 50px;
  background: #242b7d;
  margin: 0.5%;
  border-radius: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px;
}
@media screen and (max-width: 767px) {
  .flex-item {
    width: 100%;
    margin-top: 1em;
  }
}
.flex-item:hover {
  opacity: 0.9;
  cursor: pointer;
}

Comments