How to make CSS grid column width to be "max-content" but not bigger than 50%? So it looks something like this when first column content exceeds 50% width. And like this when first column text is short

I thought something like minmax(max-content, 1fr) should work, but seems like 1fr is never applied for some reason.

.grid {
  display: grid;
}

.grid-1 {
  grid-template-columns: max-content 1fr;
}

.grid-2 {
  grid-template-columns: minmax(max-content, 1fr) 1fr;
}

.grid + .grid {
  margin-top: 20px;
}

.grid-item {
  padding: 16px;
  background: gray;
  border: solid 1px lightgray;
}

.grid-description {
  grid-column-end: 3;
  grid-column-start: 1;
  background: teal;
}

.page {
  width: 100%;
  background: black;
}

<div class="page">
  <div class="grid grid-1">
    <div class="grid-description">Example 1</div>
    <div class="grid-item">User Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
  </div>

  <div class="grid grid-2">
    <div class="grid-description">Example 2</div>
    <div class="grid-item">Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
    <div class="grid-item">Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis</div>
    <div class="grid-item">Software Developer</div>
  </div>
</div>

How to make CSS grid column width to be "max-content" but not bigger than 50%? So it looks something like this when first column content exceeds 50% width. And like this when first column text is short

I thought something like minmax(max-content, 1fr) should work, but seems like 1fr is never applied for some reason.

.grid {
  display: grid;
}

.grid-1 {
  grid-template-columns: max-content 1fr;
}

.grid-2 {
  grid-template-columns: minmax(max-content, 1fr) 1fr;
}

.grid + .grid {
  margin-top: 20px;
}

.grid-item {
  padding: 16px;
  background: gray;
  border: solid 1px lightgray;
}

.grid-description {
  grid-column-end: 3;
  grid-column-start: 1;
  background: teal;
}

.page {
  width: 100%;
  background: black;
}

<div class="page">
  <div class="grid grid-1">
    <div class="grid-description">Example 1</div>
    <div class="grid-item">User Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
  </div>

  <div class="grid grid-2">
    <div class="grid-description">Example 2</div>
    <div class="grid-item">Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
    <div class="grid-item">Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis</div>
    <div class="grid-item">Software Developer</div>
  </div>
</div>

• javascript
• html
• css

2 Answers 2

The key to solving this is to use minmax for both of your columns.

minmax(0, max-content) minmax(50%, 1fr) will set your first column to its max content width, but never wider than 50%.

.grid {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(50%, 1fr);
}

.grid-item {
  padding: 16px;
  background: lightgray;
  border: solid 1px whitesmoke;
  overflow: auto;
}

.grid-description {
  grid-column-end: 3;
  grid-column-start: 1;
  background: turquoise;
}

.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

<div class="page">
  <div class="grid">
    <div class="grid-description">Example 1</div>
    <div class="grid-item">My Name</div>
    <div class="grid-item">Bob Hill</div>
    <div class="grid-item">My Job</div>
    <div class="grid-item">Software Developer</div>
  </div>
  
  <div class="grid">
    <div class="grid-description">Example 2</div>
    <div class="grid-item">My Name</div>
    <div class="grid-item">Bob Hill</div>
    <div class="grid-item">My Job</div>
    <div class="grid-item">Software Developer</div>
    <div class="grid-item">Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis</div>
    <div class="grid-item">Software Developer</div>
  </div>
</div>

Is this what you are wanting? If so, all I did was replace the max-content inside of minmax to be auto, so instead of minmax(max-content, 1fr) it is minmax(auto, 1fr).

.grid {
  display: grid;
}

.grid-1 {
  grid-template-columns: max-content 1fr;
}

.grid-2 {
  grid-template-columns: minmax(auto, 1fr) 1fr;
}

.grid + .grid {
  margin-top: 20px;
}

.grid-item {
  padding: 16px;
  background: gray;
  border: solid 1px lightgray;
}

.grid-description {
  grid-column-end: 3;
  grid-column-start: 1;
  background: teal;
}

.page {
  width: 100%;
  background: black;
}

<div class="page">
  <div class="grid grid-1">
    <div class="grid-description">Example 1</div>
    <div class="grid-item">User Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
  </div>

  <div class="grid grid-2">
    <div class="grid-description">Example 2</div>
    <div class="grid-item">Name</div>
    <div class="grid-item">Siobhan Hill</div>
    <div class="grid-item">Job</div>
    <div class="grid-item">Software Developer</div>
    <div class="grid-item">Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis Pneumonoultramicroscopicsilicovolcanoconiosis</div>
    <div class="grid-item">Software Developer</div>
  </div>
</div>