Flexbox Responsive Grid

HTML
<html lang="en"> <head> <meta charset="UTF-8"> <title>Flexbox Grid System</title> <link rel="stylesheet" href="css/fb-grid.css"> </head> <body> <div class="row"> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> </div> <div class="row"> <div class="col col-span-1">1</div> <div class="col col-span-2">2</div> <div class="col col-span-3">3</div> <div class="col col-span-4">4</div> <div class="col col-span-2">2</div> </div> <div class="row"> <div class="col col-span-5">5 <p></p> <p></p> </div> <div class="col col-span-3">3</div> <div class="col col-span-4">4</div> </div> <div class="row"> <div class="col col-span-6">6 <div class="row nested"> <div class="col col-span-7">7</div> <div class="col col-span-2">2</div> <div class="col col-span-3">3</div> </div> </div> <div class="col col-span-6">6 <div class="row nested wide-fit"> <div class="col col-span-7">7</div> <div class="col col-span-2">2</div> <div class="col col-span-3">3</div> </div> </div> </div> <div class="row center"> <div class="col col-span-6">6 <div class="row nested wide-fit"> <div class="col col-span-7">7</div> <div class="col col-span-2">2</div> <div class="col col-span-3">3</div> </div> </div> </div> <div class="row center"> <div class="col col-span-3">3</div> <div class="col col-span-3">3</div> </div> <div class="row"> <div class="col col-span-7">7</div> <div class="col col-span-2">2</div> <div class="col col-span-3">3</div> </div> <div class="row"> <div class="col col-span-8">8</div> <div class="col col-span-1">1</div> <div class="col col-span-3">3</div> </div> <div class="row"> <div class="col col-span-9">9</div> <div class="col col-span-1">1</div> <div class="col col-span-2">2</div> </div> <div class="row"> <div class="col col-span-10">10</div> <div class="col col-span-1">1</div> <div class="col col-span-1">1</div> </div> <div class="row"> <div class="col col-span-11">11</div> <div class="col col-span-1">1</div> </div> <div class="row"> <div class="col col-span-12">12</div> </div> <div class="row center"> <div class="col col-span-6">6</div> </div> <div class="row center"> <div class="col col-span-3">3</div> <div class="col col-span-3">3</div> </div> <div class="row"> <div class="col fixed-width"> <p>Fixed width column</p> </div> <div class="col"> <div class="row nested"> <div class="col col-span-7">7</div> <div class="col col-span-2">2</div> <div class="col col-span-3">3</div> </div> </div> </div> <div class="row"> <div class="col fixed-width"> <p>Fixed width column</p> </div> <div class="col"> <div class="row nested wide-fit"> <div class="col col-span-7">7</div> <div class="col col-span-2">2</div> <div class="col col-span-3">3</div> </div> </div> </div> </body> </html>
CSS
.row { margin-top: 0.5rem; display: flex; flex-direction: row; flex-wrap: wrap; } .col { flex: 1 1 8%; margin: 0 0 0.5rem 0; padding: 0.5em 10px; box-sizing: border-box; } /* nested grids */ .row .row, .row.nested { flex: 1 1 auto; margin-top: -0.5em; } /* full width grids */ .row.wide-fit { margin-left: -10px; margin-right: -10px; } /* center grids */ .row.center { justify-content: center; } .center .col { flex-grow: 0; flex-shrink: 0; } /* columns widths */ .col-span-1 { flex-basis: 8.3333%; } .col-span-2 { flex-basis: 16.6666%; } .col-span-3 { flex-basis: 25%; } .col-span-4 { flex-basis: 33.3333%; } .col-span-5 { flex-basis: 41.6666%; } .col-span-6 { flex-basis: 50%; } .col-span-7 { flex-basis: 58.3333%; } .col-span-8 { flex-basis: 66.6666%; } .col-span-9 { flex-basis: 75%; } .col-span-10 { flex-basis: 83.3333%; } .col-span-11 { flex-basis: 91.6666%; } .col-span-12 { flex-basis: 100%; } /* examples */ .fixed-width { flex: 0 0 500px; background-color: rgba(255,0,0,0.1) !important; } @media all and (max-width: 568px) { .col-span-1, .col-span-2, .col-span-3, .col-span-4, .col-span-5 { flex-basis: 50%; } .col-span-6, .col-span-7, .col-span-8, .col-span-9, .col-span-10, .col-span-11 { flex-basis: 100%; } .nested .col { flex-basis: 100%; } } /* eye candy */ body { font-family: sans-serif; } .row { background-color: #cccccc; background-color: rgba(0,0,0,0.1); } .col { background-color: #999999; background-color: rgba(0,0,0,0.2); background-clip: content-box; border: 1px solid rgba(0,0,0,0.1); }
JAVASCRIPT
/* I'm playing with flexbox to build a future proof fluid and responsive grid system. Flexbox is AWESOME on this task because it do every single thing a grid user need: - fluid columns with fluid gutters; - fluid columns with fixed gutters; - fixed columns with fluid gutters; - fixed columns and fluid columns on the same row; - nested grids with or without side gutters; - centered columns; - centered nested grids with or without side gutters; - equal heights of columns on the same row; - responsive layouts with media queries changing only the flex-basis property. While building a solid system and a generator tool (I'm developing an inline-block grid generator tool) I'm playing here. */
Expand for more options Login