How to stop line breaking with this CSS Grid autofill experiment

Question

First steps trying to understand CSS Grid.

You will see that as you widen the display this switches between text "Client code" being displayed on one line, ... a line break occurring ... one line ... line break ... one line ... etc.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    border: 0.5px solid Magenta;
}

.flex-display {
    display : flex;
    border: 0.5px solid Green;
}

.dbForm *{
    font-size: x-small;
}

.dbForm-nonTable {
    margin: 2px;
    padding: 2px;
    border: 0.5px solid #000000;
    overflow: auto;
    background-color: #ffec80; /* light gold */
    min-height: 10px;
    min-width: 30px;
}

.dbForm-label {
    margin: 2px;
    padding: 2px;
    overflow: auto;
    min-height: 10px;
}

<body>
<div class="dbForm" dbase-source="invoices" >

    <div class="grid-container">
        <div class="flex-display">
            <div class="dbForm-label">Date:</div>
            <div class="dbForm-nonTable">bumble doo</div>
        </div>
        <div class="flex-display">
            <div class="dbForm-label">Client code:</div>
            <div class="dbForm-nonTable">Dodo</div>
        </div>
        <div class="flex-display">
            <div class="dbForm-label">Notes:</div>
            <div class="dbForm-nonTable">Nabble</div>
        </div>
    </div>

</div>
</body>

There's also a JSFiddle here.

In each case, the idea is that there is a "label" and a "dbase value" box, and I want these always to stay together on the same line. Hence the use of display : flex to keep these together.

I was puzzled by this switching phenomenon. Then I presumed that what's happening is that because I have used minmax(100px, 1fr), that what's effectively happening as the grid gets wider is that it is inserting "imaginary" DIVs (each occupying "1fr") to the right of the 3 "real" DIVs, when the width allows this to happen. But one effect of this can then be that, in order to fit OK, the text "Client code" has to introduce a line break.

What I actually want is for the 3 "real" DIVs to be the only ones ... and either to expand to greater and greater widths as the grid gets much wider, or just stay at the width they reach when all 3 are on one row, and there's no line breaking. I'd like it if the line breaking only occurred when the viewport was really narrow and there was no other option - situations which occur currently at one point with 2 cols and at another with 3.

I basically would like to stop the insertion of "imaginary" DIVs.

Can anyone give any insight how to achieve that?

It occurred to me that I might just put a non-breaking space   between "Client" and "code". This didn't strike me as very elegant, but I tried it. With this particular setup (font, widths, etc.), this then causes an alternation of a different kind as you widen: one-line ... horizontal scrollbar ... one-line ... horizontal scrollbar...

PS I notice that if I change to minmax(150px, 1fr) "Client code" never gets a line break... with the text present in the dbase box ("Dodo"). But equally, if the text in the dbase box is made longer "Client code" starts line-breaking again. What I'd like is for the dbase box to allow the text inside it to be allowed to line-break but (except for the 2 situations mentioned above, one at 2 cols the other at 3) not the label.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Jul 19 '20 at 09:47
@connexo as the grid is expanded from to wider than the 3 boxes (each with label and DIV) you can clearly see that a fourth, then a fifth, sixth, etc. "fraction" ("1fr") is introduced to the right of the 3 real DIVs. This is what causes the squeezing. I want to stop those "imaginary" fractions/DIVs being introduced. Best seen if you start as narrow as possible. The magenta box shows the way these imaginary boxes are taking up space. — mike rodent, Jul 19 '20 at 10:38
Thanks. The trouble with your solution is that it is not responsive: you always have 3 columns, even if shown on a mobile screen-width. — mike rodent, Jul 19 '20 at 10:46
*Someone experiencing the problem I experienced would not find that other question by searching but conceivably they might find this one.* --> this is the purpose of the duplicate. Someone will find your question and then the duplicate — Temani Afif, Jul 19 '20 at 12:35
@Temani Afif yes, true, but not if I delete it, as I'm being invited to do with a link "Delete" in red font. Given that it already has an answer I'd be surprised if that would actually work, but I'm not going to try. — mike rodent, Jul 19 '20 at 13:20
you cannot delete a question with at least one upvoted answer. You try and it won't work. — Temani Afif, Jul 19 '20 at 13:23

score 1 · Accepted Answer · answered Jul 19 '20 at 10:46

You are looking for auto-fit, not auto-fill:

I found a very good explanation on this here:

auto-fill fills the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to fill the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

auto-fit fits the currently available columns into the space by expanding them so that they take up any available space. The browser does that after filling that extra space with extra columns (as with auto-fill) and then collapsing the empty ones.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    border: 0.5px solid Magenta;
}

.flex-display {
    display : flex;
    border: 0.5px solid Green;
}

.dbForm *{
    font-size: x-small;
}

.dbForm-nonTable {
    margin: 2px;
    padding: 2px;
    border: 0.5px solid #000000;
    overflow: auto;
    background-color: #ffec80; /* light gold */
    min-height: 10px;
    min-width: 30px;
}

.dbForm-label {
    margin: 2px;
    padding: 2px;
    overflow: auto;
    min-height: 10px;
}

<body>
<div class="dbForm" dbase-source="invoices" >

    <div class="grid-container">
        <div class="flex-display">
            <div class="dbForm-label">Date:</div>
            <div class="dbForm-nonTable">bumble doo</div>
        </div>
        <div class="flex-display">
            <div class="dbForm-label">Client code:</div>
            <div class="dbForm-nonTable">Dodo</div>
        </div>
        <div class="flex-display">
            <div class="dbForm-label">Notes:</div>
            <div class="dbForm-nonTable">Nabble</div>
        </div>
    </div>

</div>
</body>

You, sir, are a genius. With 2 votes to close I was beginning to wonder if I'd just asked yet another idiotic CSS question. Perhaps there is method to my madness. — mike rodent, Jul 19 '20 at 10:48

How to stop line breaking with this CSS Grid autofill experiment

1 Answers1