I love using the Bootstrap grid, but I always have float clearing issues. Other column class solutions tend to include a “first” class (example) to fix this. This code replicates that functionality.
Pass an array of bootstrap classes and the current count (starting from 0), and this function will add the proper “-first” classes on items that appear first in a row.
Do you use Bootstrap? What do you use for clearing floats? I can’t be the only person with this problem…
Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| if( have_posts() ): while( have_posts() ): the_post(); | |
| global $wp_query; | |
| $classes = ea_column_class( array( 'col-sm-6', 'col-md-4', 'col-lg-3' ), $wp_query->current_post ); | |
| echo '<div class="' . $classes . '">'; | |
| get_template_part( 'partials/archive', get_post_type() ); | |
| echo '</div>'; | |
| endwhile; endif; |
Code
Note: I’m using SASS and the include media library to simplify these media queries, but you can just as easily do this with standard CSS. Just change those @include media() lines to standard media queries.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Column Classes | |
| * | |
| * Adds "-first" classes when appropriate for clearing float | |
| * @see /assets/scss/partials/layout.scss | |
| * | |
| * @param array $classes, bootstrap-style classes, ex: array( 'col-lg-4', 'col-md-6' ) | |
| * @param int $current, current post in loop | |
| * @param bool $join, whether to join classes (return string) or return array | |
| * @return array/string $classes | |
| */ | |
| function ea_column_class( $classes = array(), $current = false, $join = true ) { | |
| if( false === $current ) | |
| return $classes; | |
| $columns = array( 2, 3, 4, 6 ); | |
| foreach( $columns as $column ) { | |
| if( 0 == $current % $column ) { | |
| $col = 12 / $column; | |
| foreach( $classes as $class ) { | |
| if( false != strstr( $class, (string) $col ) && false == strstr( $class, '12' ) ) { | |
| $classes[] = str_replace( $col, 'first', $class ); | |
| } | |
| } | |
| } | |
| } | |
| if( $join ) { | |
| return join( ' ', $classes ); | |
| } else { | |
| return $classes; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @include media(">=tablet", "<medium") { | |
| .col-sm-first { | |
| clear: both; | |
| } | |
| } | |
| @include media(">=medium", "<large") { | |
| .col-md-first { | |
| clear: both; | |
| } | |
| } | |
| @include media(">=large") { | |
| .col-lg-first { | |
| clear: both; | |
| } | |
| } |
Kel says
I’m interested to hear the long term expectations of support on float based “grid” systems in general. Float begone! Clear no more 🙂
Bootstrap 4 (er.. when it’s released) will move to a Flexbox “grid” system. Zurb’s Foundation 6.4 has already moved to Flexbox with their hybrid? XY Grid and I’d suspect they’ll also be first to implement “CSS Grid” itself now that it’s supported in (most) current browsers. Hopefully we’ll also continue seeing lighter CSS with regards to media queries too…
Bill Erickson says
I can’t wait to switch over to the CSS Grid. I’d love to see a lightweight CSS grid framework come out that isn’t wrapped up in a much larger CSS framework.
I use very little of bootstrap (see here).
Sridhar Katakam says
If it’s a fixed number of items in the grid (like a 3-column front page widget area), I use Flexbox. Fast and easy.
For a regular grid of say, posts, I use floats manually like this: https://pastebin.com/raw/wVQcqRfD
I use this calculator for getting the width and left margin values at my desired breakpoints: http://d.pr/i/WYlA9o
Bill Erickson says
If you’re using SASS you can do the math inline: https://gist.github.com/billerickson/47bdd4fa598e20f84c2b72b0a78d9189
But there’s a few things I like about Bootstrap:
1. Consistent gutter. When you’re using a percentage-based gutter (like your example), it’s not a fixed pixel amount at all sizes – it’s always different (proportional to wrapping element). For instance, if you put two
.one-halfdivs inside a.one-halfdiv, the smaller ones will also have a smaller gutter. It doesn’t look consistent.2. No math required. I just say how many columns are used at each breaking point and the style guide determines it.
For it to work well you really need a site designed with a 12 column grid in mind. But once you have that, it’s so nice. Define a few variables (gutter width, max width of site, small/medium/large break points) and everything just works.