What you need to know to use CSS Grid Layout

Think of your webpage layout as the skeleton to your page. You need a good structure to ensure all of your content is displayed correctly. That’s where CSS Grid Layout comes in: it’s designed to help you create a fantastic, responsive grid structure. I’ve made a short list of the most important things you need to know to start using it.

1. Define a container element as a grid. To do this, add display: grid to your container in your CSS file. A grid consists of columns and rows, so the next thing you need to do is set the column and row sizes by adding grid-template-columns and grid-template-rows (or grid-template). Each child element will have similar grid attributes.
2. Know the difference between Grid Container and Grid Items. They sound similar, and they are similar, but they require different values to get them to work.
   Grid Containers: These are the parent elements that establish the grid formatting for its contents. With containers you can define the columns and rows with space-separated values that represent the track size. Each space signifies a grid line. You can also specify a grid template by using the names of the grid areas. To do this you’d use the grid-area property. To specify the size of grid lines, use column-gap and row-gap. In addition to these definitions, you can use most of the values from Flexbox such as justify-items, align-items, justify-content, and align-content. If you want to get really shorthand, you can define most of this by just using grid, but I don’t recommend that if you’re trying to learn CSS Grid.
   Grid Items: These are the children of the grid container. You can use grid-column/grid-row to specify the item’s location inside the grid. The values determine where it starts and how long it spans. For example, grid-column: 1 / span 2 would assign an item to start in the first column, and take up an additional space in the column next to it. As with Grid Containers, many of the Flexbox tools work for Grid Items as well.
3. Practice. There’s no replacement for just getting into the code and trying it out. You can read documentation and books to get started, but at some point you’re going to have to struggle with implementing it into a project. Once you understand that everything revolves around setting your page up as a grid with a parent and children, you can integrate it into your code. As you start to overcome the learning curve, the tricks and shortcuts become easier to understand and you can use them effectively. Until then, just practice with the basics.

sample code

In this example, you can see that my parent container has a class of “infoBanner”. I’ve set the display to grid. This code makes a banner on my webpage that contains two sections of text. One section spans across two columns of my three column grid. The other section occupies the other column.

CSS Grid used to create an info banner

This is the result of the code from above. The section on the left takes up about two/thirds of the space because this space has three columns, and the first section is set to span across two columns.

I used CSS Grid to create most of this webpage.

Erin Hancock is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Blue River Project in the (DGM 2740 Course) and representative of the skills learned.