bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
88 lines
2.4 KiB
Markdown
88 lines
2.4 KiB
Markdown
---
|
|
name: layout-grid
|
|
description: CSS Grid utilities including grid-cols, grid-rows, gap, place-items, and grid placement
|
|
---
|
|
|
|
# Grid
|
|
|
|
Utilities for CSS Grid layouts: columns, rows, gap, and item placement.
|
|
|
|
## Usage
|
|
|
|
### Grid columns and rows
|
|
|
|
```html
|
|
<div class="grid grid-cols-3 gap-4">3 equal columns</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">Responsive</div>
|
|
<div class="grid grid-cols-none">No explicit tracks</div>
|
|
|
|
<div class="grid grid-rows-3 gap-2">3 rows</div>
|
|
<div class="grid grid-rows-[auto_1fr_auto]">Custom rows</div>
|
|
```
|
|
|
|
### Custom grid template
|
|
|
|
```html
|
|
<div class="grid grid-cols-[200px_minmax(900px,1fr)_100px]">Custom template</div>
|
|
<div class="grid grid-cols-(--my-cols)">CSS variable</div>
|
|
```
|
|
|
|
### Subgrid
|
|
|
|
```html
|
|
<div class="grid grid-cols-4 gap-4">
|
|
<div>01</div><div>02</div><div>03</div><div>04</div>
|
|
<div>05</div>
|
|
<div class="col-span-3 grid grid-cols-subgrid gap-4">
|
|
<div class="col-start-2">06</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Gap
|
|
|
|
```html
|
|
<div class="grid gap-4">Uniform gap</div>
|
|
<div class="grid gap-x-2 gap-y-4">Different x/y</div>
|
|
```
|
|
|
|
### Place items (align + justify)
|
|
|
|
```html
|
|
<div class="grid place-items-center">Center both</div>
|
|
<div class="grid place-items-start">Start both</div>
|
|
<div class="grid items-center justify-center">Equivalent</div>
|
|
```
|
|
|
|
### Grid placement (col/row span and start)
|
|
|
|
```html
|
|
<div class="grid grid-cols-4 gap-4">
|
|
<div class="col-span-2">Spans 2 columns</div>
|
|
<div class="col-start-3">Starts at col 3</div>
|
|
<div class="row-span-2">Spans 2 rows</div>
|
|
<div class="col-span-full">Full width</div>
|
|
</div>
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- `grid` / `inline-grid` - Grid container (see layout-display)
|
|
- Columns: `grid-cols-{n}`, `grid-cols-none`, `grid-cols-subgrid`, `grid-cols-[...]`
|
|
- Rows: `grid-rows-{n}`, `grid-rows-[...]`
|
|
- Gap: `gap-{n}`, `gap-x-{n}`, `gap-y-{n}`
|
|
- Placement: `col-span-{n}`, `col-start-{n}`, `row-span-{n}`, `row-start-{n}`
|
|
- `col-span-full` / `row-span-full` - span all
|
|
- `place-items-*` - shorthand for align + justify
|
|
- Use `grid-cols-[...]` for custom templates like `minmax()` or `repeat()`
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/grid-template-columns
|
|
- https://tailwindcss.com/docs/grid-template-rows
|
|
- https://tailwindcss.com/docs/gap
|
|
- https://tailwindcss.com/docs/place-items
|
|
- https://tailwindcss.com/docs/grid-column
|
|
- https://tailwindcss.com/docs/grid-row
|
|
-->
|