Use FlexBox or Grid in a simple layout design with reordering elements

Use FlexBox or Grid in a simple layout design with reordering elements

18th February 2019 0 By Azadeh

We all heard about where to use FlexBox and grid everywhere and still might wonder about it.

One of the many use cases and real word examples is when we need to change the order of the elements in the design.

We will have a look at the same simple design using FlexBox and Grid system to implement this and compare the solutions.

FlexBox – Grid

When do we use FlexBox and Grid

Generally it is kind of a good practice if we use Grid system for designing our layout and use FlexBox to align the content. However this is true for most use cases but in some cases we could use both or even choose FlexBox over Grid in design.

Using FlexBox

FlexBox

Basically in the pen below, I have used FlexBox to design a simple layout. Three simple boxes with different colours. I wanted to re order the boxes to the third one to be the first and the second one be the last one and the first one goes to the second place.

See the Pen Change Order of Elements By FlexBox by Azadeh Faramarzi (@azad6026) on CodePen.

The reason is I had a small design the other day and I couldn’t change the markup for a good reason and I had to reorder the sections. Therefore the best solution was using CSS. Using FlexBox. Practically after making the container a flexible parent, we need to use the order property as below to reshuffle the boxes:

.container{
display: flex;
}
.item{
flex:1;
}
.item1{
order: 3;
}
.item2{
order: 1;
}
.item3{
order: 2;
}

Using Grid

Additionally we could use grid instead of flex as the value of the display property in the parent container. Therefore we will have this pen:

See the Pen Change Order of Elements With Grid by Azadeh Faramarzi (@azad6026) on CodePen.

Therefore the code looks like this:

.container{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 1fr;
}

Although we don’t need to define the rows but I prefer that here for simplicity. Then we need to define which box belongs to which column.

.item1{
grid-column: 3/-1;
}
.item2{
grid-column: 1/2;
}
.item3{
grid-column: 2/3;
}

But with only this code you will see that the first box sits on the last column. However the other boxes feel into the next row. As a result they will not fill up the first row.

Actually this is how grid works. Because we asked the very first box i the markup to move to the last column in the grid. Then we asked the second one to sit in the first column and the last box to sit in the second column.

That is happening actually. But because the items follow each other in order in the grid, they cannot simply move up to the first row. So we need to add one more line of code to each box:

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

Specifying which row they should sit in and occupy. Finally the design is done.

Notebally this is not a preferred approach if we need the order of the text to change. Because this does not change the actual markup. And the text readers will read the content as it is in html.

But if we need to reorder some of the small sections we could use these techniques. FlexBox solution has less code and more flexibility it seems but if needed the layout to also be responsive we can consoder grid a better solution. Changing the teplate to have responsive code.

Thank you for reading.