zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
52a5d14a4e376bdd7f652e67e7e2e8e50d8b6eb3
zhaoguiyang.site/.agents/skills/tailwindcss/references/layout-grid.md
zguiyang bbb2f41591 feat: add new OpenSpec skills for change management and onboarding 
- 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.
2026-03-13 13:18:03 +08:00

2.4 KiB
Raw Blame History

name, description
name description
layout-grid 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

<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

<div class="grid grid-cols-[200px_minmax(900px,1fr)_100px]">Custom template</div>
<div class="grid grid-cols-(--my-cols)">CSS variable</div>

Subgrid

<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

<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)

<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)

<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()