I'm hoping this example won't take long to get the point across. In both these examples there has been NO change to markup order. I did rename css classes just to ensure specificity, but the order of the markup does not change.
The first example might be a standard page layout. The second grid example simply changes the representation of which divs occupies a space in the layout. The difference here may seem trivial at first, but the implications open up an entire world of page layout and design that has not come before.
Now we can have our cake and another slice of cake! We can mark up for accessibility and/or flow, and re-arrange it to better fit the design sensibility. But it also allows completely changing it any breakpoint.
Try it. Make your browser width smaller by dragging it. Notice Example #2 changing completely in response to the view width. Adding some Flexbox to get content to reverse, we switch at the smallest mobile breakpoint, reversing all rows. Again, with no change to markup.
Again, very simple, but coming from a world of float-based layout, CSS Grid and Flexbox makes for an exciting future in web design and layout.
I'm hoping this example won't take long to get the point across. In both these examples there has been NO change to markup order. I did rename css classes just to ensure specificity, but the order of the markup does not change.
The first example might be a standard page layout. The second grid example simply changes the representation of which divs occupies a space in the layout. The difference here may seem trivial at first, but the implications open up an entire world of page layout and design that has not come before.
Now we can have our cake and another slice of cake! We can mark up for accessibility and/or flow, and re-arrange it to better fit the design sensibility. But it also allows completely changing it any breakpoint.
Try it. Make your browser width smaller by dragging it. Notice Example #2 changing completely in response to the view width. Adding some Flexbox to get content to reverse, we switch at the smallest mobile breakpoint, reversing all rows. Again, with no change to markup.
Again, very simple, but coming from a world of float-based layout, CSS Grid and Flexbox makes for an exciting future in web design and layout.