Over the last three guides you have discovered that there are a lot of different ways to place items using grid. This can seem a little bit overcomplicated at first, but remember you don't need to use all of them. In practice I find that for straightforward layouts, using named template areas works well, it gives that nice visual representation of what your layout looks like, and it is then easy to move things around on the grid.
If working with a strict multiple column layout for example the named lines demonstration in the last part of this guide works very well. If you consider grid systems such as those found in frameworks like Foundation or Bootstrap, these are based on a 12 column grid. The framework then imports the code to do all of the calculations to make sure that the columns add up to 100%. With grid layout the only code we need for our grid "framework" is:
grid-template-columns: repeat(12, [col-start] 1fr);
We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might have the following markup.
<header class="main-header">I am the header</header>
<aside class="side1">I am sidebar 1</aside>
<article class="content">I am the main article</article>
<aside class="side2">I am sidebar 2</aside>
<footer class="main-footer">I am the footer</footer>
I could then place this on my grid layout framework like this.
grid-column: col-start / span 12;
grid-column: col-start / span 3;
grid-column: col-start 4 / span 6;
grid-column: col-start 10 / span 3;
Once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.
That's all I need. I don't need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the
1fr column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!