Skip to content

Instantly share code, notes, and snippets.

@beardlessman

beardlessman/flex-grid.css

Last active July 20, 2017 09:32
Show Gist options
  • Save beardlessman/03b36e9727499cf9dd5caeffaffb7033 to your computer and use it in GitHub Desktop.
Save beardlessman/03b36e9727499cf9dd5caeffaffb7033 to your computer and use it in GitHub Desktop.
Download ZIP
flexbox grid layout
Raw
flex-grid.css
/* 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%;
}
}
Raw
index.html
<div class="row">
<div class="col-1-2"></div>
<div class="col-1-2"></div>
</div><!-- /.row -->
<div class="row">
<div class="col-2-3"></div>
<div class="col-1-3"></div>
</div><!-- /.row -->
<div class="row">
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
</div><!-- /.row -->
<div class="row">
<div class="col-1-8"></div>
<div class="col-1-8"></div>
<div class="col-1-8"></div>
<div class="col-1-8"></div>
<div class="col-1-8"></div>
<div class="col-1-8"></div>
<div class="col-1-8"></div>
<div class="col-1-8"></div>
</div><!-- /.row -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment