Put elements in a row with CSS grid

<style>

.grid {
  display: grid;
  gap: 10px;
  grid-auto-flow: column;
  margin: 0 0 10px 0;
}

.grid > div {
  height: 100px;
  background: red;
  min-width: 10px;
}

</style>

<div class="grid">
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

-------------------- The result ---------------------------------

------------------------------------

They all look equal width there, but that’s only because there is no content in them. With content, you’ll see the boxes start pushing on each other based on the natural width of that content. If you need to exert some control, you can always set width / min-width / max-width on the elements that fall into those columns — or, set them with grid-template-columns but without setting the actual number of columns, then letting the min-content dictate the width.

.grid {

  display: grid;

  gap: 1rem;

  grid-auto-flow: column;

  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));

}

From: https://css-tricks.com/flexbox-like-just-put-elements-in-a-row-with-css-grid/