Dynamic max-width for columns in grid-CodePudding

I'm trying to create a grid with three columns where the first column should be as wide as possible, except if there is text in the two other columns that could fill the space.

This is my working code:

.grid-wrapper {
  width: 500px;
  padding: 10px;
  border-style: solid;
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 10px;
}

.ellipsis-item {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
}

.item {
  border-style: solid;
  padding: 5px;
}

.header {
  font-weight: bold;
}

<h2>Grid 1</h2>

<div >
  <div >Column 1</div>
  <div >Column 2</div>
  <div >Column 3</div>
  <div >1 Lorem ipsum</div>
  <div >2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div >3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>

<h2>Grid 2</h2>

<div >
  <div >Column 1</div>
  <div >Column 2</div>
  <div >Column 3</div>
  <div >1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div >2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div >3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>

In the case of "Grid 1", I would like the first column to only be as wide as it needs to be. I.e. I want to be able to see more text in column two and three.

In the case of "Grid 2", I would like the last two columns to have a maximum width of, lets say 100 px, or preferably, the width of the text of Column 2 and Column 3, respectively. Then I want the first column to fill the remaining space (basically as it looks now).

EDIT: Grid 1 and 2 are just examples of the same grid, I don't want two different stylings.

CodePudding user response：

Is this getting close?

.grid-wrapper {
  width: 500px;
  padding: 10px;
  border-style: solid;
  display: grid;
  gap: 10px;
}

.g1 {
  grid-template-columns: auto auto auto;
}

.g2 {
  grid-template-columns: auto 100px 100px;
}

.ellipsis-item {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.item {
  border-style: solid;
  padding: 5px;
}

.header {
  font-weight: bold;
}

<h2>Grid 1</h2>

<div >
  <div >Column 1</div>
  <div >Column 2</div>
  <div >Column 3</div>
  <div >1 Lorem ipsum</div>
  <div >2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div >3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>

<br>
<br>

<h2>Grid 2</h2>

<div >
  <div >Column 1</div>
  <div >Column 2</div>
  <div >Column 3</div>
  <div >1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div >2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div >3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>

CodePudding user response：

I removed max-width: 100px and used

grid-template-columns: auto minmax(100px, 1fr) minmax(100px, 1fr)

which is close enough to what I wanted.