I used a Publix ad to learn CSS Grid and Flexbox

Publix ad that we will re-create with the power of CSS Grid and Flexbox

Helpful (and IMO necessary) resources

CSS Grid Layout

CSS Flexible Box (Flexbox) Layout

CSS Box Alignment (or combination of above)

A special thanks to Rachel Andrew

There are many CSS modules in active development. Some will die before ever getting a chance. Some are turned on in your browser and you can leverage them in your designs. Others are in your browser but you may not realize it. Others are in your browser but you have to turn them on to use them, and even then, almost no browsers support them.

The CSS Grid Layout module falls in that last category and thanks in most part to Rachel Andrew it will hopefully soon move to the second category: supported in an upcoming version of today’s modern browsers.

Rachel has spent the better part of the last four years managing (the specification), contributing to (the specification), and pitching ways in which the CSS Grid Layout module (combined with with Flexible Box and Box Alignment modules) can power page layouts that fully separate structure from style.

The specifications can be confusing at times and too abstract or technical at others. Rachel’s talks, articles and examples have helped myself and others more fully comprehend the core principles and various intricacies that make up these modules.

The main concepts of Grid Layout, as explained in one GIF

A visual guide to the core components of Grid Layout

Key terms used in Grid Layout

  • Grid Container: an HTML element whose direct children become Grid Item
  • Grid Lines: mark the boundaries of a Grid Track
  • Grid Track: An area enclosed by two parallel Grid Lines
  • Grid Cell: The smallest unit of a grid — the area enclosed by two intersecting Grid Tracks
  • Grid Item: A direct child of the Grid Container
  • Grid Area: An author-designated area that may be composed of one or more Grid Cells, and may contain one or more Grid Items

Subtle, but important principles

  • A grid item can also be a container (grid or flex)
  • Grid areas are not pre-defined, but rather author-defined. They should be thought of ‘syntactic sugar’ of Grid Layout to make it easier to place Grid Items when compared to declaring start and end points on a column- and row-basis.
  • A grid area may contain multiple grid items, some of which may overlap depending on how each item is aligned in each axis (x, y or z)
  • Grid Lines can also be named, much like Grid Areas. This again should be considered a ‘syntactic sugar’ of the Grid Layout module for easier Grid Item placement.
  • Each Grid Track can utilize one of several algorithms to determine its width/height, including a Grid-Layout-specific value measurement called a ‘fraction’ (fr) that algorithmically grows/shrinks the related row or column.

Why choose Grid over Flexbox or vice versa?

Short answer: use Grid Layout when attempting to layout multiple children of the same parent in two dimensions.

Grid Layout allows the author to place items in rows and columns, thereby controlling both horizontal and vertical placement. Counteractively, Flexbox restricts the author to choosing a single dimension (‘row’ or ‘column’, plus the ‘reverse’ alternatives) where children of the Flex container merely wrap onto additional line boxes in the direction of the cross-axis.

The best approach is likely to declare the top-most HTMl element as a Grid Container, and within each Grid Item certain children can be declared as Flex Containers. This grants the author full control over the interface at large through the powers of Grid Layout with added flexibility of controlling the layout of smaller items using the Flexbox Module (and by extension Box Alignment)’s layout capabilities.

”Can I Use…” Grid Layout? Not yet. Flexbox? Totally!

As mentioned earlier (and at time of writing), Grid Layout is not currently supported in web browsers. At least, not without fiddling with some flags (see below). Nearly all modern browsers support Flexbox, so start using it in your side projects, or perhaps even for smaller niche clients who don’t need to accommodate Internet Explorer versions earlier than 10.

How to start experimenting with (and see live working examples of) Grid Layout in Google Chrome

How to enable Grid Layout in Google Chrome

In your address bar, enter:

  • chrome://flags/#enable-experimental-web-platform-features
  • Click ‘Enable’
  • Restart your browser

Practice Round: Publix Recipe Postcard

Publix Recipe Card for Littleneck Clams (front and back sides)

Design liberties taken on account of different medium

Since the web doesn’t have a front or back, the content will appear sequentially instead of on two sides. For this reason, I reversed the horizontal order of the items on the back of the card. This way, the recipe appears below the photo, and the ‘Other Preparation Method’ appears below the recipe description. Also, the Publix Aprons logo and ‘For more recipes’ link have been relegated to a proper footer at the bottom of the page.

Making this layout change allowed me to use a 2-column layout instead of a 3-column layout, since the elements on the back side now properly line up with the elements on the front side.

Modules and Properties used in this example

  • Grid Layout for general placement of each major area
  • Box Alignment for the title and ‘Other Preparation Method’ areas (bottom edge)
  • Multi-Column Layout for the recipe ingredients

Screenshot of new layout

Publix Littleneck Clams recipe card recreated using CSS Grid Layout

Live Example

Note: Be sure to click ‘Edit on Codepen’ to see the Grid in action, which isn’t activated until a breakpoint that is wider than my WordPress theme.

Publix Littleneck Clams Recipe Card

Main Project: Publix weekly ad front page

What we will be re-creating (with a few design liberties):

Publix weekly ad front page

Diagram of the grid structure and key grid areas

Diagram highlighting main grid structure components

Accounting for multiple breakpoints

  • At its narrowest, each page section would span the full width. Subsequent elements would naturally be placed on the next line box.
  • At medium width, The Publix header, savings box, coupon Grid Area and large Grid Area would span the full width. Each general offer (6 in total, 
    each taking up one Grid Cell) would fit two to a line box.
  • At its widest, the page layout would mimic the original weekly ad.

A GIF of the final result showing all three breakpoints

Animation showing responsive version of Publix weekly ad

Live Example

Publix Ad using CSS Grid

That’s all for now

After three weeks of studying and using Grid Layout properties in CSS, I can honestly say I plan to seek more print layouts to re-create digitally using this module. For Flexbox, I have already used it in production for a client, and intend to continue using it in personal projects and more client work depending on the customer browser data.

I can’t stress enough how helpful the guides, articles, examples and talks made available by Rachel Andrew, CSS-Tricks, Wes Bos and others have been.