Grid Weaver By Mossawir Ahmed

Visually design CSS grid layouts and generate code with responsive controls.

Global Grid Structure (Desktop View)

Adjust grid parameters. Rows/Columns are global. Gaps and default item alignments can be overridden per breakpoint.

Rows (Global)

Columns (Global)

Row Gap

Column Gap

Default Item Justification (justify-items)

Default Item Alignment (align-items)

Responsive View Controls

Switch views to define item layouts and container styles (gaps, default alignments) for different screen sizes. New items can only be added in Desktop view.

Live Preview (Desktop View)

Grid container below reflects styles for the current breakpoint. Click and drag on empty space to define a new grid item. Click an existing item to select it. Drag selected item's handles to resize. The '×' delete button on an item is only available in Desktop view. Click the background to deselect.

Generated Code

Copy the CSS (with responsive media queries), HTML structure, and Tailwind CSS markup for your project.

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px;
  column-gap: 10px;
  justify-items: stretch;
  align-items: stretch;
  /* Recommended: Add a height and width to the container */
  /* height: 400px; */
  /* width: 100%; */
  /* border: 1px solid hsl(var(--border)); */
}