Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Grid of evenly-spaced items using text-align: justify. No need to set spacing in between columns! Changing grid item width and bottom margin is the only thing you need to tweak inside your media queries to redefine columns-per-row for different breakpoints.
// container for evenly-spaced grid items
.l-spaced-grid {
text-align: justify;
font-size: 0;
&:after {
content: '';
display: inline-block;
width: 100%;
}
}
// evenly-spaced grid items
.l-grid-item {
font-size: 16px;
@include inline-block; // compass inline-block mixin
vertical-align: top;
width: 18%; // desired column width
margin-bottom: 2.25%; // spacing below grid items
// just for demo purposes
padding-bottom: 18%;
background: #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment