Css Grid Generator MCP tool
findutils:css_grid_generator Generate a CSS Grid container declaration. sizing=equal gives repeat(n, 1fr); auto-fit and auto-fill give a responsive repeat(auto-fit, minmax(min_width, 1fr)) that needs no media query; custom takes your own track lists. Optional named areas are validated so every row declares the same number of cells, which is the usual reason a grid silently collapses. Returns the full rule, the separate template values, and the area names for the child rules.
Arguments
application/json-
columns
integer optional
Number of columns (1 to 24). Used by sizing=equal. Default 3. Default
3. -
rows
integer optional
Number of rows (0 to 24). 0 lets rows be implicit. Default 0. Default
0. -
gap
number optional
Gap between columns in px (0 to 200). Default 16. Default
16. -
row_gap
number optional
Gap between rows in px (0 to 200). Defaults to the column gap.
-
sizing
string optional
equal, auto-fit, auto-fill or custom. Default equal. One of
equal · auto-fit · auto-fill · custom. Default"equal". -
min_width
number optional
For auto-fit and auto-fill: the minimum track width in px (20 to 1000). Default 240. Default
240. -
column_template
string optional
For sizing=custom: a track list such as "200px 1fr 200px".
-
row_template
string optional
For sizing=custom: a row track list such as "auto 1fr auto".
-
areas
string optional
Optional named areas, one row per line or per quoted group, e.g. "header header" / "sidebar main".
Example arguments
Verified{
"columns": 3,
"gap": 16,
"sizing": "equal"
}More Generators tools
- Barcode Generator Generate a 1D barcode as an SVG string from text.
- Box Shadow Generator Generate a CSS box-shadow declaration from offset, blur, spread, colour, opacity, and inset settings, or from a named preset (subtle, soft…
- Caption Generator Generate a social-media caption from a topic using built-in templates (no AI): picks a template for the content type and tone, fills…
- Clip Path Generator Generate a CSS clip-path from a named shape (triangle, trapezoid, parallelogram, rhombus, pentagon, hexagon, octagon, star, chevron…
- Color Palette Generator Generate a harmonious colour palette from a base hex colour: complementary, analogous, triadic, tetradic, split-complementary…
- Css Animation Generator Return CSS @keyframes animation code (or Tailwind config, Web Animations API / React, or Framer Motion code) from a named preset such…