The Center Design Pattern in CSS Grid

Half of the centering is done through your typical auto margin technique. The children are centering through a few extra CSS Grid properties.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the Mastering CSS Layout course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Mastering CSS Layout

  • [00:00 - 00:10] Hey everybody, today we're going to talk about the center design pattern. So let's go ahead and create our attribute selector.

    [00:11 - 00:23] And this time we're not actually going to do display grid or anything like that technically. So because the center is designed to grow to a maximum size.

    [00:24 - 00:37] And then we're going to have the margin in line start the auto. And margin in line end auto.

    [00:38 - 00:51] Now one might ask why don't we just do the margin zero auto? Well, what this does is it forces a margin of zero on top of this item.

    [00:52 - 01:02] And sometimes that will interfere with other styles we may be doing. So I prefer to just be a little bit more explicit where this extra line of code does not hurt anything.

    [01:03 - 01:06] It gets minified really well. A few extra characters is not that big of a deal.

    [01:07 - 01:20] No, sometimes you may run into situations because of the way resets work where this margin is not getting set correctly. So to combat that sometimes it's good to just go ahead and add an extra data selector.

    [01:21 - 01:36] This basically increases the specificity of this one to be a little bit more specific. It allows it to enforce its auto margins without conflicting with other resets that we may have implemented in other situations.

    [01:37 - 01:52] So we said this is 100% by default, but we actually want to stop it from growing at certain widths. So let's set our max width to a certain width. And same thing.

    [01:53 - 02:15] Let's initialize that to nothing. Now the next thing we want to do, we often want to set the children inside of our of our center that want to be centered as well. So let's go ahead and set that property.

    [02:16 - 02:30] And we can do that by this is where the grid comes in. And then we also want to be able to center the text center text.

    [02:31 - 02:49] So now we have the configuration to not just center the box that it's coming in , but also center the children inside of our box and the text inside of our box. Okay, so let's go ahead and create a testimonial section and we want to center this content and we want it to look like this.

    [02:50 - 03:04] So pause the video and implement it and then come back and I'll show you how I got to this. Okay, so we have this article for this testimony and we're using data centered.

    [03:05 - 03:11] Then we're also adding the center children and center text value. So that way the content inside will be centered.

    [03:12 - 03:17] Then we want the content also to be stacked on top of each other. So we went ahead and added a data stack.

    [03:18 - 03:26] Now for the center, we want it to only grow to 40 characters. We have a getter size five for the stacking space.

    [03:27 - 03:31] So we have one more design pattern to go over, and I'll see you on the next lesson.