CODEWITHSUNDEEP
csscss-grid
Junker
Junker

Reputation: 397

Dynamic max-width for columns in grid

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 class="grid-wrapper">
  <div class="item header">Column 1</div>
  <div class="item header">Column 2</div>
  <div class="item header">Column 3</div>
  <div class="item">1 Lorem ipsum</div>
  <div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>

<h2>Grid 2</h2>

<div class="grid-wrapper">
  <div class="item header">Column 1</div>
  <div class="item header">Column 2</div>
  <div class="item header">Column 3</div>
  <div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div class="item ellipsis-item">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.

Upvotes: 1

Views: 676

Answers (2)

Junker
Junker

Reputation: 397

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.

Upvotes: 1

Brett Donald
Brett Donald

Reputation: 14407

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 class="grid-wrapper g1">
  <div class="item header">Column 1</div>
  <div class="item header">Column 2</div>
  <div class="item header">Column 3</div>
  <div class="item">1 Lorem ipsum</div>
  <div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>

<br>
<br>

<h2>Grid 2</h2>

<div class="grid-wrapper g2">
  <div class="item header">Column 1</div>
  <div class="item header">Column 2</div>
  <div class="item header">Column 3</div>
  <div class="item">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div class="item ellipsis-item">2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
  <div class="item ellipsis-item">3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
</div>

Upvotes: 1

Related Questions