What this post is about:
How to easily and cleanly code a responsive grid without adapting somebody else’s “Grid System” to your code. I’m not talking about the entire page layout, I’m talking about when you need a list that is arranged in a responsive grid instead of a stacked list (think ecommerce products or staff profiles).
A short story about why.
If you are reading this, my daily routine is most likely very similar to yours. I get to the office, check my email, browse reddit and then dive right into code. Generally speaking, shortly after that I will run across my first problem of the day. I then jump right onto Google and do some searching. Every once in a while I find myself asking why the answers I’m finding are the generally accepted answers to a problem.
That’s where this post comes in. I searched best practices on how to code a responsive grid and all I could find was a bunch of “Grid Systems” that were available and top lists on which ones were the best. On top of that, I found a bunch of posts that recommended using jQuery and/or Mosaic (jQuery plugin). While those are great, I felt it was a bit overkill for what I was trying to accomplish. So instead of messing with someone else’s prefab setup, I took a step back and conferred with my colleagues about a simpler solution. This is what we came up with.
How to code a responsive grid that allows for each list item to have a variable height (without using Masonry or other javascript magic).
It’s basically just an unordered list, with a hint of logic to generate the classes. Below is our (WordPress in this case) loop and the counter we use to check if the list item will ever be the first item in a row.
<?php if($post->have_posts()) : ?>
<ul class="grid">
<?php $count = 0; // initialize the counter ?>
<?php while($post->have_posts()) : $post->the_post(); ?>
<?php // check against the counter for which class(es) to echo ?>
<li class="<?php if($count % 2 == 0){echo "two-column-clear ";} if($count % 3 == 0){echo "three-column-clear ";} if($count % 4 == 0){echo "four-column-clear ";} $count++; ?>">
/* list item content here */
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
and this is what is produced.
<ul class="grid"> <li class="two-column-clear three-column-clear four-column-clear"></li> <li class=""></li> <li class="two-column-clear"></li> <li class="three-column-clear"></li> <li class="two-column-clear four-column-clear"></li> <li class=""></li> <li class="two-column-clear three-column-clear"></li> <li class=""></li> <li class="two-column-clear four-column-clear"></li> <li class="three-column-clear"></li> <li class="two-column-clear"></li> <li class=""></li> </ul>
Once you have the grid structure intact, the CSS is relatively simple (of course with whatever media query widths you need).
/* setup the grid li's */
.grid li {
/* setup li styles */
list-style: none;
float: left;
margin-bottom: 30px;
margin-left: 2%;
/* 2 column width */
width: 49%;
/* added only to show list items for this example */
background: #cccccc;
font-color: #ffffff;
display: inline-block;
vertical-align: middle;
}
/* 3 column width */
@media screen and (min-width: 550px) {
.grid li {
width: 32%;
}
}
/* 4 column width */
@media screen and (min-width: 1100px) {
.grid li {
width: 23%;
}
}
Now its time to apply responsive styles to the classes you generated in the loop. These will override the base styles (clears and margins) only in the breakpoints you specified.
/* 2 column */
@media screen and (max-width: 549px) {
.grid li.two-column-clear {
clear: left;
margin-left: 0px;
}
}
/* 3 column */
@media screen and (min-width: 550px) and (max-width: 1099px) {
.grid li.three-column-clear {
margin-left: 0px;
clear: left;
}
}
/* 4 column */
@media screen and (min-width: 1100px) {
.grid li.four-column-clear {
margin-left:0px;
clear: left;
}
}