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>

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;
}

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;
}

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;

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.