Example

by Roland Doda

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content -->

<div id="container">
  <div>Item as wide as the content.
  Item as wide as the content
  Item as wide as the content
  Item as wide as the content
  Item as wide as the content
  Item as wide as the content landi</div>
  <div>
    Item with more text in it. Because the contents of it are
    wider than the maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>

CSS

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(10px, 200px);
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
 
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
   overflow: hidden;
}