In this lesson, we'll take simple HTML and create a stripe with a full-width background color and centered content. We'll do all of this without adding an additional "wrapper" level in our HTML by using CSS Grid.

https://app.egghead.io/api/v1/lessons/css-create-a-self-centering-full-width-stripe-with-css-grid/subtitles

Create a self-centering, full-width stripe with CSS Grid

Bryan Robinson: [0:00] We'll start with some HTML. There's a section with a class of stripe and some number of HTML elements as direct children of that stripe. In this case, we have an <h1> and a <p> tag. We'll move down to our CSS, and we'll begin by setting the display property to grid.

[0:19] You can see that a couple of small things have changed. In a grid context, margins no longer collapse, and that was accounting for the additional white space added to the stripe.

[0:29] Next, we need to set our grids columns, and we'll use the CSS property grid-template-columns to do that. Normally, we would set multiple columns for a grid, but in this case, we only want one column, and we're going to use the minmax() function in CSS to accommodate various seizes.

[0:47] We're going to have it automatically sized down to whatever size that content needs with the key word auto, and then we'll use 900px to set a max width on this area.

[0:58] As we stretch this out, our content stays anchored at 900px mark, but we want to be able to be centered automatically in our grid. To do that we use the box alignment property justify-content and we'll allow it to be centered in our area.

[1:15] As we size it out, it automatically will center itself. This allows for you to add no additional markup to your template but have a nice centered area for your content.

[1:27] You'll notice that when we size it all the way down, that we're lacking a little bit of space on the left- and right-hand side. We can fix this with a little bit of padding on the left and right. I like to add a little bit of top and bottom padding as well to keep things consistent.

[1:39] Now at a mobile size we have a nice comfortable margin on the outsides, and on the full-width desktop size we have a nice 900px centered column.

Create a self-centering, full-width stripe with CSS Grid

Share this video with your friends