Positioning and Grid — CSS: Layout on the Grid

When using a Grid-based grid, you can use the position property values that you know. In most cases, they work as expected. But there are several things that distinguish positioning in block elements from positioning inside a grid container. In this tutorial, we'll look at how relative and absolute positioning works within a grid container, and whether it's possible to use the z-index property.

Relative positioning

When using relative positioning within a grid container, everything works the same as with relative positioning within another block. An item that has relative positioning shifts relative to its current location. The space it took is not redistributed in any way relative to other elements in the container. The grid is waiting for this element to return to its original place.

It is important to note that when you change the width of the viewport, a relatively positioned element will behave as though it were in its proper place. Like other elements inside the grid, it gets bigger and smaller depending on the available space inside the container. The place that the element has "come out" of also determines the size, depending on the grid settings. This can have a positive effect on the return of the element inside the grid.

Absolute positioning

In contrast to relative positioning, absolute positioning within a grid container is more complex and less obvious.

If the container has no relative positioning specified, it will work the way it does in the other block: the item is pulled from the flow, and the space is reallocated as if the item never existed.

After applying absolute positioning, the element no longer obeys the rules of the grid. Now, the size of the element is determined only by the size of the content. The grid-template-columns and grid-template-rows properties have no effect on such elements.

Some interesting possibilities can arise when you use a combination of relative and absolute positioning within a grid container.

Let's set the container to relative positioning. If you use the top, right, bottom and left properties of elements when the container is set to relative positioning, then everything will work as expected; the starting point will be the top-left corner of the container.

This is the most important bit: the absolutely positioned element inside the container is responsive to the grid-column and grid-row element placement properties! In this case, the starting point will be the top-left corner, where the element will be placed after applying these properties.

Move the element to the second row and the third column:

Now, regardless of the width of the viewport the element with absolute positioning will be on the second row and the third column.

That way, it's possible to superimpose different grid elements on top of each other so that they don't go off when you change the screen resolution. This can be an interesting feature on an adaptive or responsive site.

Absolute positioning and implicit tracks

It's impossible to use implicit tracks when using absolute positioning. The main thing is that there is no way to use implicit tracks until they appear in the grid.

Let's add some elements to the grid and create an implicit grid. The resulting seventh track can now be used when positioning the fourth element.

You may be wondering why creating grids is so complex. At the outset, this approach may seem quite complicated and unhelpful, but today's internet is increasingly showing layouts with blocks laid out in non-standard ways. Take a look at the following layout:

Note what's happening with elements 2 and 5. When using absolute positioning, the width of the element is determined by the content within it. But we can limit the maximum width using the grid-column-start/end grid-row-start/end. 

The fifth grid element has the following styles:

.grid-element-5 {
  position: absolute;
  grid-column: 3 / 5;
  grid-row: 2;
}

The grid-column property of this element was limited. Even when using absolute positioning, the item stays inside the grid and obeys some laws, including maximum dimensions. If we look at the grid using the web inspector, we see the following picture:

The second element now takes up little space, and it sits where the developer put it. The fifth element is limited by the grid-column rule if there is a lot of content inside. This important feature allows you to control absolutely positioned content within the grid.

Z-index

When using relative and absolute positioning within a grid, you can use the z-index property. This property won't behave differently from normal. Using z-index allows you to alternate elements within a grid container. This can be useful when the user is interacting with the site.

In this example, the block that appears when you hover the mouse cursor over it has absolute positioning. This allows this block to have a size that depends on the content inside. In this case, the neighboring block stays in its place all the time and doesn't disappear anywhere. This behavior allows you to do quite complex interactive things, primarily related to graphic design.

Additional assignment

Find any image of art made in Swiss Style. Try and reproduce the whimsical way the elements are positioned. This is quite possible, since they were all made at one time according to similar grids.

---

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“