The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Cascading Style Sheets bring order and beauty to our applications.

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

Learn the fundamental difference between CSS grid and flexbox layout, and create utility classes for each `display` value. Then begin to apply and expand these concepts to style the landing page navigation.

Choose Between Grid or Flexbox for CSS Layout

Apply grid layout and see when it's necessary to break out a media query to overcome grid's lack of wrapping behavior. We'll also learn about a property that grid and flexbox share: `align-items`.

Use CSS Grid to Create Layout Columns

Grid offers us the easiest method to responsively center content. We'll use the grid property `place-content` to center the contents of `figure` to showcase our fictional product in use. Additionally, we'll learn about `object-fit` which is a modern technique that allows inline images to scale responsively within defined dimensions without distortion.

Responsively Center an Image and Caption with CSS Grid

See how to use flexbox to layout variable-width content in columns, and take advantage of `justify-content` to keep flex children center-aligned on smaller viewports. We'll also learn how `margin` can be applied to resolve for lack of a well-supported `gap` property in flexbox. At the end of the lesson, we'll have styled both the "Subscribe" section and the site footer.

Use Flexbox to Responsively Layout Variable-Width Content

We'll complete our landing page styles by using CSS grid `auto-fit` in conjunction with the grid functions `repeat` and `minmax`. The result will be a responsive column layout that wraps when content shrinks below the minimum acceptable width. We'll also see how grid and flexbox can be used together by using flexbox to align the content of grid items. Finally, we'll view the fully completed landing page and reflect on how and why grid and flexbox were each used.

Use CSS Grid auto-fit For Responsive Column Layout

Learn Advanced CSS Layout Techniques

CSS Grid Layout is a two-dimensional layout method that gives you control over items in rows and columns. We will look at ways to divide the page into major regions.

Build Complex Layouts with CSS Grid Layout

Optimize User Experience for Mobile Devices and Browsers

Create a Landing Page with CSS Grid and Flexbox

https://app.egghead.io/api/v1/lessons/flexbox-choose-between-grid-or-flexbox-for-css-layout/subtitles

Instructor: [0:00] Grid and flex are both values of the display CSS property. Let's begin by creating the utility classes for display-flex and display-grid.

[0:11] Right now, this is semantically marked up. We want to treat both the app title and the nav items as one layout unit. We'll wrap them in additional div with the class navbar.

[0:24] The first step in choosing between grid or flexbox is considering which axis child element should align on. Both are capable of aligning on either the X, or horizontal axis, or the Y, or vertical axis.

[0:40] Let's start by adding the display-flex class. The default alignment is on the X axis, which is already a step closer to our desired result. We'll swap to the display-grid class. Due to grid's default of aligning on the Y axis, the visual effect now appears no different than normal block layout. Let's revert to display-flex.

[1:06] Before we work on the alignment of the nav items, let's remove the default list styling with a quick utility class. Next, we need to align the nav links. Based on our current progress, it may seem that flexbox is the correct choice, which we can try.

[1:23] We encounter an issue with flexbox, which is that the default behavior causes the nav list items to run into each other. Let's switch to display-grid. We'll add a modifier for this class. To switch the default axis using the property grid-auto-flow with the value column. Then add this modifier class as well.

[1:50] Now on our base display class, we'll add the unique to grid property grid-gap and set it to twice our themes to find unit value. Upon save, we now see how the grid-gap has created space between the nav list items.

[2:07] However, we'd prefer that the title align to the left and the nav links align to the right. For this, let's begin our navbar class and define justify-content, space-between, which will assign extra horizontal space between the flex children.

[2:26] We'll also add a touch of padding to the navbar. This view is looking pretty good, but if we resize the viewport, the title and the nav links crash. Another flex-only property is the concept of wrapping which allows flex children to drop below one another when there isn't enough horizontal space, such as on smaller viewports.

[2:49] Let's extent the display-flex class to add a modifier to define flex-wrap wrap, and add this modifier to our layout. Now when we resize the viewport, the nav links drop below the title. Our navbar styles are complete.

https://app.egghead.io/api/v1/lessons/flexbox-choose-between-grid-or-flexbox-for-css-layout/transcript

https://app.egghead.io/api/v1/lessons/css-use-css-grid-to-create-layout-columns/subtitles

Instructor: [0:00] Looking at our header content, our goal is to display the text content in one column and the form content in a second column beside it. Using our classes created in the previous lesson, we can add display-grid and display-grid-columns to take advantage of grid-gap.

[0:19] On save, we see a visual error, which is that the headline and paragraph are each being created as a column. To fix this, we'll wrap the text content in a div.

[0:30] Next, we'd also like the form label, input, and button to stack. For this, we can just add the display-grid class.

[0:39] On save, you may think our work is done, but not so fast. If we widen the viewport, we run into a visual issue, which is that the columns keep widening as well. Let's create a display class called container with a max width of 80 rem and some horizontal padding and then apply our new class to the header. We'll also add a pre-existing class called mx-auto to apply horizontal auto margin to center the header content within the viewport.

[1:13] Now if we test reducing the viewport size, you will see that the columns shrink and collide. This is due to a lack of wrapping behavior in grid, which we also experienced in creating the navigation. While I have found that overall I use much less media queries with grid, here is a scenario where it's necessary.

[1:35] We'll start by removing the class of display-grid-columns. Then under the nav bar, we'll create a rule for the header. Within this, we'll create a media query for min width 60 rem and define grid-auto-flow column.

[1:52] When we re-size, the column layout only exists on layouts larger than 60 rem. The primary reason we chose grid for this scenario was for grid-gap, which applies both on the larger view between grid columns and on the smaller view between grid rows.

[2:10] For the header, we would like to increase the grid-gap value, particularly to add space for midsize viewports, which are somewhere between large and mobile size. We'll add grid-gap with the value of our unit times four.

[2:26] On save, you won't see any change due to the cascade and grid-gap being reassigned later in the style sheet. We will have to qualify our header rule with display-grid-class. Finally, we would like to adjust the alignment of the text in relation to the form. Grid and flexbox share some of the alignment properties.

[2:49] The one we would like to apply is for align-item center, which we will create a utility class from. Then we will apply it to our header. This is particularly noticeable on the midsize viewports.

[3:05] In summary, the primary reason we chose grid for the header layout was for grid-gap. Due to a lack of wrapping property for grid, it was necessary to create a media query to switch from row layout on smaller viewports to column layout on larger viewports.

https://app.egghead.io/api/v1/lessons/css-use-css-grid-to-create-layout-columns/transcript

https://app.egghead.io/api/v1/lessons/css-responsively-center-an-image-and-caption-with-css-grid/subtitles

Instructor: [0:00] Our product showcase is marked up using the figure element. Let's begin the figure rule by clearing the margin inherited from browser styles and adding a height and background color to help to define the section. For the background color, we use the SAS function for scale color to obtain a lighter version of our theme's primary color.

[0:23] We also set the height using VH, which means this will take up up to 90 percent of the currently available viewport height. Within the figure rule, we'll add styles for image. We'll set object-fit cover, which results in our inline image behaving more similarly to a background image, particularly when we add width and height rules.

[0:48] Object-fit cover directs the image content to scale and fill the set dimensions without experiencing distortion. Again, we have used viewport units to set a max height of 60 view heights and a width of 80 view widths. A slight border radius and box shadow are also added for visual effect.

[1:09] Now it's time to focus on the section layout. We'll start by applying our existing class of display-grid. Something interesting has happened, which is that the grid algorithm which defaults to placing grid items in rows has assumed how much space to a lot the image versus the figcaption. We can see this better by using inspector, which reveals the grid areas.

[1:37] Our goal is to responsively center the image and the caption as one unit, both vertically and horizontally. We can accomplish this with a modifier class for display-grid, which we'll name place-center and defined a single property, place-content center. Then, we'll apply that to the figure and save.

[2:01] To wrap up, let's fix the text contrast and vertical alignment of the figcaption. We'll add a rule for figcaption with just one property for color, set to white, and then use some existing utility classes to bump up the font size, apply text align center, and adjust the margins.

[2:21] If we test resizing the viewport, we see that the image dimensions responsively scale. The image and caption keep vertically and horizontally centered within the figure layout.

[2:35] To accomplish our main goal of centering the figure content, only require the use of display-grid and place-content center. Viewport units assisted in general sizing of the layout contents. Object-fit cover allowed the image to be responsive within defined dimensions without distortion.

https://app.egghead.io/api/v1/lessons/css-responsively-center-an-image-and-caption-with-css-grid/transcript

https://app.egghead.io/api/v1/lessons/flexbox-use-flexbox-to-responsively-layout-variable-width-content/subtitles

Stephanie Eckles: [0:00] The top portion of our landing page is looking great. Using the grid-related classes we've created, we can begin to improve the styling of the Subscribe section.

[0:09] Besides display-grid, we can also add our placecenter class to direct that all the section content should be centered vertically and horizontally. We also need the text-centering utility class. Then, we'll add the margin-top large class to provide some space between this content and the section above. Following that is our site footer. We'll also add the margin-top large class as well.

[0:37] The footer will be the main focus of this lesson. I'm going to comment out the rest of the page while we work on it. The layout outcome we want is to have the footer contents separated in two columns, which are centered within the footer and have some space between them.

[0:53] At first, this may sound like a job for grid. However, the rest of the requirements are that it should respect variable widths of each column, and as the viewport shrinks, any content that drops should remain centered. The ability of the dropped column to remain centered means we need to use flex.

[1:11] We'll first add the class of site-footer because this is not the only HTML footer on our landing page. Then we'll start our rule by first assigning a background color and some vertical padding. Then we'll add our display-flex class, which immediately gives us the columns we're after.

[1:29] We can then use our list-unstyled class on each of the lists to remove the default bullets. With that, the illusion of space between columns is also removed. Lack of a well-supported gap property in flex currently requires to determine a way to add margin.

[1:46] Let's create a display-flex modifier class called row-gap. We will then use the child combinator selector with the universal selector to begin a rule that will be applied to immediate children of any element type. Then we'll define the margin property with our unit value.

[2:07] After we add this class, we have almost no visual change due to the cascade and the margin being overridden by the utility applied to the list. This is a rare case where we need to use the ! Important flag.

[2:21] Let's open inspector to check out how flexbox handles margins. You may be familiar with margin-collapse. However, that only applies to block elements. Flexbox compounds margins. Although our unit is equal to 8 pixels, the visual result is 16 pixels between our columns.

[2:41] Next, it's time to create a new display class for another property that flexbox and grid share - justify-content. For flexbox, when using the default row alignment, this applies to the x or horizontal axis. We'll create the class justify-content center, and then apply it to the footer. Now the flex children are horizontally centered within the footer.

[3:06] If we size down the viewport, we find that we're missing one of our existing classes to allow the flex children to wrap. We'll add our existing modifier class of wrap. On save, if we size down, the last item drops when the horizontal space doesn't fully allow its width. Thanks to the justify-content center class, it also remains centered within its new virtual row.

[3:32] The links could use a bit of extra space, particularly to make them easier to correctly tap on mobile. In our site-footer class, we can add a rule that says that list items following another list item should have a top margin.

[3:46] Before we conclude this lesson, all of the display classes that we applied to the footer can also complete another part of our page. Let's uncomment the subscribe section that appears above the footer. On the form, we can drop the flex classes and justify-content class. We also need to apply our existing alignitems-center class, which will resolve the label's vertical alignment.

[4:11] In summary, we chose flexbox for the footer and subscribe form due to wanting to achieve a variable-width column layout that retains center alignment once the viewport sized caused items to wrap. It was necessary to create a rule to apply a margin on the flex children due to currently missing support for gap in flexbox.

https://app.egghead.io/api/v1/lessons/flexbox-use-flexbox-to-responsively-layout-variable-width-content/transcript

https://app.egghead.io/api/v1/lessons/css-use-css-grid-auto-fit-for-responsive-column-layout/subtitles

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.

https://app.egghead.io/api/v1/lessons/css-use-css-grid-auto-fit-for-responsive-column-layout/transcript

Create a Landing Page with CSS Grid and Flexbox

Stephanie Eckles

You might also like these resources:

Learn Advanced CSS Layout Techniques

Build Complex Layouts with CSS Grid Layout

Optimize User Experience for Mobile Devices and Browsers

Course Content

You might also like these resources:

Learn Advanced CSS Layout Techniques

Build Complex Layouts with CSS Grid Layout

Optimize User Experience for Mobile Devices and Browsers