@pauliescanlon/gatsby-remark-grid-system

A Gatsby remark plugin for responsive grid systems in markdown 🍱

Markdown

Given the following markdown we can make multi-coloumn layouts across a maximum of 4 breakpoints

::: div row

    ::: div col 12|6|7|10
        left content
    :::

    ::: div col 12|6|5|2
        right content
    :::

:::

🤔 row

The row is used to start a new block level element and contain a set of col's to create a more dynamic layout

🤗 col 12|6|7|10

The numbers next to col indicates the number of columns you’d like to use. They are seperated by a pipe "|" to indicate which col width should apply at each of the breakpoints

Responsive

If you're on a "desktop" resize your browser to see the widths of the col's change. If you're on "mobile" you should just be seeing nicely stacked content.