https://github.com/chrisrowe/tailwindcss-grid

Brings grid support to Tailwind CSS
https://github.com/chrisrowe/tailwindcss-grid

tailwindcss tailwindcss-plugin

Last synced: 4 months ago
JSON representation

Brings grid support to Tailwind CSS

• Host: GitHub
• URL: https://github.com/chrisrowe/tailwindcss-grid
• Owner: chrisrowe
• Created: 2018-06-29T12:56:33.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-19T08:16:26.000Z (over 4 years ago)
• Last Synced: 2024-02-28T15:36:13.852Z (4 months ago)
• Topics: tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 27.3 KB
• Stars: 117
• Watchers: 4
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Lists

• awesome-stars - tailwindcss-grid - Brings grid support to Tailwind CSS (JavaScript)
• awesome-stars - tailwindcss-grid - Brings grid support to Tailwind CSS (JavaScript)
• awesome-tailwindcss - Grid - Adds CSS grids utilities. (Plugins)

README

        
# CSS Grid Tailwind Plugin

## Configuration options

- `grids` for specifying all of the grid sizes you'd like to generate

- `gaps` for specifying the gap sizes you'd like to generate

- `autoMinWidths` for specifying min width to columns using auto-fit and minmax

- `variants` for specifying which variants to generate

```js

module.exports = {

  // ...

  plugins: [

    // ...

    require('tailwindcss-grid')({

      grids: [2, 3, 5, 6, 8, 10, 12],

      gaps: {

        0: '0',

        4: '1rem',

        8: '2rem',

        '4-x': '1rem',

        '4-y': '1rem',

      },

      autoMinWidths: {

        '16': '4rem',

        '24': '6rem',

        '300px': '300px',

      },

      variants: ['responsive'],

    }),

  ],

}

```

With zero configuration, it will generate grids from 1 to 12 columns in size, no gap sizes, and `responsive` variants for each new utility.

## Generated classes

The plugin generates the following sets of classes:

- `.grid` for setting `display: grid` on an element

- `.grid-columns-{size}` for specifying the number of columns in the grid

- `.col-span-{columns}` for specifying how many columns a cell should span

- `.grid-gap-{size}` for specifying the size of the gap between columns/rows, if the name ends with -x or -y `grid-[column/row]-gap` will be used

- `.grid-automin-{size}` for applying the minimum width of the columns using auto-fit and minmax (the max is 1fr)

- `.col-start-{line}` and `.col-end-{line}` for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps)

- `.row-span-{columns}` for specifying how many rows a cell should span

- `.row-start-{line}` and `.row-end-{line}`, for specifying a cell's start and end grid lines explicitly (useful for reordering cells or leaving gaps)

- `.grid-dense` applies `grid-auto-flow: dense`

It's not really practical to expose all of the power of CSS Grid through utilities, but this plugin is a good example of using CSS Grid to replace a cell-only float or Flexbox grid.

---

### Credit

This repo was originally isolated from [https://github.com/tailwindcss/plugin-examples](https://github.com/tailwindcss/plugin-examples) to publish to npm.

Credit and thanks to [@adamwathan](https://github.com/adamwathan) - [view original demo](https://tailwindcss.github.io/plugin-examples/#css-grid)