Hey Hero! I hope you're ready to start this dangerous adventure and help Rey fight her way through an army of monsters and save her brother from Valcorian.

To defeat monsters and get to the next level, you need to put them on the poisoned land (red land), and Rey on the healthy land (green land) using css grid properties. The dotted line indicates where you want to put the land.

To better understand how to create "correct" grids, you can also use "helpers" lines.

Dashed yellow lines show the position of the CORRECT grid lines that you should create using css grid:

Solid white lines show the position of YOUR grid lines:

Or you can hide them by checking the checkbox under the grid.

Alright, before we start, I have to give you an instruction on how to use the CSS Grid weapon. Otherwise, you might hurt yourself. And who's going to save Luke? Certainly not me.

So what is CSS Grid?

Simply said, it is a table on steroids. It can also align elements by columns and rows. However, using css grid you can create way more complex layouts than with tables. For example, you can create something like this:

CSS Grid is a powerful weapon in the right hands. Especially when combined with other parts of CSS such as flexbox. It can help you create layouts that were previously impossible to build in CSS. And it all starts by creating a grid in your grid container.

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

.container {
  display: grid;
}

You won’t see any difference to how these items are displayed before turning them into a grid, until we declare columns and/or rows. We can do this by using grid-template-columns and grid-template-rows properties. They define grid tracks. A grid track is a space between any two lines on the grid. Think of these spaces as tables cells. And about grid lines as invisible boundaries separating table cells.

Below you can see highlighted areas which are called tracks. And highlighted white grid lines with their names.

That's all you need to know so far. Now it's time to use css grid weapon and help Rey rescue her brother. Let's get started!

The first CSS Grid property that we will use is grid-template-columns. It defines the columns of the grid and accepts a space-separated list of values. They can take on different values: %, px, fr, and others. But let's start with %.

Here are examples:

.container {
  display: grid;
  grid-template-columns: 70% 30%;
}

.container {
  display: grid;
  grid-template-columns: 20% 30% 50%;
}

As you can see, every value defines one column. So 70% 30% define a two column grid and 20% 30% 50% define a three column.

Now try to use the right grid-template-columns values to defeat the monster!

#field {
  display: grid;
  /* type here */
  
}