My first CSS Grid Project: Old Porsche Ad Replica


See the CSS Grid Porsche Ad!

See the Pen CSS Grid Advertisement (overlap) by Alec (@GrayHulk) on CodePen.

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.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

CSS Grid Project: Nike Air Span+ 6 Advert

See the CSS Grid Nike Air Span+ 6 Advertisement. CSS is pretty fuckin’ fun. I haven’t even delved into the depths of animation and I’m already seeing the great potential. After browsing “iconic print ads” on Google Images for 20 minutes, I came across this interesting, albeit a bit questionable …

CSS Grid Test: Replica of a Porsche Advertisement

See the CSS Grid Porsche Ad! This one is pretty simple, but I wanted to test the transform property to achieve the slanted center-line. To achieve the slant, I used skew — 5 degrees, I think — on both of the colored halves. What that did, though, is cause the …