Display a CSS Grid and another element side by side, not below

October 10, 2023

I’m using a CSS grid to display two elements on top of each others. It works great but now I want to put a third element side by side in line with the CSS grid.

SCSS:

.my-grid {
  display: grid;
  div {
    grid-column: 1;
    grid-row: 1;
  }
}

HTML:

<div class="my-grid">
    <div> First element </div>
    <div> Second element </div>
</div>
<span> Third element </span>

I know I could simply put the third element in the grid element div.my-grid but I wanted another solution. Also, I tried to set display inline to the First and Second elements.

>Solution :

You can use inline-grid instead of grid to achieve what you want. This way, it won’t expand in the whole row width and will make some space for other elements.

Example:

.my-grid {
  display: inline-grid;
}

div {
  grid-column: 1;
  grid-row: 1;
}

<div class="my-grid">
  <div> First element </div>
  <div> Second element </div>
</div>
<span> Third element </span>

NOTE: Read more about the grid and inline-grid differences.

The difference between the values inline-grid and grid is that the inline-grid will make the element inline while grid will make it a block-level element.