CSS - Order

Syntax and Usage

The order property in CSS controls the order in which flex and grid items appear within their container. It accepts integer values, including negative numbers, and determines the order of the items relative to each other.

The syntax for the order property is:

.item {
  order: <integer>;
}

By default, all flex and grid items have an order value of 0. If you don't specify an order value for an item, it will appear in the order it appears in the source code.

To change the order of an item, apply the order property to that item with an integer value. Items with a lower order value will appear before items with a higher order value. If multiple items have the same order value, they will appear in the order they appear in the source code.

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

.container {
  display: flex;
}

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

.item3 {
  order: 3;
}

Item 2 has an order value of 1, Item 1 has a value of 2, and Item 3 has a value of 3. The flex items will thus appear as follows: Item 2 first; then Item 1; finally Item 3.

The same principle applies to grid items:

<div class="grid-container">
    <div class="grid-item1">Item 1</div>
    <div class="grid-item2">Item 2</div>
    <div class="grid-item3">Item 3</div>
</div>

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

.grid-item1 {
  order: 2;
}

.grid-item2 {
  order: 1;
}

.grid-item3 {
  order: 3;
}

The grid elements are rearranged according to their 'order' values with Item 2 appearing first, followed by Item 1, then Item 3. The order attribute gives you control over visual ordering allowing you to create flexible, responsive layouts by rearranging elements without changing the source code order.

Ordering Flex Items

The order property is useful when working with flexbox layouts. It lets you rearrange the visual order of flex items without changing the HTML structure. By combining order with other flexbox properties, you can create dynamic and responsive layouts.

To rearrange flex items using order, apply the property to individual flex items with integer values. The items will be reordered based on these values, from lowest to highest.

<div class="flex-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

.flex-container {
  display: flex;
}

.item1 {
  order: 2;
}

.item2 {
  order: 3;
}

.item3 {
  order: 1;
}

You can combine order with other flexbox properties to create more complex layouts. For instance, you can use order in conjunction with flex-wrap to control how the items wrap.

<div class="flex-container">
  <div class="item1">Item1</div>
  <div class="item2">Item2</div>
  <div class="item3">Item3</div>
  <div class="item4">Item4</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.item1 {
  order: 3;
}

.item2 {
  order: 1;
}

.item3 {
  order: 4;
}

.item4 {
  order: 2;
}

In this case, the items will be ordered as follows:

• Item 2
• Item 4
• Item 1
• Item 3

If there is not enough space in a single line for all elements within a container that has been set up using flex-wrap, then they will automatically move onto another line according to their respective orders.

Another example would involve combining order with both flex-grow and flex-shrink properties to better control size and positioning aspects.

<div class="container">
  <div class="element-one">Element One</div>
  <div class="element-two">Element Two</div>
  <div class="element-three">Element Three</div>
</div>

.container {
  display: flex;
}

.element-one {
  flex-grow: 1;
  flex-shrink: 0;
  order: 2;
}

.element-two {
  flex-grow: 0;
  flex-shrink: 1;
  order: 1;
}

.element-three {
  flex-grow: 2;
  flex-shrink: 0;
  order: 3;
}

Here, element three appears first due to its order but grows twice as much as the others. Element one comes second, growing at a normal rate. Lastly, element two shrinks faster than the rest given its set order.

By creatively using these various attributes together within the same framework, you can build highly adaptable structures capable of meeting different needs across various screen sizes and content requirements alike!

Ordering Grid Items

The order property is useful when working with CSS Grid layouts. It allows you to rearrange the visual order of grid items without changing the HTML structure. By combining order with other grid properties, you can create flexible and responsive grid layouts.

To rearrange grid items using order, apply the property to individual grid items with integer values. The items will be reordered based on these values, from lowest to highest.

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

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

.item1 {
  order: 2;
}

.item2 {
  order: 4;
}

.item3 {
  order: 1;
}

.item4 {
  order: 3;
}

In this example, the grid items will be visually ordered as follows:

• Item3 (order:1)
• Item1 (order:2)
• Item4 (order:3)
• Item2 (order:4)

You can combine order with other properties to create more complex layouts. For instance, you can use order in conjunction with grid-column and grid-row.

<div class="grid-container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

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

.item:nth-child(1) {
  grid-column: 1 / span 2;
  grid-row: 1 / 2;
  order: 2;
}

.item:nth-child(2) {
  grid-column: 3 / 4;
  grid-row: 1 / span 2;
  order: 1;
}

.item:nth-child(3) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  order: 4;
}

.item:nth-child(4) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  order: 3;
}

In this example, the grid items are positioned using grid-column and grid-row, and their visual order is determined by the order property. The resulting layout will be:

• Item (order: 1) in the top-right cell.
• Item (order: 2) spanning the top two cells on the left.
• Item (order: 3) in the bottom-middle cell.
• Item (order: 4) in the bottom-left cell.

Another example of combining order with grid properties is using it with grid-auto-flow to control how the grid items are automatically placed.

<div class="grid-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

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

.item:nth-child(1) {
  order: 2;
}

.item:nth-child(2) {
  order: 1;
}

.item:nth-child(3) {
  order: 4;
}

.item:nth-child(4) {
  order: 3;
}

In this case, the grid-auto-flow: dense property will automatically fill in any gaps in the grid with items that fit. The order property determines the visual order in which the items are placed. The resulting layout will be:

• Item 2 (order: 1)
• Item 1 (order: 2)
• Item 4 (order: 3)
• Item 3 (order: 4)

By combining order with various grid properties, you can create complex and responsive grid layouts that adapt to different screen sizes and content requirements.