Choose Between Grid or Flexbox for CSS Layout

Use CSS Grid to Create Layout Columns

Responsively Center an Image and Caption with CSS Grid

Use Flexbox to Responsively Layout Variable-Width Content

Use CSS Grid auto-fit For Responsive Column Layout

Create a Landing Page with CSS Grid and Flexbox

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`.

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.

Use CSS Grid to Create Layout Columns

Share this video with your friends

Course

Create a Landing Page with CSS Grid and Flexbox