Terminology — CSS: Layout on the Grid

In this lesson, we'll take a separate look at the terminology associated with Grid. Being grid-based, it has many different concepts, which you'll need to know about when studying this module.

You may have already encountered the concept of a grid. It often seems like some kind of magic element that makes our page beautiful and convenient. Reality, as always, is a little more complicated.

The concept of the grid comes to us from the distant past when layout designers arranged content in books and newspapers. Let's take the Blog page on the Hexlet site as an example. It's typical of a newspaper layout and consists of independent rectangular sections.

This page can be divided into a number of rows and columns of a strictly defined size. With this system of organization, we get cells like in tables. All the content, text, images, blocks, are kept in there. This principle is called modular grids. Grids exist in many different fields. They're used in newspapers and websites, but also architects and designers in various areas.

The grids can come in lots of different forms: from simple square grids to very complex, multilayer ones, in which several grids overlap each other in the structure. For layout designers, grids are fairly simple, consisting of 12 or 24 columns. They're versatile enough to make almost any sort of layout. For example, one of the most famous CSS libraries, Bootstrap uses a system of 12 columns. The whole way content is organized is built on it. Including Hexlet you're currently on.

The blog page is also built according to a simple 12-column grid design. It's divided into 12 identical columns with equal indents between them. Pay attention to the way the content is laid out. You'll see that every element follows this grid, even though it might not seem so at first.

Notice how the left and right side of the content on the blog is separated by an indentation. The same indent size is used throughout the entire grid. The rectangular areas themselves, the ones that contain the content, can occupy several columns at once. This allows you to create blocks of different widths, while remaining within the grid.

Often, these grids are enough to line up content on the page. But sometimes developers create grids within other elements. For example, a block with an article could also be marked up itself, and have content on its own internal grid. Even though it works, try not to overload your page with different grids. First of all, grids allow us to create a website template, rather than work with content somewhere inside the template.

If you've ever styled tables with HTML, you may notice that the principles of tables and grids are similar. That's because, in essence, tables are grids.

To summarize what's been said in this lesson, we can conclude that grids are a kind of structure, a guide by which we place content on the page both horizontally and vertically.

What's so useful about grids? After all, we got along just fine without them before, and some of you have already been able to design entire websites without using them. Grids have a number of advantages:

• Grids are predictable. We know in advance what we're working with and how our content will be positioned. How much space it'll take relative to the other blocks. In this case, the width is measured by the number of grid modules, not by values in pixels.

• Grids are great for adaptability. This is the main advantage of grids. It's very easy to create adaptive designs for pages.

Note that we're talking about grids in general, not Grid. It's possible to create a grid without using CSS Grid Layout at all. For example, Bootstrap once used float. At the moment, we use Flex. Both get us working grids. But with the advent of new technology, the process of creating grids has become much simpler, which has a positive effect on the speed of development.

CSS Grid Layout has a few basic concepts that you need to know before using the module in actual work. This will help us better understand how properties affect our grid. For now, all examples will be shown in an abstract block. Let's divide this block into 4 columns and see what it consists of:

All the columns are located inside a certain area that limits the grid on all four sides. This whole rectangle, as you might have guessed, is called a Grid container. As with Flex, the grid is also created within a certain block.

As you can see, we can mentally divide our whole structure into parts using vertical and horizontal lines. Although these lines aren't visible in the layout, Grid actually knows how to work with them. They can be numbered and even named. In future lessons, we'll look into this in more detail. These lines are called grid lines.

After marking out the grid lines, we get intersections. Like tables. In the module, they have exactly the same names. If an area is bounded by adjacent vertical lines, then it's a column, if it's horizontal lines, then it's a row. These spaces are also referred to as Grid Tracks. The intersection of a column and row is a grid cell.

If we take several cells, we get a grid area. It doesn't matter how we get these cells. They can be from a single row or column, the main thing is that they must be bounded by single grid lines on all four sides.

We'll return to all of these concepts and how to work with them later in the course. Don't be intimidated by the number of concepts you're coming across. As you learn, you'll quickly find out how to identify the area you are currently working with.

Do it yourself

Find any newspaper or magazine. Try building a grid on any of the pages. Look for patterns in the arrangement of the elements and lines.

---

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“