The grid item’s position: grid-row-start and grid-column-start

Grids are a new system for creating page layouts. Though they are a recent innovation, modern browsers have good support for them. Perhaps you have already learned about other systems for creating grids from our other courses, and perhaps the following question occurred to you: why do we need grids if we have flexboxes, for example? The fact is that, unlike flexboxes, grids allow us to work with columns and rows at the same time, which is a great feature, isn’t it? But let’s not get ahead of ourselves. We will discuss all of the details in due course.

In the first part of the chapter, we will study how grids can be used to create a landscape design, we will try to build a grid layout while imagining that the grid is a map of the area, and we will draw up a visual plan of how objects will be placed in this area.

After you become a seasoned landscape designer, we will move on to the second part of the chapter, where we will use grids to create simple layouts on real pages that are similar to those found on the Internet. You have probably already created something similar using floats, CSS tables, and flexboxes.

And so, in order to create a block using a grid container, you need to assign it the corresponding value for the display property:

.container {
  display: grid;
}

The immediate child elements in the grid container will become its grid items, and then they will be placed in accordance with the grid layout.

As we already mentioned, grid items are arranged in a two-dimensional grid. In other words, the grid consists of rows and columns located between lines, which are numbered sequentially as shown in the illustration below.

In order to place an element inside a grid, you need to set coordinates for it. In other words, it’s like you are forcing the item to say:

I am a grid item starting at this column line and that row line.

When we set the start coordinate for a grid item as a particular row or column, it automatically extends to the next line of rows or columns and thus forms a grid cell.

In the example above, a cell starts on the 4th column line and the 3rd row line.

In the code, we do this using the grid-column-start and grid-row-start properties.

Example:

grid-column-start: 4 means that the element starts with the 4th column line.
grid-row-start: 3 means that the element starts with the 3rd row line.

Let’s get started with the first assignment. We have a grid that consists of 4 rows and 4 columns. Let’s try to assign properties to the element in this grid whereby it will start at a certain row line and a certain column line.