"Prioritize" one grid column to shrink in width last?

[proimage]

I'm using grids for the first time (yay!). The site I'm using it on has elements stretching out to one of three main widths - full-width (100% browser width), content-width (1640px), or text-width (880px). Here's my SCSS:

$content-width: 1640px;
$text-width: 880px;

.layout {
    width: 100%;
    display: grid;
    grid-template-columns:
        [full-start]    minmax(0, 1fr)
        [content-start] minmax(0, ($content-width - $text-width) / 2)
        [text-start]    minmax(0, $text-width)                        [text-end]
                        minmax(0, ($content-width - $text-width) / 2) [content-end]
                        minmax(0, 1fr)                                [full-end];
    > *,
    .text-width {
        grid-column: text;
    }
    .content-width {
        grid-column: content;
    }
    .full-width {
        grid-column: full;
    }
}

For a quick example, horizontal lines in the header and footer might use .full-width, a photo gallery could use .content-width, and article copy would use .text-width. Or, visually:

=============================================BROWSER=============================================
|          ///\\\                                                                Login          |
|          |LOGO|                   Welcome to this website!                                    |
|          \\\///                                                           Contact Us          |
|-----------------------------------------------------------------------------------------------|
|                                                                                               |
|          ___________________________________________________________________________          |
|         |                                                                           |         |
|         |                                                                           |         |
|         |                                                                           |         |
|         |                               HERO IMAGE                                  |         |
|         |                                                                           |         |
|         |                                                                           |         |
|         |___________________________________________________________________________|         |
|                                                                                               |
|                              WELCOME                                                          |
|                                                                                               |
|                              The quick brown fox jumped over the                              |
|                              lazy dog. How much wood could a wood-                            |
|                              chuck chuck, if a wood-chuck could                               |
|                              chuck wood?                                                      |
|                                                                                               |
|                                                                                               |
|-----------------------------------------------------------------------------------------------|
|                                                                       ____________            |
|           - Footer link 1                                     Search:(____________)           |
|           - Footer link 2                                                                     |
|                                                                                               |
|                                                                                               |
|                             This website is copyright by Acme Inc-                            |
|                             orporated, 2017. All rights reserved.                             |
=================================================================================================

^         ^                  ^                                      ^                 ^         ^
|         |                  |                                      |                 |         |
|         |                  |                                      |                 |         |
|         |                  |                                      |                 |         |
|         |                  |<--------------[text]---------------->|                 |         |
|         |                                                                           |         |
|         |                                                                           |         |
|         |                                                                           |         |
|         |<--------------------------------[content]-------------------------------->|         |
|                                                                                               |
|                                                                                               |
|<-------------------------------------------[full]-------------------------------------------->|

The question: How do I make it so that the center column—the text grid area—is the last to shrink in width as the browser window shrinks? At the moment, the center text grid area shrinks proportionately with the other columns.

I realize I could just use breakpoints to control whether the text grid area can shrink or not, but I feel like there's probably a more native "grid" method that I'm just missing...

Thanks!!

P.S. And yes, I did have fun making that possibly-superfluous ASCII-art diagram. ;)

[thinsoldier]

Try making the outside columns auto instead of minmax.

And consider using breakpoints with a different grid definitions for narrower viewports if your outside columns are only going to be 50px or 10px wide at smaller viewports.

[proimage]

I'll try that, thanks.

At smaller viewports the outer columns should shrink down until they disappear entirely, outermost ([full]) first.