Absolute Positioning with Grid

Examples of how absolute positioning can affect the normal flow within a grid.

You can use absolute positioning within a grid, just as you can within a regular block. If you set position: relative on a grid item, then use position: absolute on one of its children, any positioning you specify will apply within that grid item.

Here's an example of using absolute positioning to place an icon at the bottom right corner of a grid item:

<!doctype html>
<title>Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "nav footer footer";
  grid-template-rows: 50px 1fr 50px;  
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
#pageHeader, #pageFooter, #mainArticle, #mainNav, #siteAds {
  padding: 1em;
  background: gold;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;     
  position: relative;
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  } 
#mainArticle > .phone {
  position: absolute;
  bottom: 0;
  right: 1vw;
  font-size: 3em;
}
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">
    Article
    <div class="phone">&phone;</div>
  </article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>

However, there are some things to keep in mind when positioning items within a grid.

Positioned Items don't Participate in the Grid Layout

Absolutely positioned items don't participate in the grid layout, and they don't take up space. Therefore, they don't affect the placement of other grid items.

Here are two examples to demonstrate.

Without Absolute Positioning

In this example I've explicitly set box 4 to go into the 2nd column on the first row, and all other boxes are set to auto. Box 4 effectively pushes box 2 out of its slot — boxes 2 and 3 are auto-placed into the next available grid areas. Therefore, box 4 affected the placement of the grid items.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  text-align: center;
}
.red {
  background: orangered;
  grid-column: auto; 
  grid-row: auto;
}
.green {
  background: yellowgreen;
  grid-column: auto; 
  grid-row: auto;
}
.blue {
  background: steelblue;
  grid-column: auto; 
  grid-row: auto;
}
.gray {
  border: 16px solid black;
  background: silver;
  grid-column: 2 / 3; 
  grid-row: 1 / 2;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
  <div class="gray">4</div>
</div>

With Absolute Positioning

By setting box 4 to position: absolute, it's still located in box 2's position, but box 2 remains in that position unaffected. Box 3 is also unaffected.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  text-align: center;
}
.red {
  background: orangered;
  grid-column: auto; 
  grid-row: auto;
}
.green {
  background: yellowgreen;
  grid-column: auto; 
  grid-row: auto;
}
.blue {
  background: steelblue;
  grid-column: auto; 
  grid-row: auto;
}
.gray {
  border: 16px solid black;
  background: silver;
  grid-column: 2 / 3; 
  grid-row: 1 / 2;
  position: absolute;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
  <div class="gray">4</div>
</div>

Positioned Items Shrink to Fit their Contents

Another thing to remember is that, positioned items shrink to fit their contents (you can see this effect in the previous example).

This is different to what normal grid items do. Normal grid items stretch to fit their grid area, so if you specify that a grid item spans two columns and two rows, it will do just that.

The `auto` Value in Positioned Items

On normal grid items, the auto value for a grid-placement property resolves to span 1, but on absolutely positioned items, it resolves to the padding edge of the grid container. This could result in some seemingly weird stuff happening if you're not aware of how it works.

The auto value is the initial value for the grid-placement properties, so this will happen by default if you don't specify a different value.