Four equidistant inline-block columns that break into 4, 2, 1 as the viewport gets skinny

Not a developer? Read this post first.

In the StudioPress.com forum a person asked about having her columns naturally collapse so that the content will be 4 columns where there’s the width for it and, as the viewport decreases in width, the columns will start stacking in to 2 and then 1 column. The column classes that come with Genesis, Bootstrap, and others don’t do that. They use floats. You can use Flexbox or you can use inline-block. Flexbox is still buggy in IE11. We should have World Wide celebrations when IE finally gets their act together, but I don’t see that coming anytime ever.

Since I was working with the current classes she used and tried to make things as simple as possible, I created the following CSS and html to use. If you use the Add Media feature in WordPress to insert the content inside these columns, make sure you use alignment none.

See a Demo

HTML

 <!-- begin demo -->
  
<!--begin inline-block wrapper -->
<div class="inline-block-wrapper">
   
  <div class="break-point"><!--empty-for-formatting--></div>
  
   <!--one-fourth.inline-col -->
   <div class="one-fourth inline-col first">
      <img src="http://placehold.it/300x300/d74c08/ffffff" alt="">
      <p>Interim executive leadership</p>
   </div>
  
   <!--one-fourth.inline-col -->
   <div class="one-fourth inline-col">
      <img src="http://placehold.it/300x300/65ac10/ffffff" alt="">
      <p>Strategic planning and facilitation</p>
   </div>
  
   <div class="break-point"><!--empty-for-formatting--></div>
  
   <!--one-fourth.inline-col -->
   <div class="one-fourth inline-col">
      <img src="http://placehold.it/300x300/138394/ffffff" alt="">
      <p>Community engagement</p>
   </div>
  
   <!--one-fourth.inline-col -->
   <div class="one-fourth inline-col">
      <img src="http://placehold.it/300x300/8634ad/ffffff" alt="">
      <p>Organizational coaching</p>
   </div>
  
  
</div>
<!--close inline-block wrapper -->

<!-- end demo -->

CSS

You will probably have to adjust the media query value in one or both or make a new one based on your .wrap and the padding and other media queries. This CSS goes after all other CSS in your theme to be safe that it doesn’t interfere with others, though it’s specific and should be fine. Actually, put these after all your CSS because the media queries in your style.css file are pretty specific.

.inline-col.one-fourth {
    margin: 0;
    float: none;
    display: inline-block;
    vertical-align: top;
    width: 150px;
    text-align: center;
}

.inline-block-wrapper {
    text-align: justify;
}

.inline-block-wrapper:after {
    content: '';
    width: 100%;
    display: inline-block;
}

.inline-block-wrapper .break-point {
    display: none
}

@media (max-width:700px) { 
  
	.inline-block-wrapper {
	    max-width:450px;
	}
  
	.inline-block-wrapper .break-point {
	    display: inline-block;
	    width: 100%;
	    height: 1px;
	}
}

@media (max-width:400px) { 
	.inline-col.one-fourth {
	    margin: 0 auto;
	    display: block;
	}
}

All the best,

Affiliate Notice: I have affiliate links all over the place for companies I recommend. By purchasing through these links you help to support my family and to keep my blog going.