Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css

What is the CSS order property?

Kedar Kodgire

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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
order: 5;
order: -5;
  1. Global values
order: inherit | initial | revert | revert-layer |unset;

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.

RELATED TAGS

css

CONTRIBUTOR

Kedar Kodgire
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring