Is this tool free to use?

Yes. Every public Alexonic tool is completely free to use with no charge.

Do I need an account?

No account is required for public tools. Some private/admin features may be separate from the public site.

Can I use this tool for work?

Yes, but verify important results before using them in production, payroll, finance, tax, or business decisions.

Do you save my tool data?

No. We do not save your tool inputs or generated results. We value customer privacy, but you should still avoid entering sensitive personal, banking, password, customer, or confidential business data into public web tools.

How can I report an issue or request a tool?

Send feedback to the developer if you see an issue, need a new tool, or require an update. We continue building and fixing each day.

CSS Grid Playground

Build CSS grid layouts visually

Tune grid tracks, gaps, item alignment, and content distribution while the preview and generated CSS update instantly.

Live previewGrid alignmentCopy CSS

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 72px);
  gap: 12px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

Controls

justify-content and align-content are easiest to see when the grid tracks are smaller than the preview container.

columns

rows

gap (px)

Number of items

justify-items

align-items

justify-content

align-content

Container height (px)

Live preview

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 72px);
  gap: 12px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

Related tools

Design tools

BEM Class Generator

Generate BEM class names and sample HTML from a block, elements, and modifiers with single-dash or double-dash modifier conventions.

Design tools

Color Blindness Simulator

See how any hex color looks under four types of color vision deficiency: protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia (full color blindness).

Design tools

Color Mixer

Blend two colors with a ratio slider and get the mixed result in HEX, RGB, and HSL. Includes a full gradient strip with clickable swatches to copy any stop.

Design tools

CSS Box Shadow Generator

Create CSS box shadows visually. Add multiple shadow layers with control over offset, blur, spread, color, opacity, and inset. Live preview and copy-ready CSS.

Help & answers

Frequently Asked Questions

Important disclaimer: Alexonic Tools is completely free to use. There is no charge, and we do not save tool inputs or generated results. We value customer privacy and keep building and fixing each day. Always verify important financial, payroll, legal, tax, business, or production-code results before relying on them. If you see an issue, need a tool, or require an update, send feedback to the developer.