Skip to content

Instantly share code, notes, and snippets.

@neodigm

neodigm/grid_system.html

Last active August 5, 2019 20:15
Show Gist options
  • Save neodigm/2fc8ae87a12566e79cf97a981e61e3ac to your computer and use it in GitHub Desktop.
Save neodigm/2fc8ae87a12566e79cf97a981e61e3ac to your computer and use it in GitHub Desktop.
Download ZIP
A simple grid system based on Flexbox.
Raw
grid_system.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>v2 standard grid system</title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Site UX interactive Prototype">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link href="css/grid_system.css" rel="stylesheet">
</head>
<body>
<style>
.proto_block {
background-color: #464DAD;
border: solid 1px #fff;
height: 112px;
font-size: 16px;
color: #fff;
}
.proto_block:nth-child(1) { filter: brightness(120%); }
.proto_block:nth-child(2) { filter: brightness(140%); }
.proto_block:nth-child(3) { filter: brightness(160%); }
.proto_block:nth-child(4) { filter: brightness(180%); }
.proto_block:nth-child(5) { filter: brightness(200%); }
.proto_block:nth-child(6) { filter: brightness(220%); }
</style>
<main role="main">
<section class="grd50_50 grdWrap">
<div class="grdItem--center proto_block">grd50_50</div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd25_25_25_25 grdWrap">
<div class="grdItem--center proto_block">grd25_25_25_25</div>
<div class="grdItem--center proto_block"></div>
<div class="grdItem--center proto_block"></div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd25_25_50 grdWrap">
<div class="grdItem--center proto_block">grd25_25_50</div>
<div class="grdItem--center proto_block"></div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd25_50_25 grdWrap">
<div class="grdItem--center proto_block">grd25_50_25</div>
<div class="grdItem--center proto_block"></div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd25_75 grdWrap">
<div class="grdItem--center proto_block">grd25_75</div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd33_33_33 grdWrap">
<div class="grdItem--center proto_block">grd33_33_33</div>
<div class="grdItem--center proto_block"></div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd33_66 grdWrap">
<div class="grdItem--center proto_block">grd33_66</div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd50_25_25 grdWrap">
<div class="grdItem--center proto_block">grd50_25_25</div>
<div class="grdItem--center proto_block"></div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd50_50 grdWrap">
<div class="grdItem--center proto_block">grd50_50</div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd66_33 grdWrap">
<div class="grdItem--center proto_block">grd66_33</div>
<div class="grdItem--center proto_block"></div>
</section>
<section class="grd75_25 grdWrap">
<div class="grdItem--center proto_block">grd75_25</div>
<div class="grdItem--center proto_block"></div>
</section>
</main>
<style>
@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){
.grd100 .img-fluid,.grd25_25_25_25 .img-fluid,.grd25_25_50 .img-fluid,.grd25_50_25 .img-fluid,.grd25_75 .img-fluid,.grd33_33_33 .img-fluid,.grd33_66 .img-fluid,.grd50_25_25 .img-fluid,.grd50_50 .img-fluid,.grd66_33 .img-fluid,.grd75_25 .img-fluid{
max-width:100%;
height:auto;
width:96%}
.grd33_66 .grdItem--center:nth-child(1){
order:0;
flex:34 1;
padding:12px 12px 12px 0}
.grd33_66 .grdItem--center:nth-child(2){
order:1;
flex:66 1;
padding:12px 0 12px 12px}
}
.grd100,.grd25_25_25_25,.grd25_25_50,.grd25_50_25,.grd25_75,.grd33_33_33,.grd33_66,.grd50_25_25,.grd50_50,.grd66_33,.grd75_25{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-content:center;
align-items:flex-start;
margin:0 auto;
max-width:1920px}
.grd100 .img-fluid,.grd25_25_25_25 .img-fluid,.grd25_25_50 .img-fluid,.grd25_50_25 .img-fluid,.grd25_75 .img-fluid,.grd33_33_33 .img-fluid,.grd33_66 .img-fluid,.grd50_25_25 .img-fluid,.grd50_50 .img-fluid,.grd66_33 .img-fluid,.grd75_25 .img-fluid{
max-width:100%;
height:auto}
.grd-stretch{
align-items:stretch!important}
.grdItem--center{
align-self:stretch}
.grd100 .grdItem--center:nth-child(1){
order:0;
flex:1 1;
}
.grd50_50 .grdItem--center:nth-child(1){
order:0;
flex:1 1;
}
.grd50_50 .grdItem--center:nth-child(2){
order:1;
flex:1 1;
}
.grd75_25 .grdItem--center:nth-child(1){
order:0;
flex:2 1;
}
.grd75_25 .grdItem--center:nth-child(2){
order:1;
flex:1 1;
}
.grd25_75 .grdItem--center:nth-child(1){
order:0;
flex:1 1;
}
.grd25_75 .grdItem--center:nth-child(2){
order:1;
flex:2 1;
}
.grd33_33_33 .grdItem--center:nth-child(1){
order:0;
flex:1 1;
}
.grd33_33_33 .grdItem--center:nth-child(2){
order:1;
flex:1 1;
}
.grd33_33_33 .grdItem--center:nth-child(3){
order:2;
flex:1 1;
}
.grd25_25_25_25 .grdItem--center:nth-child(1){
order:0;
flex:1 1;
}
.grd25_25_25_25 .grdItem--center:nth-child(2){
order:1;
flex:1 1;
}
.grd25_25_25_25 .grdItem--center:nth-child(3){
order:2;
flex:1 1;
}
.grd25_25_25_25 .grdItem--center:nth-child(4){
order:3;
flex:1 1;
}
.grd25_25_50 .grdItem--center:nth-child(1){
order:0;
flex:1 1;
}
.grd25_25_50 .grdItem--center:nth-child(2){
order:1;
flex:1 1;
}
.grd25_25_50 .grdItem--center:nth-child(3){
order:2;
flex:2 1;
}
.grd50_25_25 .grdItem--center:nth-child(1){
order:0;
flex:2 1;
}
.grd50_25_25 .grdItem--center:nth-child(2){
order:1;
flex:1 1;
}
.grd50_25_25 .grdItem--center:nth-child(3){
order:2;
flex:1 1;
}
.grd25_50_25 .grdItem--center:nth-child(1){
order:0;
flex:1 1;
}
.grd25_50_25 .grdItem--center:nth-child(2){
order:1;
flex:2 1;
}
.grd25_50_25 .grdItem--center:nth-child(3){
order:2;
flex:1 1;
}
.grd33_66 .grdItem--center:nth-child(1){
order:0;
flex:34 1 34vw;
}
.grd33_66 .grdItem--center:nth-child(2){
order:1;
flex:66 1 66vw;
}
.grd66_33 .grdItem--center:nth-child(1){
order:0;
flex:66 1 66vw;
}
.grd66_33 .grdItem--center:nth-child(2){
order:1;
flex:34 1 34vw;
}
.grdHeight_100{
max-height:100px}
.grdHeight_200{
max-height:200px}
.grdHeight_300{
max-height:300px}
.grdHeight_400{
max-height:400px}
.grdHeight_500{
max-height:500px}
.grdHeight_600{
max-height:600px}
.grdWrap{ display: block; }
@media only screen
and (min-width: 375px)
and (max-width: 667px){ /* small *//* mobile 44.875em */
}
@media only screen
and (min-width: 668px)
and (max-width: 1064px){ /* medium *//* tablet 47.750em */
.grdWrap{ display: flex; }
}
@media only screen
and (min-width: 1065px){ /* large *//* laptop 66.563em */
.grdWrap{ display: flex; }
}
</style>
</body>
</html>
@neodigm
Copy link
Author

neodigm commented Aug 5, 2019

Sorry, no ASCII art in this gist....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment