Skip to content

Instantly share code, notes, and snippets.

@ridgehkr
Created June 12, 2013 19:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ridgehkr/5768265 to your computer and use it in GitHub Desktop.
Save ridgehkr/5768265 to your computer and use it in GitHub Desktop.
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