15 49.0138 8.38624 1 0 4000 1 https://cssgridguide.com 300

Changing the order and position of grid items

0 Comment

One of the great features of the CSS Grid module is the ability to disassociate the order of elements in the HTML source code from the order of appearance on the front-end. Assuming you have a website layout with a sidebar on the left side, you could quickly move it to the right within seconds, simply by changing a few lines of CSS in your stylesheet.

In this CSS Grid layout tutorial, we’ll look at how to swap elements on the grid easily via the use of the following attributes:

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

First, let’s place some div tags on a page. We’ll need one main div to serve as the grid container, and nine other div tags to serve as the grid items. Notice that in the code snippet below, we’re using relevant classes to properly differentiate the various elements.

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
  <div class="item item5">Item 5</div>
  <div class="item item6">Item 6</div>
  <div class="item item7">Item 7</div>
  <div class="item item8">Item 8</div>
  <div class="item item9">Item 9</div>
</div>

We need to declare the grid container and define its columns and rows with CSS.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 130px 50px;
}

We have a grid now, but if we were to preview the code we have so far, it wouldn’t be very apparent. This is because we’ve not added any borders or background colors to our grid items, yet. Let’s improve that by having a set of CSS declarations for the .item class.

.item {
  background-color: #FF9800;
  border: 1px solid #fff;
  padding: 5px;
}

Example of grid items displayed in sequential order.

Above is what our grid currently looks like. As you can see, we have white borders here, and a lot of the times, your grid probably won’t have any borders at all. That’s fine, but the point here is that when you’re creating grids, it is very important that you keep in mind the concept of grid lines.

The moment you create a grid and define a structure with grid items, you are dealing with grid lines, and these allow you to shift or even swap grid items flexibly in your design. Essentially, in your mind, you should see the image above just as the one below. The red lines serve to demonstrate that our grid actually has 4 column grid lines (4 vertical lines), and 4 row grid lines (4 horizontal lines).

Example of CSS grid lines.

At the moment, Item 1 stretches from the first row grid line to the second one, and from the first column grid line to the second one. But what if we wanted to move Item 1 to the third grid cell by swapping its position with Item 3? Here is what we would first need to add to our CSS:

.item1 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

The first two declarations instruct the Item 1 element to start from the third grid column line and continue until it reaches the fourth one. The other two declarations force it to stretch vertically from the first row grid line to the second. This gives us the following result:

Item 1 has now moved to Item 3's position on the grid.

Item 1 has indeed moved to Item 3‘s initial position, forcing the latter to be dragged to the second spot in our first grid track. That’s a good start, but it’s not really what we want. What we need to do now is instruct Item 3 to move to the first position in the upper left area of our grid, to give Item 2 its original position back.

The following CSS rule solves this challenge:

.item3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

Item 3 has now moved to Item 1's original position on the grid.

Mission accomplished; but we can still take this a bit further. Let’s say we want the items 4, 5 and 6 to each occupy a full row on the grid, we can easily stretch them to full size without using the width property. Here is how:

.item4, .item5, .item6 {
  grid-column-start: 1;
  grid-column-end: 4;
}

This produces an interesting result. The items 4, 5 and 6 are now each occupying one full row, but then they have difference heights.

Items 4, 5 and 6 are stretched.

Let’s try to understand what happened, there. Earlier on, we set the following declaration for our .container element: grid-template-rows: 80px 130px 50px;

This set the first row to 80px in height, the second row to 130px, and the third row to 50px. Defining only three rows made sense because, at first, we had a 3×3 grid. With the recent changes we’ve made, we need five rows.

The items 1-5 take up the first three rows with the heights we defined for our grid container, whereas the other items are automatically pushed to new rows with heights corresponding to their content. In other words, the text’s font size, line-height and the padding we previously defined for the .item class determine the heights of these elements.

So that’s pretty much it CSS Grid properties we covered in this layout tutorial. As you practice with them, you will realize how powerful they really are, and how much time they can save you when it comes to item placement on a page.

Previous Post
Welcome to CSS Grid Guide!
Next Post
Sample Code: Creating a flexible website structure

0 Comment

Leave a Reply