Use CSS Grid to Create Layout Columns

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.