CSS Grid Interactive Demo

Grid Container Properties

Control how the grid container behaves and how it lays out its items.

grid-template-columns:

grid-template-rows:

gap:

grid-auto-flow:

Number of grid items:

1

2

3

4

5

6

7

8

9

Current CSS


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  grid-auto-flow: row;
}

Container Properties Explained

grid-template-columns / grid-template-rows: Define the columns and rows of the grid with a space-separated list of values. Each value represents the size of the respective track.
gap (grid-gap): Sets the gaps (gutters) between rows and columns. You can specify one value for both or two values (row-gap column-gap).
grid-auto-flow: Controls how auto-placed items flow into the grid. 'row' fills by row, 'column' fills by column, and 'dense' attempts to fill in holes earlier in the grid.

Grid Item Properties

Control how individual grid items are placed and sized within the grid.

Selected Item:

grid-column-start:

grid-column-end:

grid-row-start:

grid-row-end:

Grid Area Shorthand: Format: row-start / column-start / row-end / column-end

1

2

3

4

5

6

7

8

9

Current CSS


.grid-item:nth-child(1) {
  grid-column: auto / auto;
  grid-row: auto / auto;
}

Item Properties Explained

grid-column-start / grid-column-end: Determines which column lines an item starts and ends at.
grid-row-start / grid-row-end: Determines which row lines an item starts and ends at.
grid-column / grid-row: Shorthand for start/end properties, e.g., "grid-column: 1 / 3;"
grid-area: Shorthand for row-start / column-start / row-end / column-end.

Grid Template Areas

Define named grid areas for more intuitive layout creation.

grid-template-areas:

grid-template-columns:

grid-template-rows:

Content

Current CSS


.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Grid Areas Explained

grid-template-areas: Defines a grid template by naming grid areas. Each name represents a cell, and each group of names represents a row.
grid-area: Assigns a name to a grid item so it can be referenced by grid-template-areas.
Common layouts: Grid areas make it easy to create common layouts like "holy grail" (header, footer, content, two sidebars) without complex positioning.

Responsive Grid

Create grids that adapt to different screen sizes and content amounts.

Auto Layout:

Minimum column width: 100px

Number of items:

1

2

3

4

5

6

Current CSS


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

Responsive Grid Explained

auto-fit vs auto-fill: Both create as many tracks as will fit in the container. auto-fit collapses empty tracks, while auto-fill keeps them.
minmax(): Sets a minimum and maximum size range for a track, perfect for responsive designs.
Responsive approach: Using repeat(auto-fit, minmax(min-width, 1fr)) creates a responsive grid that adapts to container width without media queries.

Resize the browser window to see how the grid adapts to different widths.

Grid Alignment

Control how grid items are aligned both in their cells and how the grid itself is aligned.

justify-items: (item alignment horizontally)

align-items: (item alignment vertically)

justify-content: (grid alignment horizontally)

align-content: (grid alignment vertically)

1

2

3

4

5

6

Current CSS


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(2, 80px);
  gap: 10px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
  height: 300px; /* Fixed height to demonstrate alignment */
  width: 100%;
}

Alignment Properties Explained

justify-items / align-items: Controls alignment of items within their grid cells. justify-items works horizontally, align-items works vertically.
justify-content / align-content: Controls alignment of the entire grid within the grid container when the grid is smaller than the container. justify-content works horizontally, align-content works vertically.
Visualizing the difference: The dashed border shows the container bounds. The grid items are placed within the 3x2 grid, which can be positioned within the container.

Common Grid Patterns

Explore ready-to-use grid patterns for various layout scenarios.

Select Pattern:

Pattern CSS


/* Select a pattern from the dropdown */

Common Grid Patterns

Holy Grail Layout: The classic web layout with header, footer, content area, and two sidebars.
Card Layout: Responsive grid of equal-sized cards, perfect for products, blog posts, etc.
Masonry-style Layout: Grid items of varying heights arranged to minimize gaps.
Dashboard Layout: Arrangement of different-sized panels typically used for admin dashboards or data visualization.