pure.CSS: responsive centered columns

Question

With Bootstrap 3 there is an easy solution to center multiple columns as described here: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

Would it be possible to do this with Yahoo pure.CSS? And if yes, how?

For your suggestions and help many thanks in advance!

Answer 1

You can accomplish this by creating a new CSS helper class to center the .pure-u-* items within a pure grid div (.pure-g):

.center {
  justify-content: center;
}

justify-content is used because .pure-g uses flexbox. Adding the .center class to the div that defines the pure grid will then center the children:

<div class="pure-g center" style="background-color:blue">
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:teal">
      column 1
    </div>
    <div class="pure-u-1 pure-u-md-1-3" style="background-color:red">
      column 2
    </div>
</div>

This CodePen has two examples of centered responsive grids.