Flexbox grid system featuring infinitely nestable rows/columns with automatic sizing and utility classes for column offsets, wrapping, ordering, alignment, and space distribution.
A Pen by Mark Hillard on CodePen.
Flexbox grid system featuring infinitely nestable rows/columns with automatic sizing and utility classes for column offsets, wrapping, ordering, alignment, and space distribution.
A Pen by Mark Hillard on CodePen.
/* ========================================================================================= | |
Global | |
========================================================================================= */ | |
/* Google Fonts */ | |
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap"); | |
/* General */ | |
html, | |
body { | |
-webkit-font-smoothing: antialiased; | |
-webkit-text-size-adjust: 100%; | |
background-color: #fff; | |
color: #2e3532; | |
font-family: "Outfit", sans-serif; | |
font-size: 100%; | |
font-weight: 400; | |
height: 100%; | |
letter-spacing:.03rem; | |
line-height: 1.618; | |
overflow-x: hidden; | |
} | |
main { | |
margin: 3rem 0; | |
} | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
} | |
@media screen and (max-width: 800px) { | |
main { | |
margin: 2rem 0; | |
} | |
} | |
/* Typography */ | |
h1, | |
h2 { | |
font-weight: inherit; | |
line-height: 1.2; | |
margin: 2rem 0 1rem; | |
} | |
h1 { | |
font-size: 3.5rem; | |
font-weight: 800; | |
} | |
h2 { | |
font-size: 2rem; | |
font-weight: 600; | |
} | |
p { | |
font-size:1.2rem; | |
margin-bottom: 2.4rem; | |
} | |
/* Demo Overrides */ | |
.row { | |
background-color: rgba(0, 0, 0, .035); | |
} | |
.row .row { | |
background-color: transparent; | |
} | |
.row .col, | |
.row [class*=" col-"], | |
.row [class^="col-"] { | |
background-color: rgba(126, 145, 129, .35); | |
font-size: 1.3rem; | |
} | |
.row .col::before, | |
.row [class*=" col-"]::before, | |
.row [class^="col-"]::before { | |
content: attr(class); | |
display: block; | |
overflow: hidden; | |
padding: .865rem; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
/* ========================================================================================= | |
Snap 2.0 (Grid) | |
========================================================================================= */ | |
/* Container (Base Width) | |
================================================== */ | |
.container { | |
margin: 0 auto; | |
max-width: 960px; | |
padding: 0 1rem; | |
width: 90%; | |
} | |
/* Global (Rows & Columns) | |
================================================== */ | |
.row { | |
display: flex; | |
flex-direction: row; | |
margin: 0 -1rem; | |
position: relative; | |
} | |
.row .row { | |
padding: 0; | |
} | |
.row .col, | |
.row [class*=" col-"], | |
.row [class^="col-"] { | |
flex: 1 1 100%; | |
margin: 1rem; | |
min-width: 0; | |
position: relative; | |
} | |
.row .row .col, | |
.row .row [class*=" col-"], | |
.row .row [class^="col-"] { | |
margin-bottom: 0; | |
margin-top: 0; | |
} | |
/* .row .col:empty, | |
.row [class*=" col-"]:empty, | |
.row [class^="col-"]:empty { | |
display: none !important; | |
} */ | |
/* Column Wrapping | |
================================================== */ | |
.row.wrap { | |
flex-wrap: wrap; | |
} | |
/* Reverse Column Ordering | |
================================================== */ | |
.row.reverse { | |
flex-direction: row-reverse; | |
} | |
/* Column Ordering (Desktop) | |
================================================== */ | |
.row .col.desktop-first, | |
.row [class*=" col-"].desktop-first, | |
.row [class^="col-"].desktop-first { | |
order: -1; | |
} | |
.row .col.desktop-last, | |
.row [class*=" col-"].desktop-last, | |
.row [class^="col-"].desktop-last { | |
order: 1; | |
} | |
/* Vertical Column Alignment | |
================================================== */ | |
.row.align-top { | |
align-items: flex-start; | |
} | |
.row.align-middle { | |
align-items: center; | |
} | |
.row.align-bottom { | |
align-items: flex-end; | |
} | |
/* Horizontal Column Alignment | |
================================================== */ | |
.row.align-start { | |
justify-content: flex-start; | |
} | |
.row.align-center { | |
justify-content: center; | |
} | |
.row.align-end { | |
justify-content: flex-end; | |
} | |
/* Shrink Columns | |
================================================== */ | |
.row.shrink > .col, | |
.row.shrink > [class*=" col-"], | |
.row.shrink > [class^="col-"] { | |
flex: 0 0 auto; | |
} | |
/* Column Distribution | |
================================================== */ | |
.row.around { | |
justify-content: space-around; | |
} | |
.row.between { | |
justify-content: space-between; | |
} | |
/* Grid (12 Columns) | |
================================================== */ | |
.row .col-12 { | |
flex-basis: 100%; | |
max-width: 100%; | |
} | |
.row .col-11 { | |
flex-basis: 91.666%; | |
max-width: 91.666%; | |
} | |
.row .col-10 { | |
flex-basis: 83.333%; | |
max-width: 83.333%; | |
} | |
.row .col-9 { | |
flex-basis: 75%; | |
max-width: 75%; | |
} | |
.row .col-8 { | |
flex-basis: 66.666%; | |
max-width: 66.666%; | |
} | |
.row .col-7 { | |
flex-basis: 58.333%; | |
max-width: 58.333%; | |
} | |
.row .col-6 { | |
flex-basis: 50%; | |
max-width: 50%; | |
} | |
.row .col-5 { | |
flex-basis: 41.666%; | |
max-width: 41.666%; | |
} | |
.row .col-4 { | |
flex-basis: 33.333%; | |
max-width: 33.333%; | |
} | |
.row .col-3 { | |
flex-basis: 25%; | |
max-width: 25%; | |
} | |
.row .col-2 { | |
flex-basis: 16.666%; | |
max-width: 16.666%; | |
} | |
.row .col-1 { | |
flex-basis: 8.333%; | |
max-width: 8.333%; | |
} | |
/* Column Offset | |
================================================== */ | |
.row .offset-11 { | |
margin-left: 91.666% !important; | |
} | |
.row .offset-10 { | |
margin-left: 83.333% !important; | |
} | |
.row .offset-9 { | |
margin-left: 75% !important; | |
} | |
.row .offset-8 { | |
margin-left: 66.666% !important; | |
} | |
.row .offset-7 { | |
margin-left: 58.333% !important; | |
} | |
.row .offset-6 { | |
margin-left: 50% !important; | |
} | |
.row .offset-5 { | |
margin-left: 41.666% !important; | |
} | |
.row .offset-4 { | |
margin-left: 33.333% !important; | |
} | |
.row .offset-3 { | |
margin-left: 25% !important; | |
} | |
.row .offset-2 { | |
margin-left: 16.666% !important; | |
} | |
.row .offset-1 { | |
margin-left: 8.333% !important; | |
} | |
/* Media Queries (Rows & Columns) | |
================================================== */ | |
/* Mobile & Tablet */ | |
@media screen and (max-width: 800px) { | |
.container { | |
padding: 0; | |
} | |
.row { | |
flex-direction: column; | |
} | |
.row.reverse { | |
flex-direction: column-reverse; | |
} | |
.row .col, | |
.row [class*=" col-"], | |
.row [class^="col-"] { | |
flex-basis: 100%; | |
max-width: 100%; | |
} | |
.row .col.desktop-first, | |
.row .col.desktop-last, | |
.row [class*=" col-"].desktop-first, | |
.row [class*=" col-"].desktop-last, | |
.row [class^="col-"].desktop-first, | |
.row [class^="col-"].desktop-last { | |
order: unset; | |
} | |
.row [class*="offset-"] { | |
margin-left: 1rem !important; | |
} | |
} | |
/* Tablet */ | |
@media only screen and (min-width:480px) and (max-width:800px) { | |
.row.tablet { | |
flex-direction: row; | |
} | |
} | |
/* Mobile */ | |
@media only screen and (max-width:479px) { | |
.row { | |
align-items: unset !important; | |
margin: 0; | |
} | |
.row .col, | |
.row [class*=" col-"], | |
.row [class^="col-"] { | |
margin: 1rem 0; | |
} | |
.row [class*="offset-"] { | |
margin-left: 0 !important; | |
} | |
} | |
/* Automatic Clearing | |
================================================== */ | |
.container::after, | |
.row:not(.between):not(.around)::after, | |
.row [class*=" col-"]::after, | |
.row [class^="col-"]::after, | |
.clearfix::after { | |
clear: both; | |
content: ""; | |
display: table; | |
} |
<main> | |
<header> | |
<div class="container"> | |
<h1>Snap 2.0</h1> | |
<p>Flexbox grid system featuring infinitely nestable rows/columns with automatic sizing and utility classes for column offsets, wrapping, ordering, alignment, and space distribution.</p> | |
</div> | |
</header> | |
<section id="base-grid"> | |
<div class="container"> | |
<h2>12 Column Grid</h2> | |
<div class="row"> | |
<div class="col-12"></div> | |
</div> | |
<div class="row"> | |
<div class="col-1"></div> | |
<div class="col-11"></div> | |
</div> | |
<div class="row"> | |
<div class="col-2"></div> | |
<div class="col-10"></div> | |
</div> | |
<div class="row tablet"> | |
<div class="col-3 desktop-last"></div> | |
<div class="col-9 desktop-first"> | |
<div class="row"> | |
<div class="col-8"> | |
<div class="row"> | |
<div class="col"></div> | |
<div class="col"></div> | |
</div> | |
</div> | |
<div class="col-4"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-4"></div> | |
<div class="col-8"></div> | |
</div> | |
<div class="row"> | |
<div class="col-5"></div> | |
<div class="col-7"></div> | |
</div> | |
<div class="row"> | |
<div class="col-6"></div> | |
<div class="col-6"></div> | |
</div> | |
<div class="row"> | |
<div class="col-7"></div> | |
<div class="col-5"></div> | |
</div> | |
<div class="row"> | |
<div class="col-8"></div> | |
<div class="col-4"></div> | |
</div> | |
<div class="row"> | |
<div class="col-9"></div> | |
<div class="col-3"></div> | |
</div> | |
<div class="row"> | |
<div class="col-10"></div> | |
<div class="col-2"></div> | |
</div> | |
<div class="row"> | |
<div class="col-11"></div> | |
<div class="col-1"></div> | |
</div> | |
<div class="row"> | |
<div class="col-12"></div> | |
</div> | |
</div> | |
</section> | |
<section id="automagic"> | |
<div class="container"> | |
<h2>Automagic Columns</h2> | |
<div class="row"> | |
<div class="col"> | |
<div class="row tablet"> | |
<div class="col"></div> | |
<div class="col"></div> | |
<div class="col"></div> | |
<div class="col"></div> | |
<div class="col"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row tablet"> | |
<div class="col"></div> | |
<div class="col"> | |
<div class="row"> | |
<div class="col"></div> | |
<div class="col"></div> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col"></div> | |
<div class="col"></div> | |
<div class="col"></div> | |
</div> | |
<div class="row"> | |
<div class="col"></div> | |
<div class="col"></div> | |
<div class="col"></div> | |
<div class="col"></div> | |
</div> | |
</div> | |
</section> | |
<section id="wrapping"> | |
<div class="container"> | |
<h2>Column Wrapping</h2> | |
<div class="row wrap"> | |
<div class="col-2"></div> | |
<div class="col-3"></div> | |
<div class="col-4"></div> | |
<div class="col-5"></div> | |
</div> | |
</div> | |
</section> | |
<section id="offset"> | |
<div class="container"> | |
<h2>Column Offset</h2> | |
<div class="row"> | |
<div class="col-12"></div> | |
</div> | |
<div class="row"> | |
<div class="col-11 offset-1"></div> | |
</div> | |
<div class="row"> | |
<div class="col-10 offset-2"></div> | |
</div> | |
<div class="row"> | |
<div class="col-9 offset-3"></div> | |
</div> | |
<div class="row"> | |
<div class="col-8 offset-4"></div> | |
</div> | |
<div class="row"> | |
<div class="col-7 offset-5"></div> | |
</div> | |
<div class="row"> | |
<div class="col-6 offset-6"></div> | |
</div> | |
<div class="row"> | |
<div class="col-5 offset-7"></div> | |
</div> | |
<div class="row"> | |
<div class="col-4 offset-8"></div> | |
</div> | |
<div class="row"> | |
<div class="col-3 offset-9"></div> | |
</div> | |
<div class="row"> | |
<div class="col-2 offset-10"></div> | |
</div> | |
<div class="row"> | |
<div class="col-1 offset-11"></div> | |
</div> | |
</div> | |
</section> | |
<section id="v-alignment"> | |
<div class="container"> | |
<h2>Vertical Column Alignment</h2> | |
<div class="row tablet align-middle"> | |
<div class="col-5"></div> | |
<div class="col-7"> | |
<div class="row"> | |
<div class="col"></div> | |
<div class="col"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section id="h-alignment"> | |
<div class="container"> | |
<h2>Horizontal Column Alignment</h2> | |
<div class="row tablet align-center"> | |
<div class="col-2"></div> | |
<div class="col-4"> | |
<div class="row"> | |
<div class="col"></div> | |
<div class="col"></div> | |
</div> | |
</div> | |
<div class="col-2"></div> | |
</div> | |
</div> | |
</section> | |
<section id="distribution"> | |
<div class="container"> | |
<h2>Column Distribution</h2> | |
<div class="row tablet between"> | |
<div class="col-2"></div> | |
<div class="col-4"></div> | |
<div class="col-2"></div> | |
</div> | |
<div class="row tablet around"> | |
<div class="col-3"></div> | |
<div class="col-3"></div> | |
<div class="col-3"></div> | |
</div> | |
</div> | |
</section> | |
</main> |
// ███████ ███ ██ █████ ██████ ██████ ██████ | |
// ██ ████ ██ ██ ██ ██ ██ ██ ██ ████ | |
// ███████ ██ ██ ██ ███████ ██████ █████ ██ ██ ██ | |
// ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ | |
// ███████ ██ ████ ██ ██ ██ ███████ ██ ██████ |