Grid Items

Grid Items

Grid items are the direct children of a grid container. Unlike Flexbox, Grid lets you place items in two dimensions: across columns and rows.

The most common way to place items is using grid lines:

• grid-column / grid-row – shorthand placement
• grid-column-start, grid-column-end
• grid-row-start, grid-row-end

Example: place an item across columns 1–3:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.hero {
  grid-column: 1 / 3;
}

Example: place an item by row and column:

.card {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Tip: You can also use span to span a number of tracks:

.banner {
  grid-column: 1 / span 3;
}

Grid Item Named

You can name areas in your grid and then assign items to those areas. This is great for page layouts (header/sidebar/content/footer).

1) Define named areas on the container:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 14px;

  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

2) Assign items to areas:

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

This approach is easy to read and makes layout changes very safe.

Grid Item Align

You can align items inside their cells globally (on the container) or per-item (on the item).

Container alignment (all items):

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;

  justify-items: center; /* horizontal inside cells */
  align-items: center;   /* vertical inside cells */
}

Per-item override:

.item-right {
  justify-self: end;
}

.item-bottom {
  align-self: end;
}

Tip: Grid supports both justify-* and align-* because it controls both axes.

Grid Item Order

Grid items can overlap if they share the same grid space or if you intentionally place them on top of each other. In that case, stacking order is controlled by z-index (and source order).

Overlap example:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 120px);
}

.a {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  z-index: 1;
}

.b {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  z-index: 2; /* on top */
}

Note: CSS Grid also supports the order property (similar to Flexbox), but it is mainly useful with auto-placement. In most grid layouts, explicit placement (grid-column/grid-row) and z-index are clearer.

.item-1 { order: 2; }
.item-2 { order: 1; }

Summary

• Place grid items using grid-column/grid-row (lines or span).
• Use grid-template-areas + grid-area for readable named layouts.
• Align items with justify-items/align-items or per-item with justify-self/align-self.
• Control overlap stacking with z-index (and source order).