Setting two collapsing columns in a row equal in width, with a center column that shrinks and grows to fit content

Question

I'm trying to achieve a certain column layout in CSS. I've explored using Flexbox as well as CSS Grid, but all of my peers I've talked to cannot figure out a way to make this work. I know I can achieve it using JavaScript, but I'd like to avoid that if at all possible.

I want to create a layout of three columns. Column 1 and Column 3 should be matching in width (defined by the content of the longer column), and column 2 should shrink and grow to allow content to fit (but not expand to fill the parent container).

It's a bit difficult to paint a picture of what I'm going for, so please take a look at this CodePen where I've broken down the rudimentary code and showed a mocked up example of what I'm going for.

Here's the HTML structure

<div class="container">
    <div class="col col--Z">Let's match cols, but also collapse!</div>
    <div class="col col--Y">No!  Let me shrink!</div>
    <div class="col col--Z">Yes!</div>
</div>

And here's the SCSS structure

.container {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr auto 1fr;

    .col {
        padding-left: 6px;
        padding-right: 6px;

        &.col--Z {
            background: rgba(0,255,55,0.2);
        }

        &.col--Y {
            background: rgba(0,0,255,0.2);
        }
    }
}

* {
  font-family: 'Arial', Sans-Serif;
}

.container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr auto 1fr;
}

.container .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}

.container-faked {
  display: grid;
  justify-content: center;
  grid-template-columns: 260px auto 260px;
}

.container-faked .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container-faked .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container-faked .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}

<!-- This is the actual code -->
<h1>CSS Grid Attempt (actual code)</h1>
<div class="container">
  <div class="col col--Z">Let's match cols, but also collapse!</div>
  <div class="col col--Y">No!  Let me shrink!</div>
  <div class="col col--Z">Yes!</div>
</div>

<br>
<hr>
<br>

<!-- This is the objective, mocked up! -->
<h1>CSS Grid Attempt (faked example)</h1>
<div class="container-faked">
  <div class="col col--Z">Let's match cols, but also collapse!</div>
  <div class="col col--Y">No! </div>
  <div class="col col--Z">Yes!</div>
</div>

And the CodePen containing both the rudimentary code (not working) as well as the mocked up example of what I'd like to achieve, but using fixed pixel values to simulate equal width columns.

https://codepen.io/seanmaisch/pen/MZdqoW

related (but probably not a duplicate): https://stackoverflow.com/q/23794713/3597276 — Michael Benjamin, Jan 17 '19 at 20:16
Thanks @Michael_B. Indeed related, but can't go far enough as to make both columns shrink to fit content, yet match in width. That example lacks the flexibility for that and requires exact values from what I can tell. Appreciate the contribution to the discuss regardless! — Sean Maisch, Jan 17 '19 at 20:42
That's what I thought. Consider posting your codepen code in a stack snippet, so that all relevant code is available in the question itself, and then posting a bounty on your question to attract more attention. — Michael Benjamin, Jan 19 '19 at 02:33

Vadim Ovchinnikov · Accepted Answer · 2019-01-21T19:41:01.080

1

You can use display: inline-grid to make grid container width according to content. To center it you can use some .wrapper block.

* {
  font-family: 'Arial', Sans-Serif;
}

.wrapper {
  display: flex;
  justify-content: center;
}

.container {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
}

.container .col {
  padding-left: 6px;
  padding-right: 6px;
}

.container .col.col--Z {
  background: rgba(0, 255, 55, 0.2);
}

.container .col.col--Y {
  background: rgba(0, 0, 255, 0.2);
}

<div class="wrapper">
  <div class="container">
    <div class="col col--Z">Let's match cols, but also collapse!</div>
    <div class="col col--Y">No!  Let me shrink!</div>
    <div class="col col--Z">Yes!</div>
  </div>
</div>

edited Jan 21 '19 at 19:41

answered Jan 19 '19 at 11:32

Vadim Ovchinnikov

13,327
5
62
90

Hi @vadim-ovchinnikov thanks for your help. Sadly this still doesn't achieve what I'm trying to do. This makes the longest team name collapse to the same width as the shorter name, and by trying to remedy that by applying `white-space: nowrap;` forces content box expansion issues. The content should not line-break but expand to fit the content, always. You can see this demonstrated in the CodePen below. https://codepen.io/seanmaisch/pen/LqPowQ – Sean Maisch Jan 21 '19 at 19:13
1

@SeanMaisch Updated answer to fix your issue. – Vadim Ovchinnikov Jan 21 '19 at 19:41
1

@SeanMaisch Could you please provide feedback about my new solution? If it solves your problem consider upvoting and selecting my answer as accepted. If not please leave a comment why. – Vadim Ovchinnikov Jan 22 '19 at 08:11
1

This is great! Just what I needed! Thank for you the solution! I've included a CodePen demonstrating your CSS Grid solution. Shame I didn't think to try the `inline-grid` property before! Much appreciate your help! https://codepen.io/seanmaisch/pen/omgXWz – Sean Maisch Jan 22 '19 at 20:08

Setting two collapsing columns in a row equal in width, with a center column that shrinks and grows to fit content

1 Answers1