DEV Community

Nic
Nic

Posted on

Using position absolute in a grid

This is a cool thing I saw on Kevin Powell's YouTube channel, and then actually used!

The cool thing is that if you have a grid child with position absolute, you can use the grid to position it. Let me show you what I mean.

The HTML

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="absolute"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

I have a div of class grid and inside it there are 10 grids. 9 of them have no class, but the last has a class of absolute - this will be our absolutely positioned element.

The CSS setup

Without content the divs will have no width or height, so I've needed to make that explicit. I've also given everything background colours so it's easy to see what's going on.

body {
  height: 100vh;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 33vw);
  grid-template-row: repeat(3, 33vh);
  width: 100%;
  height: 100%;
}

.grid > div:nth-of-type(odd) {
  background-color: pink;
}

.grid > div:nth-of-type(even):not(.absolute) {
  background-color: aliceblue;
}
Enter fullscreen mode Exit fullscreen mode

This gives us a lovely grid of 3 columns and 3 rows alternating in pink and light blue that fill the screen.

A quick note about how I'm adding the background colours. :nth-of-type is a selector that lets you select a subset of elements. It handily includes odd and even options, so in a 3x3 grid there are never two colours next to each other.

The > tells it to select the direct children - although in this case all the children are direct.

To the even divs I've added :not(.absolute) because I want the absolutely positioned div to be a different colour. Because this selector is more specific it will override anything I add to the .absolute div, so I've specifically excluded it.

I could have given classes to the divs of odd and even, but this felt easier while I was writing the HTML.

Adding the absolutely positioned element

.absolute {
  position: absolute;
  width: 33vw;
  height: 33vh;
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

This code will make this element the same size as all the other divs, just to make it look pretty, and yellow so it stands out. Because it's positioned relative to its relatively positioned parent, and that parent is the grid, it's positioned at the top left of the grid.

I want to move it into the centre. I could do that with top, left and transform: translate, or use the grid by adding:

  grid-column: 2;
  grid-row: 2;
Enter fullscreen mode Exit fullscreen mode

And it's now centred. How cool is that?

A note about blogging

I've been posting weekly since November 2020. Which sounds like a long time now I've seen it written down! Now the weather's warming up and it's easier to do things outdoors without having to worry about Covid, my diary is filling up. So I'm going to go fortnightly so I can enjoy having a social life before things inevitably get more Covidy in the winter.

Top comments (2)

Collapse
 
yessir123 profile image
vvvvvv

but according to a website that i read, absolute positioned elements dont work inside grid container, can you explain why is that? and i cant really position my items that is absolute positioning when inside grid container, i have nest a span and an image inside a p tag, that is inside a div tag that is a grid container, and when i put position relative to the div, and absolute position to my span or my img or my p tag, and they all didnt work at all, any solution?

Collapse
 
nicm42 profile image
Nic

I don't know, I just know that putting an absolutely positioned element on the grid works.

It's hard to say without seeing the code - just reading that I'm very confused about what is where.