Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisrowe/tailwindcss-grid
Brings grid support to Tailwind CSS
https://github.com/chrisrowe/tailwindcss-grid
tailwindcss tailwindcss-plugin
Last synced: 15 days 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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-19T08:16:26.000Z (over 4 years ago)
- Last Synced: 2024-10-04T23:06:22.085Z (about 1 month ago)
- Topics: tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 27.3 KB
- Stars: 117
- Watchers: 4
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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)