Now, let's look at another simple use case of grid. We have a set of three profiles laid out in a single row with a link at the end. Based on our previous example, it might seem like we need a grid with four auto-sized columns spaced out fully. Let's try that out. Here's the markup, a section with three divs and a link at the end. Scroll up, and we have some basic styling. And this is what it looks like without grid. Let's create a grid with four auto-columns. To the section element that is the parent container, let's add display-grid and grid-template-columns.

Let's create a grid with four auto-columns. To the section element that is the parent container, let's add display: grid and grid-template-columns: repeat(auto-fill, minmax(0, 1fr)). And space them out with justify-content: space-between. Alright, we have multiple problems with this. The link is stretching full height, we'll get to that in a minute. The other problem is, though all three columns are spread out equally, since our text is not of the same width, the profile images are not spaced out equally. See, there's more space here than here, and this doesn't look good. But our mockup was perfect.

This is the markup. We have a section and this is the div that we want centered within the section. First thing, we need to make the section occupy full screen. So select the section and let's give it a width of 100%. This is default, but always good to mention. And height of 100vh. This is again an important step. Now that our section is full screen, let's turn this into a grid container. display: grid; The moment you do this, we have a grid with one column and one row.

Display grid. The moment you do this, we have a grid with one column and one row. So one single cell occupying the whole screen. By default, it stretches full width and full height. But because we have a max-width rule here, max-width: 20rem;, you are not seeing this stretch the full screen. If you remove this, then it stretches full screen. So by default, we have one single cell that stretches the full width and height of its container. Let's uncomment this.

container. Let's uncomment this. And here we need to center align the content that is the div horizontally and vertically within the grid cell. We just learned the property for that, right? place-items. The value is center, center, or you can even combine the two when it's the same value and just specify one single center here. There we go. So with just two CSS rules, that is display: grid and place-items: center, we have our div