Documentation: Grid Weaver By Mossawir Ahmed

Welcome to the Grid Weaver documentation. Here you'll find everything you need to know to master responsive CSS grid creation.

← Back to Grid Weaver App

Introduction

Grid Weaver is an interactive web application designed to help you visually create and configure CSS Grid layouts. It provides real-time feedback, responsive controls, and generates the necessary CSS, HTML, and Tailwind CSS markup for your projects.

The core idea is to define a base grid structure (Desktop), place and size items within it, and then adjust these items' layoutsand certain container properties (gaps, default item alignments) for different screen sizes (Tablet and Mobile) without altering the fundamental grid definition (number of rows/columns) or the items themselves—only their styling for those breakpoints.

1. Global Grid Structure (ActiveBreakpoint View)

Define the overall dimensions and default behaviors for your grid. Rows and Columns are global. Gaps and Default Item Alignments can be overridden per responsive view (Desktop, Tablet, Mobile).

This section, located at the top of the application, allows you to set parameters that apply to the entire grid container. The active responsive view (Desktop, Tablet, Mobile) determines which breakpoint's styles you are currently editing for Gaps and Default Item Alignments.

Rows (Global): The number of horizontal tracks in your grid. Minimum is 1. This setting is global and applies to all views.
Columns (Global): The number of vertical tracks in your grid. Minimum is 1. This setting is global and applies to all views.
Row Gap: The space between grid rows. Specify a numerical value and select a unit (px, em, rem, %, vh, vw). Editable per breakpoint.
Column Gap: The space between grid columns. Similar to Row Gap. Editable per breakpoint.
Default Item Justification (justify-items): Controls how items are aligned by default along their row axis (inline axis) within their grid cells. Options: Auto (behaves like Stretch), Start, End, Center, Stretch. Editable per breakpoint.
Default Item Alignment (align-items): Controls how items are aligned by default along their column axis (block axis) within their grid cells. Options: Auto (behaves like Stretch), Start, End, Center, Stretch. Editable per breakpoint.
Clear Button: This button's label and action change based on the active responsive view:
- In Desktop view, it's labeled "Clear All Desktop Items & Styles". Clicking it removes all items and resets desktop container styles (gaps, alignments) to application defaults.
- In Tablet view, it's labeled "Reset Tablet Layouts & Styles to Desktop". Clicking it removes all tablet-specific item layout overrides AND tablet-specific container style overrides, causing them to revert to their desktop/inherited styles on tablet screens.
- In Mobile view, it's labeled "Reset Mobile Layouts & Styles to Desktop". This removes all mobile-specific item layout AND container style overrides, reverting them to their tablet/inherited styles on mobile screens.

Example: In Desktop view, set 3 rows, 4 columns, 10px gaps, and `justify-items: center`. Then switch to Tablet view and change Row Gap to 20px and `justify-items: start`. The number of rows/columns remains 3x4, but the gap and default justification change for tablet screens.

/* Corresponding CSS for a 3x4 grid container (Desktop) */
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);
  row-gap: 10px;
  column-gap: 10px;
  justify-items: center;
  align-items: stretch;
}

@media (max-width: 990px) {
  .grid-container {
    row-gap: 20px; /* Tablet override */
    justify-items: start; /* Tablet override */
  }
  /* ... item overrides ... */
}

2. Responsive View Controls

Switch between Desktop, Tablet (≤990px), and Mobile (≤767px) views to define how your items and container adapt. Item properties (like name and background color) are set on Desktop and are global. Item layout properties (position, span, alignment) and container styles (gaps, default item alignments) can be overridden for Tablet and Mobile views.

Grid Weaver allows you to define item layouts and container styles specifically for different screen sizes. Use these buttons to switch your editing context:

Desktop: This is your base configuration. Items are added here, and their fundamental properties (like name and default background color) are set here. Container styles (gaps, default item alignments) set here are the base for other breakpoints. Layout changes made here affect the item's default appearance on all screen sizes unless overridden.
Tablet (≤990px): When this view is active, any changes you make to an item's layout (position, span, self-alignment) or to the container's styles (gaps, default item alignments) will be applied as overrides specifically for screens up to 990px wide.
Mobile (≤767px): Similar to tablet view, but for screens up to 767px wide. Mobile overrides take precedence over tablet overrides and desktop defaults on smaller screens.

Important: The global grid structure (total rows, columns) remains the same across all views. Responsive controls affect how individual items are placed/sized *within* that grid, and how the container itself (gaps, default item alignments) is styled for that breakpoint. You do not add or remove items in Tablet or Mobile views; you only adjust their layout or the container's responsive styles.

3. Live Preview (ActiveBreakpoint View)

Interact directly with the grid to create, select, and resize items. The preview reflects the container styles (gaps, etc.) for the active responsive view.

Creating New Items (Desktop View Only):

When the Desktop view is active, you can click and drag on an empty area of the grid preview to define a new grid item. The rectangle you draw will determine the initial row and column span of the new item. Each new item gets a distinct, semi-transparent background color by default from a predefined palette. New items cannot be created in Tablet or Mobile views.

Selecting Items:

Click on any existing item in the preview to select it. The selected item will be highlighted with an outline and resize handles, and its properties will appear in the "Item Properties" panel for editing within the context of the active responsive view. Clicking the background of the grid will deselect any item.

Resizing Items:

When an item is selected, eight circular resize handles will appear around its border. Click and drag any of these handles to change the item's dimensions (its row/column span) for the currently active responsive view. The resize will snap to grid lines, and you'll see a live preview of the change.

Removing Items / Resetting Layouts (Item's '×' Button):

Each item in the preview has a small '×' button at its top-right corner, but its visibility and function depend on the active view:

If Desktop view is active, clicking '×' deletes the item entirely from all views. This button is only visible in Desktop view.
In Tablet or Mobile view, the '×' button on the item itself is not visible. To reset an item's layout for these views, you must use the "Reset ... Layout" button within the "Item Properties" panel when that item is selected, or the global "Reset ... Layouts & Styles" button.

4. Item Properties (ActiveBreakpoint View)

Configure the selected grid item's details. This panel appears when an item is selected and its content adapts to the active responsive view.

When an item is selected in the Live Preview, this panel allows you to fine-tune its properties:

Name (grid-area): Sets the `grid-area` name for the item. This is a base property, editable only in Desktop view. The name is used for generating CSS class names.
Row Start / Row End / Col Start / Col End: Defines the lines the item occupies. Editable per breakpoint.
Justify Self / Align Self: Controls how the item is aligned within its grid area. Editable per breakpoint. Overrides the container's default `justify-items` / `align-items`.
Background Color: Sets a custom CSS background color. This is a base property, editable only in Desktop view.
Deselect Button: Clears the current item selection.
Delete/Reset Button: Contextual to the active responsive view (e.g., "Delete Item Entirely", "Reset Tablet Layout", "Reset Mobile Layout").

Changes made to layout properties (Row/Col Start/End, Justify/Align Self) in Tablet or Mobile views are stored as overrides. Name and Background Color are base properties.

5. Generated Code

Get the CSS, HTML, and Tailwind CSS markup for your designed grid, reflecting all responsive configurations.

This section provides the code you need to implement your grid layout, available in three tabs:

CSS Tab:

Displays the complete CSS. This includes:

The `.grid-container` class with base (Desktop) `grid-template-rows/columns`, gaps, `justify-items`, and `align-items`.
Individual classes for each item with their base (Desktop) layout and styles.
An `@media (max-width: 990px)` block containing CSS overrides for the `.grid-container` (if its gaps or alignments differ for tablet) and for items that have specific layout adjustments in Tablet view.
An `@media (max-width: 767px)` block for Mobile view overrides (container and items).

HTML Tab:

Provides a basic HTML structure with a `div.grid-container` and child `div`s for each item, including their class names and inline background color styles.

Tailwind CSS Tab:

Displays HTML markup with Tailwind CSS classes.

The parent `div` includes responsive classes for `grid-rows/cols`, gaps (e.g., `gap-4 md:gap-2 lg:gap-x-8`), `justify-items`, and `align-items`.
Each item `div` includes responsive Tailwind classes for its position, span, and self-alignment (e.g., `col-start-1 md:col-start-2 lg:row-span-1`), plus inline styles for background color.