Order

CSS order is used to change the visual order of elements in a flex-box container. Order property is a sub-property of the flex-box. By default, the order property has a value of zero. It takes up either positive or negative values. The flex-items are displayed in the same order but with order property, it can be changed.

Syntax

order: <number>

How to apply for an order in flex-box

An HTML document will be needed to work with if you'd like to use the order property. An element will be defined to be the flex container and there will be flex items in the container. Exploring some code will help you learn fast, Check out the HTML below,

<div class="container">
        <div class="flex-items">A</div>
        <div class="flex-items">B</div>
        <div class="flex-items">C</div>
        <div class="flex-items">D</div>
        <div class="flex-items">E</div>
        <div class="flex-items">F</div>
</div>

Just as you expect, let's add some little styling to get a better understanding

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
.container {
    display: flex;
    justify-content: space-evenly;
    background-color: rgb(164, 142, 224);
}
.flex-items {
    background-color: rgb(14, 14, 173);
    color: #fff;
    padding: 30px;
    font-size: 2.2em;
    margin: 10px;
    width: 100px;
    min-height: 100px;
}

Here is the result of the above code:

In a situation whereby you want A to come last and E to come second, F to come first without changing the source code in the HTML document, meaning you do not get to do this:

<div class="container">
        <div class="flex-items">F</div>
        <div class="flex-items">E</div>
        <div class="flex-items">C</div>
        <div class="flex-items">D</div>
        <div class="flex-items">B</div>
        <div class="flex-items">A</div>
</div>

Now that is where the order property comes in. It would help if you made the order value of the flex item higher than the other items. Flex items are ordered from lowest to highest. Knowing that the flex-items have a default value of zero(0).

Therefore giving the flex-items, respective order properties will help reorder the items in the container as shown below:

.flex-items:nth-child(1){
    order: 5
}
.flex-items:nth-child(2){
    order:4
}
.flex-items:nth-child(3){
    order:2
}
.flex-items:nth-child(4){
    order:3
}
.flex-items:nth-child(5){
    order:1
}
.flex-items:nth-child(6){
    order:0
}

Here is the result after applying the order property:

To better understand the order property concept, here is another example

<div class="container">
        <h1>This is heading one</h1>
        <p>This is the first paragraph</p>
        <h2>This is heading two</h2>
 </div>

The style applied goes thus:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(164,142,244);
    color: #fff;
    height: 100px;
    width: 100%;
}

The result goes thus:

Therefore when order is applied,

h1 {
    order: 2;
}
p {
    order: 0;
    margin-top: 10px;
}
h2 {
    order: 1;
}

The result goes thus thereby:

What happens in a situation whereby two flex-items have the same order value? In the example below, flex-item 1 and 3 are given the same order values

h1 {
    order: 1;
}
p {
    order: 0;
    margin-top: 10px;
}
h2 {
    order: 1;
}

Flex-item 3(h2) appears last because it comes after flex-item 1 (h1) which is based on the positions in the source file (HTML document), the items are still arranged from the lowest to the highest order.

Grid-template-areas

The grid-template-areas property specifies areas within the grid layout. Grid items can be named by using the grid-area property and reference to the name in the grid-template-areas property. The grid-template property can be used as a shorthand to define the sizes of the columns and rows.

Syntax

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset

Formal syntax

grid-template-areas = 
  none       |
  <string>+

The grid-template-areas utilizes the areas in the grid container, each grid item can be assigned a name with the grid-area property.

display: grid must be set in the grid container for these properties to work

How to apply CSS grid-template-areas

It is beneficial to build a CSS grid template and name your CSS grid template areas in two steps as explained below;

1. Define the names of your grid template areas with the grid-area property. The common grid template areas to specify include header, footer, sidebar, content e.t.c
2. Use the grid-template-areas property to define how the areas appear in the rows and columns.

Here is an example:

(i) HTML documents that show the grid container and grid items

<div class="wrapper">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
 </div>

(ii) Names of grid template areas defined with the grid-area property

.header {
  grid-area: hd;
  background-color: rgb(15, 15, 247);
}
.footer {
  grid-area: ft;
  background-color: rgb(4, 97, 4);
}
.content {
  grid-area: main;
  background-color: rgb(121, 5, 121);
}
.sidebar {
  grid-area: sd;
  background-color: rgb(88, 88, 42);
}

(iii) Grid template area defining how areas appear in rows and columns.

.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft   ft   ft   ft   ft   ft";
  color: #fff;
  font-size: 1.5em;
}

The first line command sets the display as a grid, the following line command defined columns as "9" items long, the following line command set the row and the last line gives the grid template area its arrangement. The grid template areas made use of the content areas names that were defined earlier, where the header hd gets all nine widths in the column, the next row which contains three sd(sidebar) and six "main"(content) making a total of nine on that row, the third row which is the (footer) ft takes up the whole nine-column width.

(iv) Here is the result

Below is another example

(i) HTML document with container class

<div class="grid-container">
        <div class="grid-item-one">Header</div>
        <div class="grid-item-two">Main</div>
        <div class="grid-item-three">Content</div>
        <div class="grid-item-four">Footer</div>
</div>

(ii) Grid template defined with grid areas

.grid-item-one {
  grid-area: head;
  background-color: rgb(13, 238, 238);
}
.grid-item-two {
  grid-area: main;
  background-color: rgb(154, 55, 247);
}
.grid-item-three {
  grid-area: side;
  background-color: rgb(160, 36, 36);
}
.grid-item-four{
  grid-area: footer;
  background-color: rgb(53, 53, 252);
}

(iii) Defining how areas appear in rows and columns. The dot . represents an empty grid shell.

.grid-container {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 2fr;
  grid-template-rows: 100px 200px 100px;
  grid-template-areas:
    "head head . side"
    "main main main side"
    ". footer footer footer";
  color: #fff;
  font-size: 1.5em;
  text-align: center;
}

(iv) Here is the result:

Resources

For more information, Check out:

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

https://developer.mozilla.org/en-US/docs/Web/CSS/order

https://css-tricks.com/almanac/properties/o/order/

https://css-tricks.com/almanac/properties/g/grid-template-areas/

Conclusion

In this article, you learned all the specifics needed to use CSS order and grid-template-area. Here is a summary of everything you've learned in this article:

• CSS order changes the visual representation, not the HTML source.

• CSS order accepts a number as its value.

• CSS grid-template-area changes the visual representation of the grid with the help of columns and rows