Responsive columns

In this example below you will see how to do a Responsive columns with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by berberdv, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright berberdv ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive columns</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div class="nav">
    navigatie
  </div>
  <div class="wrapper">
    <h1>Easy Responsive CSS Grid Layout, Version 4: Flexbox</h1>
    <div class="row">
      <div class="col-1-2">
        <h2>1/2</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
      <div class="col-1-2">
        <h2>1/2</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
    </div><!-- /.row -->
    
    <div class="row">
      <div class="col-2-3">
        <h2>2/3</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
      <div class="col-1-3">
        <h2>1/3</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
    </div><!-- /.row -->
    
    <div class="row">
      <div class="col-1-4">
        <h2>1/4</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
      <div class="col-1-4">
        <h2>1/4</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
      <div class="col-1-4">
        <h2>1/4</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
      <div class="col-1-4">
        <h2>1/4</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum quasi nulla molestias accusamus aspernatur reiciendis qui optio tenetur modi repellendus distinctio dolore nesciunt. Repellat provident explicabo accusamus autem perspiciatis.
      </div>
    </div><!-- /.row -->
  </div><!-- /.wrapper -->
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/berberdv/responsive-columns-ZbqwyN */
/* imports */
@import url(https://fonts.googleapis.com/css?family=Lobster);

/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* global */
body {
  background-color: rgb(40,40,40);
  color: rgb(100,100,100);
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

.nav {
  margin: 0 auto;
  padding: 15px;
  max-width: 97%;
  height: 10vh;
  min-height: 50px;
}

.wrapper {
  margin: 0 auto;
  padding: 20px;
  max-width: 95%;
  height: 90vh;
  overflow: auto;
  background-color: #fff;
}
h1 {
  font-family: "Lobster", cursive;
  font-size: 2em;
  margin-bottom: 10px;
}
h2 {
  font-weight: 700;
}

/* grid */
.row {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -10px;
  margin-bottom: 10px;
}
.row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding: 10px;
  width: 100%;
}

@media all and ( min-width: 600px ) {
  
  /* set col widths */
  .col-2-3 {
    width: 66.66%;
  }
  .col-1-2 {
    width: 50%;
  }
  .col-1-3 {
    width: 33.33%;
  }
  .col-1-4 {
    width: 25%;
  }
  .col-1-8 {
    width: 12.5%;
  }
  
}

Comments