CSS Grid Layout Terminology

Ire Aderinokun:

CSS Grid Layout introduces a lot of new concepts; there are 17 new properties to learn, and many more new terms to understand. This can make getting started with CSS Grid Layout difficult, as new terms reference other terms and you can get into a spiral of confusion. So, here are the basic concepts and terminology of CSS Grid Layout, explained.

Yep, the learning curve might be steep to learn this, but it’s important to do it. As Ire goes through the different properties, it’s easy to see how amazing CSS Grid is, and how much it will simplify our life. Don’t wait till “it’s more widely supported.” Learn it now, and the investment will be worth it. CSS Grid is coming.

This next part confused me, but after thinking about it more, it made sense.

.outlined {
  grid-area: outlined;
  border: 2px solid purple;

.grid-container {
  display: grid;
  grid-template-areas: "outlined outlined ."
                       "outlined outlined ."
                       ". . ."; // The last one is empty because it's not part of the outlined grid area.
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;

Each outlined corresponds to the first and second column, and the first and second row thereby creating a 200px×200px square. I’ve created a CodePen if you want to play around with it.

See the Pen ggBYzE by Tim Smith (@timothybsmith) on CodePen.

By Timmmmy

A human hoping to be empathetic and kind with all. I'm a geek, coffee drinker, stoner, maker of things, and forever an optimist. Brightly-colored clothes weren't enough, so I dye my hair too (he/him)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s