Changing Visual Order

In part 1, I addressed the issue with flattening document structures. Before we talk about changing visual order, let me enlighten you with more Pink Floyd wisdom.

Pink Floyd Fun Fact #2

In 1975, Pink Floyd helped to finance the movie Monty Python and the Holy Grail by the comedy group Monty Python. Led Zeppelin and Genesis were also amongst the investors.

Visual order

The CSS Grid Layout specification provides us with many ways of changing visual order. This flexibility is a nice thing to have but bad for accessibility if we don’t use it consciously. Before we look at what’s possible with Grid, let’s briefly talk about visual order.

Both tab order and the order in which screen readers read content follow DOM order.

Changing visual order with CSS has no effect on DOM order.

No matter where we place items with CSS, keyboard users will still encounter elements in the order in which they appear in the HTML document.

Visual order matches DOM order

Visual order doesn’t match DOM order

Disconnect between content and presentation

If the visual order and the DOM order don’t match, it can irritate and confuse users up to a point where the experience is so bad that the site is unusable.

Visual order concerns keyboard users because they may have trouble predicting where focus will go next.

If a blind user is working with a sighted user, who reads the page in visual order, it may confuse them when they encounter information in different order.

Manipulating visual order

When you’re applying any property that changes order, you should especially pay attention to testing with a keyboard. Use the Tab and Shift + Tab keys to test if your website is usable without a mouse.

This applies to all properties, not just to those associated with CSS Grid. However, I’ll focus on manipulating order in grids.

Explicit placement

One of the most exciting features in Grid is the ability to place grid items anywhere inside or outside of the grid.

You can place items explicitly by defining on which line they start or end. For vertical lines, there’s grid-column-start, grid-column-end, or the shorthand grid-column. For horizontal lines, grid-row-start, grid-row-end, and grid-row. These rules allow a line number (either positive or negative) or the span keyword.

The order in the DOM is still Item 1 – 2 – 3 – 4 but the visual order is now Item 4 – 1 – 3 – 2.

Explicit placement might create a mismatch between DOM order and visual order.

Auto flow

Explicitly placing items that have the same size is one thing, but placing differently sized items may have unexpected side effects with Grids default auto-placement algorithm. The combination of explicit and implicit placement sometimes results in unwanted gaps between grid items. This is because of the default placement algorithm only ever moving forward when placing items and never backtracking to fill holes.

This can give your designs a nice touch, but it can also annoy. Grid’s default auto-placement algorithm can be changed by switching from a “sparse” to a “dense” packing mode using the grid-auto-flow property.

Order

You might already be familiar with the order property because it has been around since Flexbox. order can be set to any integer value to change the ordering of flex items. This also works with grid items.

Absolute positioning

It’s possible to combine absolute positioning and explicit placement. I haven’t found a use case yet in any of my projects but it’s interesting how a positioned item behaves inside a grid.

In the following 3 by 2 grid with 6 items I’m moving the second item from line 2 to line 3 by applying grid-column: 3. Since I haven’t set the row property explicitly and I haven’t placed other items, all subsequent items move one cell with the explicitly placed item. DOM order still matches visual order.

Positioned grid items lie on top of other items just like any absolute positioned element. They don’t affect the position of other items, and they’re completely ignored during auto-placement.This is where it gets interesting: setting left and top to 0 doesn’t place them in the top left corner of their parent item (the ul) but in the cell they’re placed in.

Again, this may cause a disconnect between content and presentation.

Areas

Time to make a confession: I’m deeply in love with Grid Areas ❤️. I’ll share my intense feelings about this property in another article soon. Areas are awesome, but nobody is perfect and since this article deals with the dark side of things, let’s see what may go wrong.

The grid-template-areas property does 2 things. First, it describes layouts in CSS visually. If you have a 2-column layout with a header, content, sidebar and a footer, this is what it may look like in CSS.

The source order of these elements is footer – header – main, where it should be header – main – footer. The correct approach to fixing this is to change the order in HTML but with Areas we don’t have to. All it takes is to define the correct layout in CSS and then place the elements in the respective area using the grid-area property.

If you wish to pay us SECURELY with a credit card, you now can with Paypal! Please click the “PAY NOW” button on the right, choose "Don't have a paypal account" and you will be given a secure page to enter your credit card details via Paypal's secure checkout.