<!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%;
}
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
