Since this was my first foray into CSS Grid, I wanted to start off with an achievable goal but not make it too simple.
At first glance, this might look like just simple HTML.
Big deal, you say.
Look closely and you’ll see that the line “1983 Le Mans Results” is encroaching upon the space of the headline, “Nobody’s perfect.”
Normally, this sort of overlap would have to be done using an image of some sort. That’s where CSS Grid comes in.
Take a look at the first image below. It shows the grid layout (thanks Mozilla!). The headline is in one row, but that little bugger of a sub-head is in there, too.
In this image, there are actually three grids: The primary grid you see here, the sub-head is another so I could control the drawing of the top and bottom lines and, the third grid is the results list (1st Porsche, 2nd Porsche, etc.).
While I’m newish at CSS (I used to do it 20 years ago but haven’t really done it since), there might be a better way to do this and I’m hoping to discover alternate methods.
More OVERLAP! Check out the footer, where the copy goes. You’ll see two other areas of overlap — the logo and copyright notice are sharing the space of the copy! I love overlap.
Proper graphic design is coming, if not already here. CSS Grid is relatively new and they’re working on the specs for the next version, but you MUST get on board now and start using it in your site design.
Browse CodePen to see a lot of great examples of what CSS Grid can do.
You can also head on over to Mozilla to get a quick breakdown of what CSS Grid is as well as some additional links.