Subscribe

CSS Grid Item

✍️

Today we are diving deeper into the grid item properties.

17 Jul, 2020 · 3 min read

We had our basic introduction to CSS Grid, The Grid Container, and today we are looking into the Grid Item.

HTML Structure

Let’s start by making a grid template that is five by five.

<div class="grid">
  <!-- Row 1 -->
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- Row 2 -->
  ...
</div>

CSS Item

In our first introduction, we saw how to span an item over multiple blocks; let’s dive deeper into that.

CSS Grid-column property

The property has multiple ways of describing the width of an item.

  • grid-column: 1 / 5;: Starts on column one end before column five
  • grid-column: 1 / span 3; Start on column one and span three columns
  • grid-column: 2 / span 3; Start on column two and span three columns
  • grid-column: span 3; Span three from wherever it starts

Have a look at this Codepen:

See the Pen CSS Grid Item Column by Chris Bongers (@rebelchris) on CodePen.

CSS Grid-row property

Like the grid-column, we can also use the grid row to stack over rows.

  • grid-row: 1 / 4; Start on row one and end on row four
  • grid-row: 1 / span 2; Start on one and span two rows
  • grid-row: span 2; Span two from anywhere

See the Pen CSS Grid Item Row by Chris Bongers (@rebelchris) on CodePen.

CSS Grid-area

We can also make a grid area to span both columns and rows.

grid-area: 1 / 2 / 5 / 6; Meaning: Start on Row 1, Column 2 and end at Row 5 Column 6

That will result in the following Codepen:

See the Pen CSS Grid Item Area by Chris Bongers (@rebelchris) on CodePen.

CSS Grid Naming Areas

Another cool feature is we can name areas!

.grid {
  grid-template-areas: 'Custom Custom . . .' 'Custom Custom . . .';
}

This will make two rows, with the names Custom columns and three unnamed columns.

And then on our item:

.item {
  grid-area: Custom;
}

This will result in the following:

See the Pen CSS Grid Area by Chris Bongers (@rebelchris) on CodePen.

Browser Support

CSS Grid has support from all major browsers, we have some issues in IE, but they can be Polyfilled.

CSS Grid support

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2099 devs and subscribe to my newsletter