Skip to main content
View plugin on GitHub
See starters using this

gatsby-remark-grid-system

gatsby-remark-grid-system is a plugin that creates responsive layouts from markdown files

Motivation As much as i like blogs, do they all have to be single coloum? Arguably if you’re using gatsby-pugin-mdx this is not problem but… if your blog / site / app uses .md this might be worth a look.

👁️ Preview

🚀 Getting started

Install

npm install @pauliescanlon/gatsby-remark-grid-system

Setup

Add gatsby-transformer-remark to your gatsby-config.js then add @pauliescanlon/gatsby-remark-grid-system as a plugin of that 😅

module.exports = {
  ...
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`@pauliescanlon/gatsby-remark-grid-system`],
      },
    },
  ],
}

Options

Option Type Reqiured Default Description
breakpoints array no [576, 768, 992, 1200] bootstrap inspired breakpoints
padding number no 16 padding applied to each col
debug boolean no false adds an outline to each col
...
plugins: [
  {
    resolve: `@pauliescanlon/gatsby-remark-grid-system`,
      options: {
        ...
     }
  },
]

📝 Markdown

TODO explain markdown a bit more ::: … row … col …

::: div row

::: div col 12|6|7|9
   left content 1
:::

::: div col 12|6|5|3
   right content 1
:::

:::