I'll continue. This is what it looks like without grid. Go to the code, scroll up to the styles, make this section a grid container using display: grid;. To specify the columns, let's use grid-template-columns, auto for the image column, 1fr for the details column, and auto again for the ratings column. I hope you were able to arrive at this by yourself. It's okay even if you couldn't. Let's add some gap as well, row-gap of 1.5rem, and then a column-gap of 1rem. The structure looks perfect.

So let's try that. Align items, center. The text is aligned vertically alright, but the rating also appears at the center vertically. We want the rating to be aligned at the top itself. So the requirement now is such that we need different vertical alignment for different items. Until now, all the CSS properties we saw were applied directly to the parent container. This time, let's learn about a property that can be used on an individual grid item instead. We can leave this as it is and change the vertical alignment of only the rating div. So select the rating class and use the property align-self with the value start to align only.

We can leave this as it is and change the vertical alignment of only the rating div. So select the rating class and use the property align-self with the value start to align only these items' contents to the top. This works. Only one last thing to do is to align these stars to the right. Once again, we need the alignment only for this column, but this time it's horizontal alignment. The way the property align-self works for vertical alignment, the property justify-self works for horizontal alignment, and in our case, the value would be end. This is perfect.

works for horizontal alignment, and in our case, the value would be end. This is perfect. If you were wondering why we didn't use text-align: right on this rating, that works as well because we are using fonts for generating the star icons. But if we use images, text-align property doesn't work. Going back to the code, there's another way you could achieve the same result. We first used align-items: center for all grid items. We can actually remove this right now and use align-self only on the info items like this. Select info align-self: center because that's the only content we need center aligned.

It's just a div with four items at each corner, but it's not that simple when you try to implement it. Let's start from the beginning. Here's the markup, a card div within which we have name, image, contact number, and social icons. Without grid, this is what it looks like. First, let's turn this card div into a two cross two grid. Scroll up to the card styles, add display: grid and grid-template-columns: auto, auto. Immediately we have something like this. Let's inspect to see the grid lines.