I used a Publix ad to learn CSS Grid and Flexbox
Helpful (and IMO necessary) resources
CSS Grid Layout
- [Specification] — CSS Grid Layout Module Level 1
- [Examples] — Grid by example — simple usage examples by Rachel Andrew
- [Video] — Start using CSS Grid Layout presented by Rachel Andrew
- [Book] — Get Ready for CSS Grid Layout by Rachel Andrew
- [Tutorial] — The future of layout with CSS grid layouts by Patrick Brosset
- [Tutorial and Guide] — Deep Dive into Grid Layout Placement by Manuel Rego
- [Walkthrough and Discussion] — Subgrids thinking out loud by Manuel Rego
CSS Flexible Box (Flexbox) Layout
- [Specification] — CSS Flexible Box Layout Module Level 1
- [Guide] — A Complete Guide to Flexbox by CSS-Tricks
- [Interactive Game] — Flexbox Froggy by Thomas Park
- [Video Tutorials] — What the Flexbox? by Wes Box
- [Technical Guide] — Learn CSS Layout The Pedantic Way — Chapter 4 — CSS3: Flexbox by Mikito Takada
CSS Box Alignment (or combination of above)
- [Specification] — CSS Box Alignment Module Level 3
- [Article and Examples] — Grid, Flexbox, Box Alignment: Our New System for Layout by Rachel Andrew
- [Article] — CSS Grid and The Box Alignment Module by Rachel Andrew
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
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
In your address bar, enter:
- Click ‘Enable’
- Restart your browser
Practice Round: Publix Recipe Postcard
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
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.
Main Project: Publix weekly ad front page
What we will be re-creating (with a few design liberties):
Diagram of the grid structure and key grid areas
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
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.