First grid — CSS: Layout on the Grid

Once you have the basic terminology figured out, it's time to create your first grid. In this lesson, we'll create a simple grid that will consist of 12 columns and 12 rows.

As in the case of the Flex module, to create a grid, we need to have some kind of container. Let's create a container with the class grid-12.

<section class="grid-12"></section>

In order to turn a section into a grid container, you need to use the display property with the value grid. This won't produce immediate visible results. So let's add three child elements inside our container. Let's give them a different design, and we'll use these blocks as an example of how to create a simple grid.

By not specifying the number of columns and rows, we ended up with a grid with three rows and one column. This is not usually the result we expect from grids. If that's the structure you want, then maybe you don't need grids in this case, sometimes it's easier not to let the browser process what it doesn't have to process.

Another possible value for the display property is inline-grid. Inside this container, everything will be exactly the same as with grid, but the container itself will behave like an inline element; it'll take up exactly as much space as necessary. Other elements in the flow will be able to streamline it as needed and as space permits.

Creating a grid

It's time to create our first grid. At the beginning of the lesson, it was stated that we'd create a grid of 12 columns and 12 rows. The grid-template-columns and grid-template-rows. properties are used for this. The first property is responsible for the size of the columns, and the second for the size of the rows. They can take many different values. Here are just a few of them:

• Any CSS-units you know. These can be: px, em, rem and so on.
• min-content. At this value, the width of the column will be equal to the minimum possible width. It depends on the content within the columns.
• max-content. The opposite of the previous value. The column width will be equal to the maximum possible, taking into account what content is in the columns.
• minmax(min, max). Here, an integer function is used as the value. It takes two values: the minimum and maximum size. In other words, we set boundaries within which the browser itself chooses the width.
• auto. The browser automatically adjusts all the columns so that the largest element in our grid fits snugly.

There are several other important values, which we'll look at below.

Once you know the possible values for the strip, you may be wondering where the specific number of columns or rows in the grid is specified. The point is that both the grid-template-columns and grid-template-rows properties can take multiple values, which are separated by a space. Each such value is the size of one strip. In other words, to create a grid with 12 columns and 12 rows, we can specify values in each of the properties 12 times.

Create an even grid with square cells. Let's make them 20 pixels each. Let's take the previous example and add new properties

<section class="grid-12">
    <div class="grid-element bg-gray"></div>
    <div class="grid-element bg-red"></div>
    <div class="grid-element bg-blue"></div>
</section>

.grid-12 {
  display: grid;
  grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
  grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
}

Now we've removed the height values for the container. This is due to the fact that the values of width and height are calculated from the size of the strip. There is no need to set these values additionally if you don't need a special container size.

Note what happened to the elements inside the grid. Before we set the grid-template-columns and grid-template-rows properties, they occupied the entire available screen width. Now each of them occupies exactly one cell. I.e., it has a size of 20 pixels by 20 pixels. This is very easy to check in a web inspector, such as Chrome DevTools. Open it and hover your mouse over any of these elements. You'll see the entire grid and how much space each item has in it.

You don't have to use only one version of the values inside the grid-template-columns and grid-template-rows properties. You can set a unique value for each strip. For example this:

.grid-12 {
  display: grid;
  grid-template-columns: 20px 3em minmax(20px, 10em) auto 20px 8% 20px 20px 20px 10em 20px 20px;
  grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
}

Pay attention to the size of the strips here.

Repeat

Specifying each column separately, especially if they're the same, is quite tedious. It's very easy to make a mistake and get a grid you weren't expecting. To avoid repeating the same values, the grid-template-columns and grid-template-rows have a special repeat value. More precisely, it's a function that takes two values:

1. How many times to repeat the value.
2. What value needs to be repeated.

Let's rewrite our 12-column grid using the repeat function.

.grid-12 {
  display: grid;
  grid-template-rows: repeat(12, 20px);
  grid-template-columns: repeat(12, 20px);
}

The result is the same, but there's much less code, and it is easier to read. Which is great :)

The repeat function is one of the possible values of the grid-template-columns and grid-template-rows. properties. So it's possible to use it several times, or combine it with other values. Let's assume that the first 6 cells vertically and horizontally need 20 pixels each, and the rest need 30 pixels. Then the CSS can take the following form:

.grid-12 {
  display: grid;
  grid-template-rows: repeat(6, 20px) repeat(6, 30px);
  grid-template-columns: repeat(6, 20px) repeat(6, 30px);
}

Now, the grid in the web inspector will look like this:

In addition to roughly specifying the number of columns we want to repeat, we can use several other values:

• auto-fill. The browser will repeat the columns as many times as it can fit. If the container is limited in width, the browser will place as many columns as possible without exceeding the container size.
• auto-fit. The auto-fit value is almost exactly the same as the auto-fill value, apart from one thing. If there's free space left in the container after all columns and elements have been placed, the browser will automatically compress all other strips to zero. In fact, it'll throw them out.

Be sure to look at what the grid looks like in the web inspector. You'll see that using auto-fillresults in a 16x5 grid, whereas with auto-fit the grid is 3x1. The browser just threw out unneeded strips with no elements in them.

Fraction Units

No, this is not about politics. When creating CSS Grid Layout the developers played close attention to adaptability. Now you need to adapt any web page if you care about the users. So how do you adapt the grid? You can make do with relative units of measurement, but often this way only leads to more problems. Especially if the number of strips in the grid changes. Once the number of strips has changed, you also need to change all the values for the size of the columns and rows. Not the most convenient way.

To solve this problem, the CSS Grid Layout standard introduced a new unit of measurement, fraction units. It allows you to specify how much free space should be occupied by the grid strip.

This unit works on the same principle as flex-grow, which we studied in the CSS: Flex course. Essentially, we're saying how many parts a cell should take relative to other parts.

Let's make a screen-wide grid with 12 columns and 12 rows. The size of these strips should be determined automatically, based on the current viewport resolution. Now we have fr units, this task is super simple:

.grid-12 {
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  grid-template-columns: repeat(12, 1fr);

  width: 100vw;
  height: 100vh;
}

Do it yourself

Using the lesson materials, create a 24-column grid. Try different values for grid-template-columns and grid-template-rows

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“