And it's somewhere "grid" and/or "order" can actually help. When the desired visual layout does not match logical document structure. It happens. More than one might think. Especialyl in a heavily "responsive" layout.

For example I had a client who wanted to use up the real-estate on larger screens by going:

HEADER MAIN

EXTRAS MAIN

FOOTER MAIN

But then when the screen was too narrow to fit that:

HEADER

MAIN

EXTRAS

FOOTER

The latter is clearly the logical document structure, setting the grid of the former on large displys also makes sense. display:grid comes to the rescue so we can do both visually whilst still maintaining that logical structure.

And that's why the most important thing you said os BEGINNING with a well structured document. Thus I always advocate that the first thing one should do when designing is to start with the content or a reasonable facsimile of future content and to put it into a flat text editor as if HTML, CSS, JS, and layout do not even exist, in as sensible and useful an order as possible. Then you mark it up semantically, saying what thingss are and not what you want them to look like. Then and only then do you start your external stylesheet (per media target) to say the appearance.

That is design. Dicking around in a paint program like photoshop or a "wireframe" like Figma is NOT!