Grid Item Placement

Grid item placement controls where and how items are positioned within a grid container. CSS Grid Layout offers various properties to precisely place items into specific grid areas. This section covers different methods of grid item placement, including the use of grid lines and grid areas.

---

Placing Items in Grid Areas

Grid items can be placed in specific grid areas using a combination of grid line properties. These properties allow you to define the start and end points for rows and columns, giving you precise control over item positioning.

grid-column-start

The grid-column-start property specifies where an item should start along the horizontal axis of the grid. It can be set to a line number, a named line, or the keyword auto:

.item {
  grid-column-start: 2;
}

In this example, the item will start at the second vertical grid line.

grid-column-end

The grid-column-end property defines where an item should end along the horizontal axis. It can also be set to a line number, a named line, or auto:

.item {
  grid-column-end: 4;
}

In this example, the item will end at the fourth vertical grid line.

grid-row-start

The grid-row-start property specifies where an item should start along the vertical axis of the grid:

.item {
  grid-row-start: 1;
}

Here, the item will start at the first horizontal grid line.

grid-row-end

The grid-row-end property defines where an item should end along the vertical axis:

.item {
  grid-row-end: 3;
}

In this case, the item will end at the third horizontal grid line.

Using grid-area for Placement

The grid-area property is a shorthand for defining a grid item's size and location. It combines the values of grid-column-start, grid-column-end, grid-row-start, and grid-row-end into a single property:

.item {
  grid-area: 1 / 2 / 3 / 4;
}

In this example:

• The item starts at the first horizontal grid line.
• The item starts at the second vertical grid line.
• The item ends at the third horizontal grid line.
• The item ends at the fourth vertical grid line.

HTML Structure

<div class="grid-container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
  <div class="item item-4">Item 4</div>
</div>

CSS Grid Example

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

.item-1 {
  grid-area: 1 / 1 / 2 / 2;
}

.item-2 {
  grid-area: 1 / 2 / 2 / 4;
}

.item-3 {
  grid-area: 2 / 1 / 3 / 3;
}

.item-4 {
  grid-area: 2 / 3 / 3 / 4;
}

In this example, each grid item is placed in specific grid areas using the grid-area property. The grid is divided into three columns and two rows, with gaps between the items.

---

Conclusion

By understanding how to use grid line properties and the grid-area shorthand, you can gain precise control over item placement within your grid layouts. This flexibility allows for creating complex and well-structured designs with ease.