Let’s take this simple HTML structure:
<div class="outer">
<div class="inner">This is the inner div.</div>
</div>The first method involves some straight-forward CSS:
div.inner {
width: 60%;
margin: 0 auto;
}Doesn’t get much simpler than that:
And, if it this is all you need to do, you can probably stop here. But, sometimes what you’re actually trying to do is a little more complicated and you need some more flexibility.
Enter CSS Grid:
div.outer {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
}
div.inner {
width: 60%;
}Here, we’re creating a grid with 1 column that fills the entire space of the parent DIV. Then, a child DIV with a 60% width. And, using justify-items to center the child DIV.
This might seem like overkill for something this simple, but it does set you up if you decide to change this in the future. So, for example, let’s say you decide to add two more child DIVs later.
Your CSS would only change a little:
div.outer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
justify-items: center;
}
div.inner {
justify-self: stretch;
}This would give you three perfectly centered DIVs in your grid:
In any case, hopefully those two methods help you get past this hang-up and get back to building your site.
That said, if you’d like to jump even further into CSS Grid, you might check out the Website Template From Scratch course on Skillshare. One of the things I show you is how to build a responsive grid system using CSS Grid.
Plus, there’s a cool asynchronous form that we build.
A rotating mobile menu.
Anyway, you can get free access to the course on Skillshare. More info on the course and how to get the free access is here:
https://store.johnmorrisonline.com/product/web-design-projects-build-a-freelance-website-template-from-scratch-using-html-css-jquery-php/
