grid-center
所属分类：工具库
开发工具：TypeScript
文件大小：0KB
下载次数：0
上传日期：2021-06-13 18:58:49
上 传 者：
sh-1993
说明： 网格“放置项目”实用程序@downwindcss灵活中心，但用于网格
(Grid "place-items" utilities. @downwindcss flex-center but for grid)
文件列表:
LICENSE (1065, 2021-06-13)
package.json (1420, 2021-06-13)
pnpm-lock.yaml (304541, 2021-06-13)
src/ (0, 2021-06-13)
src/gridCenter.ts (655, 2021-06-13)
src/index.ts (69, 2021-06-13)
test/ (0, 2021-06-13)
test/gridCenter.test.ts (6091, 2021-06-13)
tsconfig.json (1502, 2021-06-13)
# @downwindcss/grid-center
Tailwind CSS utilities for placing items.
Instead of
1. `grid place-items-center`, do `grid-center`
1. `grid place-items-start`, do `grid-start`
1. `grid place-items-end`, do `grid-end`
1. `grid place-items-stretch`, do `grid-stretch`
This does more than "centering" items but named as `@downwindcss/grid-center`
to match existing flex utility [@downwindcss/flex-center](https://github.com/downwindcss/flex-center).
## Installation
```bash
npm install @downwindcss/grid-center
# using Yarn
yarn add @downwindcss/grid-center
# with PNPM
pnpm install @downwindcss/grid-center
```
## Configuration
In your Tailwind CSS configuration file, tailwindcss.config.js,
add the plugin after following the installation step above.
module.exports = {
plugins: [require('@downwindcss/grid-center')]
}
Only responsive variant is enabled by default.
Same as `place-items-*` utility: https://tailwindcss.com/docs/place-items#variants
## Example
**Demo**: https://codesandbox.io/s/grid-center-demo-s7puu?file=/public/index.html
```html
grid-center
grid-center
grid-center
grid-center
```
## Motivation
A reddit user, [u/tortus](https://www.reddit.com/user/tortus/) left a ([comment](https://www.reddit.com/r/tailwindcss/comments/nyqo31/flexcenter_utility_downwindcssflexcenter/h1movvi/?utm_source=reddit&utm_medium=web2x&context=3)) for `grid place-items-center`.
近期下载者：
相关文件：
收藏者：