CSS Grid Item

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

HTML Structure permalink

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 permalink

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

CSS Grid-column property permalink

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 permalink

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 permalink

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 permalink

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 permalink

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

Thank you for reading, and let’s connect! permalink

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