Greater bandwidth, access to higher quality images and video, and web typography expansion have all played a big role in making this a golden age of digital design.
These improvements made the work produced by today’s designers better, but CSS Grid has changed how designers work.
Nearly 20 years in the making, the concept of CSS Grid isn’t a new one — we are talking about how we choose to stack boxes. Until browsers fully implemented CSS Grid, designers worked with a collection of dated hacks (even if some were quite refined).
Driven largely by Microsoft(!), CSS Grid was supported by all major browsers in late 2017. So instead of beginning your journey into layout by discussing how float works, let’s dig into a far more powerful tool — Grid.
Just add structure
Gettings started with CSS Grid only requires that you understand how parent and child elements work. Any parent element becomes a grid container when you declare display: grid on that element.
In the example below, the parent element is holding four child elements. Each of those child elements has images and text within them, but the grid provides the structure that holds the two-column structure together.
We’ll cover the other properties applied to the section in a moment, but for now, delete display: grid from the example to see what happens.
While the properties that created the column structure and spacing were still present, the loss of display: grid renders those other properties useless.
Without display: grid, none of this works.
Building columns
One of the most important things CSS Grid does for us is simplifying how we create column structures.
Regardless of how many elements are contained in a parent element, they will abide by the column structure provided by CSS Grid. As seen in the first example, we had four child elements present, but only two columns were created, so the content wrapped down to create another row. This works when we have four or four hundred child elements present.
The property that makes CSS Grid columns possible is grid-template-columns, which creates new columns based on the property’s values.
You can add a wide variety of values that work with grid-template-columns, including pixels, percentages, rem, ems, etc. For our purposes, we’ll introduce a couple of values that unlock the full power of this tool — fr and minmax().
The fr stands for fraction, and when applied to grid-template-columns, the fr breaks the container into appropriately sized columns. In the example below, three-column structures have been created to show the fr unit in action. Toggle the CSS button to see the code and watch how CSS Grid reacts to its width.
In the two-column structure declared by .prince, fr units split the container’s width into thirds. One-third, 1fr, has been assigned to the album cover, while the rest, 2fr, is assigned to the div containing the text.
A three-column structure is created in the next section by .bowie, but now the fr units split the container into quarters. Half of the space is dedicated to the text using 2fr. The second half contains a syntax we haven’t seen yet. repeat() accepts two values, the number of times a value is to repeat, and the column’s size to be created. In this instance, repeat(2, 1fr) creates two new columns that are each 1fr wide.
Without repeat(), we could create the same column structure by writing 2fr 1fr 1fr, so this usage might seem trivial. But if you needed to create an 8 or 12-column design, I’m pretty sure you would find repeat() very handy.
Part of the beauty of CSS Grid is its ability to adapt. While the fr unit solves so many of the measurement problems plagued earlier layout approaches, it is still a single measurement. As columns grow and shrink, the content inside can be forced into less than ideal displays. The aforementioned minmax() injects an additional layer of control that allows us to set a minimum and maximum size for our columns.
The third section, which carries the class of .nin, shares the same basic three-column structure as .bowie. Because it is using minmax(200px, 2fr), the smallest acceptable width for the text has been set, which forces the images to shrink instead once the width of the first column reaches a minimum of 200px in width.
Going long
Most digital products are longer than they are wide (users tend to scroll), so it’s a good idea to spend time discussing how you can take control of the overall length of a page or view.
The good news is that CSS Grid will layout elements by default the moment it runs out of columns to place content into. In the example below, we have nine recipe cards but only declared three columns, an unseen property, grid-auto-rows, automatically creates new rows for the content to reside in.
This is a great time to discuss the difference between explicit and implicit grids. In the prior example, we had too much content for the grid we created, so CSS Grid took over and assumed that we wanted that content to fit. This created an implicit grid using grid-auto-rows. However, if we knew we wanted the second row to be longer than the others, we could utilize the grid-template-rows property to provide explicit instruction. When specific guidance is given, that’s considered to be an explicit grid.
We can use these properties together to enable our designs to be more flexible. The example below strips away all content to only focus on how these two properties work together.
Notice that the first two columns have a different size from the other shapes in the example. grid-template-rows has created an explicit size for those rows to abide by, while all other rows receive their implied height from grid-auto-rows. This ability for the two sets of instructions to co-exist comes with a warning. If you look at Item 15 in the example, you’ll notice that the content is overflowing. CSS Grid won’t allow content to spill over like this — unless you assign a specific size that happens to be too small for the content within the shape.
As the saying goes, with great power...
Creative areas
As we’ve covered how to create rows and columns with CSS Grid, it should be obvious that you can use the tool to create a layout that moves in multiple directions simultaneously.
Until now, our exploration into CSS Grid has generally centered around the placement of items within a section or div. Essentially limiting our usage to regions of the design, but to structure the entire design with CSS Grid if desired.
We’ll first focus our attention on the grid-template-areas property powered by the grid-template-columns and grid-template-rows we discussed earlier. In the example below, pay close attention to the syntax used to scaffold the design out of the three-column, six-row structure.
This structure would be impossible without the keywords assigned to the design artifacts via the grid-area property. The unique syntax employed by grid-template-areas leverages the keywords present to provide a glimpse into what the final design should resemble — if only in word form.
In addition to simplifying the layout process, grid-template-areas makes it possible to reorder HTML content without touching the HTML. To see this in action, move the promo promo promo line so that it appears underneath nav nav nav. Not only will this move promo up, but it will also alter the depth of the hero and rail.
Another interesting aspect of designing with grid-template-areas is the ability to include open space purposefully. Using a ., you can designate that a portion of the design is intentionally left blank. This syntax addition provides us with a new creative tool, making it easier to execute unique layouts.
Area-based template usage is only one way to layout more complex CSS Grid designs, but I’ve found that grid line-based designs to be harder to understand for beginners. If you’re looking for a stretch goal, line-based designs might be a worthy investment of your time.
Resources for review
Please use the following items for reference during your exercise attempt:
| Article/Video | Source/Author |
|---|---|
| Responsive Design with CSS Grid (video) | New Pragmatic |
| Line-based Placement with CSS Grid | Mozilla |
| A Complete Guide to Grid | CSS Tricks |
Exercise
Length: One-to-two hours to complete.
In this exercise, the challenges gradually increase in complexity. CSS concepts covered previously are required to complete the work that follows.
As with prior exercises in this series, you will not need to modify the HTML structure to reach the final solution.
- Exercise 1: CSS Grid Columns - CodePen | Finished image
- Exercise 2: CSS Grid Columns and Rows - CodePen | Finished image
///
Once complete, update your Program Journal with a link to this exercise’s final output. Post your Journal in the #Feedback-Loop channel for review.
///
Up next Probably Flexbox