This is a flexbox based grid using containers that contain
blocks. If there is to be a
max-width applied, then it
should be applied to containers. This system also uses wrappers to
properly display backgrounds that are not restricted by a maximum width and so are
effectively full width.
Media Query Prefixes
All of the modifier classes that can be applied with the
block have a media query prefix.
smfor small screens and up.
mdfor medium screens and up.
lgfor large screens and up.
xlfor extra-large screens and up.
<div class="container sm-nowrap md-wrap"> <div class="block"> Content... </div> </div>
Fixed Block Widths
This grid can give blocks a fixed width based on 12 units per row. The classes used
are based on the media query you want affected, and how many units you want the block
to occupy. For instance, the
sm-12 class will give the block a 100% width for small
screens and up.
<div class="wrapper"> <div class="container"> <div class="block sm-12 md-6 lg-4"> Content... </div> <div class="block sm-12 md-6 lg-4"> Content... </div> <div class="block sm-12 lg-4"> Content... </div> </div> </div>
12 Columns Per Row Fixed Width Blocks
There are many modifier classes for both containers and blocks. These maostly have to do with flexbox's arrangement and positioning, but also has to do with grid specific properties like the use of gutters.
NOTE: All classes are prefixed with the breakpoint they apply to.
row-reverse- Reverses the order of the blocks in the container
wrap- Allows for content to wrap to the next row.
nowrap- Prevents wrapping of content to the next row.
wrap-reverse- Reverses the wrapping direction of blocks.
All alignment is based on the
flex-direction of the container. If a modifier is used
to reverse any direction of the flow of blocks, then these alignment classes will work
to the opposite direction. Excluding the middle and center classes.
align-top- Align blocks to the top of the container.
align-middle- Align blocks to the vertical middle of the container.
align-bottom- Align blocks to the bottom of the container.
align-left- Align blocks to the left of the container.
align-center- Align blocks to the horizonal center of the container.
align-right- Align blocks to the right of the container.
space-between- puts space between blocks.
space-around- puts space around blocks, even if no block is ajacent.
stretch- stretches blocks to fill the width of the container.
no-gutters- removes gutters from blocks.
This list excludes fixed width classes.
Order classes can be added by simply a breakpoint prefix,
order-, and a number.
This grid only supports
order-1 up to
Setting the order of a block for medium screens and up
<div class="container"> <div class="block sm-12 md-6 md-order-2"> I am now to the right of the next block on medium screens and up. </div> <div class="block sm-12 md-6"> I am below the first block on small screens, but to the left on medium screens and up. </div> </div>
I am now to the right of the next block on medium screens and up.
I am below the second block on small screens, but to the left on medium screens and up.
blocks can independently align themselves based on