From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create columns and position grid items

Create columns and position grid items - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Create columns and position grid items

“

- [Instructor] Now comes the challenging part. My design calls for a four-column layout where the two center columns are the ones that constrain the content to a max width of 50em's, and the two outer columns, so the first and the last column, work much the same as margin left and right auto in that they flex the available space on an off to center line everything else. To make matters a bit more complicated, at the very bottom we have these two twin boxes that span across two columns each and we do the same for footer. To get this to work, we'll use a combination of the FR units, the repeat keyword, and the min-max function. This is what it looks like. First, grid-template-columns, then we'll set the first and the last column to one FR each so they'll take up one fraction of the available space, so 1fr. Then I'll repeat the two center columns. So I got two identical columns, repeat(2,) And then I'll use the min-max function to set a max width for each of these two columns. Now, the…

Contents