Register to get access to free programming courses with interactive exercises

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.


Hexlet Experts

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

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.