Bulma 101: Grid Layout

Three years ago, I posted something on Bulma while trying to figure out how navigation works with it.  After my post on CSS Grid, I figured that I would show how to do a grid-based layout with Bulma.

See the Pen
Bulma 101: Layout
by Joe Steinbring (@steinbring)
on CodePen.

By default, the column spacing is set to auto.  You can use classes like is-full, is-three-quarters, is-two-thirds, is-three-fifths, or is-half to tweak the column widths, though.

So, are you better off using CSS Grid or CSS Grid via Bulma?  There are pluses and minuses with both.  You will notice that the pen has no CSS or JavaScript in it.  You will also notice that there is more HTML in it.  I think that there is more room for problems with the straight CSS Grid route.  If the spacing is defined by a global library and used throughout the project, you know that everything will be uniform.

Have any questions, comments, etc?  Leave them in the comments, below.

Leave a Reply

Your email address will not be published. Required fields are marked *