Use CSS Grid auto-fit For Responsive Column Layout

Stephanie Eckles: [0:00] For our remaining landing page sections, we can use some of the classes we've created to quickly get them closer to completion. First, on the main element, we'll add our container class in addition to the mx-auto class to apply auto margins for centering and the mt-large class, which will add some top margin. We'll also apply these same classes to the aside holding our testimonials.

[0:27] Another quick improvement is applying our text-centering class to these two headlines and we'll use our list-unstyled class on the features list as well. Although these remaining sections have completely different types of content and purpose, we actually have the same goal for their layout, which is equal width columns that responsively wrap when the content reaches a minimum acceptable width.

[0:57] If you've worked with other CSS frameworks, this is typically when you'd start applying multiple breakpoint utility classes to control the column width across viewport sizes. However, using Grid, we can accomplish our goal in one line of CSS.

[1:12] First though, we'll add the display-grid class on the feature list and then create a div around the block quote elements to be able to apply the display-grid class. Now, we'll create a display-grid modifier class called autofit-columns.

[1:33] We'll then define a grid property called grid-template-columns and use the unique grid function called repeat, which will apply the supplied values to each generated column. The first value we'll use is auto-fit, which collapses any unused grid tracks, resulting in columns expanding up to the maximum available space or the max allowed width.

[1:55] As the first property of repeat, the auto-fit keyword also stands in place of defining a specific number of grid columns and requests the grid algorithm to use the defined column width behavior as many times as needed for each content item available within the grid.

[2:14] For the column behavior, we will use another unique to grid function called minmax. The first value here will be the minimum allowed width. We'll use 30ch. The second value is the max allowed width. We'll use 1fr. Fr is a unique Grid key word that means to use a computed fraction of the available space.

[2:35] Let's add this modifier class to the features list items, as well as to the wrapper around the block quotes. On save, the result for each section on large viewports is three equal-width columns. As we size down the viewport and the columns shrink, once they reach the minimum threshold of 30ch, they drop to a new virtual row.

[3:02] Grid is superior to Flexbox in this ability to create inherently responsive column layouts without media queries. Now, we need to address the content of the columns that we just created.

[3:14] Here, we have an instance where Grid and Flexbox can work together. Grid has provided the column layout structure, but we'll now use Flexbox to achieve vertically-centered alignment of the flex children.

[3:26] Let's begin a new grad modifier class that we'll call center-stack and then use the child combinator selector with the universal selector to begin a rule that will be applied to media children of any element type.

[3:40] We'll define that these children use display flex and then change the default flex alignment to the Y, or vertical axis with flex-direction column. Let's save and apply our new modifier class to the features list and block quote wrapper.

[3:59] Ignoring the distorted testimonial image for now, one of the other standout visual changes is that the feature list contents now have the subheader, which is wrapped in a span, stacked above the description.

[4:12] We also want to center everything. To do that, we need to apply text-align center to handle typography content and align-items center to handle block and object content, such as the images.

[4:25] On save, we see centered text and also that align-items has resolved the image distortion, which is due to altering the default stretch behavior applied by Flexbox.

[4:37] Then, we'll add some visual style to enhance the appearance of the block quotes, notably using object-fit cover to scale each testimonial avatar within set dimensions without distortion, much like we used it for the showcase image in the third lesson.

[4:53] We'll also create a rule for the aside that wraps the testimonial section and add some visual distinction with a background color, a bit of padding, and border radius, as well as altering the headline color. Finally, we'll add the mt-medium margin utility class for a bit of padding between the features list and headline and the block quote wrapper and headline.

[5:16] Before we call this good, we need to check out behavior on smaller viewports. As we resize, the responsive column behavior is desirable, but we could use a little more spacing between grid items. Returning to our center-stack rule, we'll add grid-gap with a value of our unit times four.

[5:39] Then, we can uncomment the rest of the elements and review our completed landing page. This landing page was completed by applying both Grid and Flexbox layout. Grid was prioritized for use when needed to leverage for grid-gap, such as for the main nav and the hero content columns and for responsive X- and Y-axis centering, as for the showcase figure and for the subscribe section.

[6:07] Grid was also ideal for creating equal-width responsive columns for the features and testimonials quotes. Flex was used when a wrapping behavior and variable-width content were the priority, such as for the subscribe section form and the footer content.

[6:25] We used Grid and Flexbox together when we needed to leverage a combination of their strengths, such as for the features list and testimonial quotes, where Grid provided the layout column structure and Flex excelled at aligning the content within. The resulting production-ready stylesheet, including the theme and utility styles clocks, in at a gzipped weight of just 1.61 kB.