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.
81 lines
1.7 KiB
Markdown
81 lines
1.7 KiB
Markdown
---
|
|
name: layout-columns
|
|
description: Multi-column layout with columns utility for masonry-like or newspaper layouts
|
|
---
|
|
|
|
# Columns
|
|
|
|
Utilities for CSS multi-column layout. Content flows into multiple columns within a single element.
|
|
|
|
## Usage
|
|
|
|
### By number of columns
|
|
|
|
```html
|
|
<div class="columns-3 gap-8">
|
|
<img class="aspect-3/2" src="1.jpg" />
|
|
<img class="aspect-square" src="2.jpg" />
|
|
<!-- Content flows into 3 columns -->
|
|
</div>
|
|
```
|
|
|
|
### By column width
|
|
|
|
Use container scale for ideal column width; column count adjusts automatically:
|
|
|
|
```html
|
|
<div class="columns-3xs gap-4">...</div>
|
|
<div class="columns-sm gap-6">...</div>
|
|
<div class="columns-md">...</div>
|
|
```
|
|
|
|
### Column gap
|
|
|
|
Use `gap-*` utilities for space between columns:
|
|
|
|
```html
|
|
<div class="columns-3 gap-8">...</div>
|
|
```
|
|
|
|
### Responsive
|
|
|
|
```html
|
|
<div class="columns-2 gap-4 sm:columns-3 sm:gap-8">...</div>
|
|
```
|
|
|
|
### Custom value
|
|
|
|
```html
|
|
<div class="columns-[30vw]">...</div>
|
|
<div class="columns-(--my-columns)">...</div>
|
|
```
|
|
|
|
### Column / page breaks
|
|
|
|
Use with multi-column or print layouts:
|
|
|
|
```html
|
|
<div class="columns-2">
|
|
<p>Content...</p>
|
|
<p class="break-after-column">Force break after this</p>
|
|
<p>Next column...</p>
|
|
</div>
|
|
```
|
|
|
|
- `break-after-column` / `break-before-column` - column break
|
|
- `break-after-page` / `break-before-page` - page break (print)
|
|
- `break-after-avoid` / `break-inside-avoid` - avoid breaking
|
|
|
|
## Key Points
|
|
|
|
- `columns-<n>` - fixed number of columns (e.g. `columns-3`)
|
|
- `columns-3xs` through `columns-7xl` - column width from container scale
|
|
- `columns-auto` - auto columns
|
|
- `gap-*` controls column gap (same as flex/grid gap)
|
|
- Use for magazine-style layouts, image galleries, long text
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/columns
|
|
-->
|