Similar to most libraries, Custom Grid is laid out in 12 columns. However, instead of percentage widths, Custom Grid makes use of the 'span' property value of grid-column.
Note: it's possible to use more than 12 columns to make up the grid layout in order to have finer control of the column spanning. However, the grid-column propery cannot take a decimal value. So to keep the standard 2, 3 and 4 grid-item widths below, the max number of grid columns must be divisible by 12.
grid-item grid-item--is-full
grid-item grid-item--is-half
grid-item grid-item--is-half
grid-item grid-item--is-one-third
grid-item grid-item--is-one-third
grid-item grid-item--is-one-third
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-half
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-three-fourths
grid-item grid-item--is-one-fourth
grid-item grid-item--is-two-thirds
grid-item grid-item--is-one-third
Similar to how Bulma works, you can tell Custom Grid Items to span a specific number ot columns.
grid-item grid-item--is-6
grid-item grid-item grid-item--is-6
grid-item grid-item--is-3
grid-item grid-item--is-5
grid-item grid-item--is-4
Once you exceed the max number of columns, your grid items will wrap to the next line.
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
grid-item grid-item--is-one-fourth
Custom Grid will not respond until you tell it explicitly.
Like bulma, just append your grid item class with the media query you want:
The following grid items use these classes:
grid-item grid-item--is-half-tablet grid-item--is-one-third-desktop grid-item--is-one-fourth-xxl grid-item grid-item--is-{someCols}-{someMediaQuery}
grid-item grid-item--is-{someCols}-{someMediaQuery}
grid-item grid-item--is-{someCols}-{someMediaQuery}
grid-item grid-item--is-{someCols}-{someMediaQuery}
grid-item grid-item--is-{someCols}-{someMediaQuery}
grid-item grid-item--is-{someCols}-{someMediaQuery}
grid-item grid-item--is-{someCols}-{someMediaQuery}
grid-item grid-item--is-{someCols}-{someMediaQuery}
This works the same way with explicit column spans, just append your media query!
grid-item grid-item--is-6-desktop
grid-item grid-item--is-6-desktop
grid-item grid-item--is-6-desktop
grid-item grid-item--is-6-desktop
You can also reverse the flow of the grid items:
grid.grid--is-flipped Flip Me!
I start on the right