@jill64/tailwind-grid-auto NPM

@jill64/tailwind-grid-auto

🌀 A Tailwind CSS plugin for auto adjusting grid

Demo

// tailwind.config.js
import gridAuto from '@jill64/tailwind-grid-auto'

const config = {
  // ...
  plugins: [
    gridAuto
    // ...
  ]
}

export default config

Usage

<div class="inline-grid cols-auto-2">
  <!–- ... -–>
</div>

Configuration

Name	CSS
`cols-auto-1`	`grid-template-columns: repeat(1, auto)`
`cols-auto-2`	`grid-template-columns: repeat(2, auto)`
`cols-auto-3`	`grid-template-columns: repeat(3, auto)`
`cols-auto-4`	`grid-template-columns: repeat(4, auto)`
`cols-auto-5`	`grid-template-columns: repeat(5, auto)`
`cols-auto-6`	`grid-template-columns: repeat(6, auto)`
`cols-auto-7`	`grid-template-columns: repeat(7, auto)`
`cols-auto-8`	`grid-template-columns: repeat(8, auto)`
`cols-auto-9`	`grid-template-columns: repeat(9, auto)`
`rows-auto-1`	`grid-template-rows: repeat(1, auto)`
`rows-auto-2`	`grid-template-rows: repeat(2, auto)`
`rows-auto-3`	`grid-template-rows: repeat(3, auto)`
`rows-auto-4`	`grid-template-rows: repeat(4, auto)`
`rows-auto-5`	`grid-template-rows: repeat(5, auto)`
`rows-auto-6`	`grid-template-rows: repeat(6, auto)`
`rows-auto-7`	`grid-template-rows: repeat(7, auto)`
`rows-auto-8`	`grid-template-rows: repeat(8, auto)`
`rows-auto-9`	`grid-template-rows: repeat(9, auto)`

You can configure which values are available for this plugin under the gridAuto key in your tailwind.config.js file:

// tailwind.config.js
import gridAuto from '@jill64/tailwind-grid-auto'

const config = {
  theme: {
    extend: {
      gridAuto: {
        10: '10',
        11: '11',
        12: '12'
      }
    }
  }
  // ...
}

export default config

Alternatively, you can use square bracket notation.