Using CSS Grid as a wireframe tool

Hello everyone this is just something that dawned on me recently whilst messing around with CSS Grid that I thought I would share, When designing your new web pages why not employ Grid as your wireframe tool this can be done very easily with just a few lines of code.
It also means that you can work directly with your screen (as opposed to a piece of paper) so all your measurements are spot on as you want them. You can easily use different colour borders to etc to highlight special areas etc if required, and adding notes about each section is a breeze in the html. And the files are very easily added to your design folder. So rather than replicating your wireframe with Grid why not use it in the first place as your design tool?

Wireframe With CSS Grid

All the best shuff

1 Like

That’s exactly right, and the wireframe you created in particular is sometimes referred to as the “holy grail” of traditional web design: 10 modern layouts in 1 line of CSS - YouTube

That doesn’t surprise me, I’ve always been pretty good at reinventing the wheel. Ha Ha. Thanks for the vid link by way looks good will watch properly later this evening.

Respect
Shuff