What is the CSS order property?

The order property in CSS sets items in a particular order within a grid or a flex container. The Order property is only meant to simulate the visible order of elements and not their logical order. Therefore, we should not use it in the non-visual aspects.

Syntax

The order property can have two types of values:

1. Integer values

2. Global values

Let's see the order property in action.

Apply the order property on a flex container

As an example, let's create an HTML page with a section containing four div elements and apply the CSS order property to the div:

Explanation

Note: The order property prioritizes the document flow. In the example above, the HTML code specifies div's in ascending order (div1, div2, and so on) but it is displayed in descending order because we used the order property in CSS.

HTML code

• The HTML code has a section tag with the class name as boxes. The section will have four div HTML elements on which we define the order property.

CSS code

• Line 1–6: We define general styles like padding and margin for the body tag.
• Line 8–12: We apply the CSS flex property for the container with the class name as boxes.
• Line 14–29: Here, we define the general CSS styles - padding, background color, etc.
• Line 31–45: For the div's within the section, we apply the nth-of-type CSS property to gain access to all occurrences of the div and set the order for each.

Now, let's apply the order property on the grid container.

Apply the order property on a grid container

This example applies the order property to the CSS grid container:

Explanation

Most of the HTML and CSS code remains the same as in the example above. We'll only change a part of the CSS code.

CSS code

• Line 8–11: We apply the grid property to the boxes class and define four columns within the grid.