Visual Deception

Like in Flexbox, Grid allows us to completely rearrange element order. We can put an element that's at the very end in HTML at the very top of the layout.

Why Is This Bad?

A sighted user will see content in one order, but a " screen reader " user or someone using keyboard (Tab) will see it in a completely different (original) order.

Safety Rules:

  1. HTML is primary: Always write HTML in the order information should be logically absorbed.
  2. Minimal shifts: Use grid movement for mobile adaptation, but not to completely " reshuffle the content deck " .
Caution

Never use Grid to hide poor HTML structure. Even the most beautiful grid won't save a rotten foundation.