My journey in grasping the concepts of CSS Grid starts with this exploration.
As you adjust the display width, observe how the text "Client code" switches between being displayed on one line and then breaking onto a new line repeatedly.
.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>Access the JSFiddle version here.
The goal is to keep the "label" and "dbase value" boxes on the same line using display : flex.
Uncertainty arose over the switching pattern observed. It was hypothesized that due to minmax(100px, 1fr), additional "imaginary" DIVs (each taking up "1fr") are inserted to the right of the original 3 DIVs as the grid widens. This sometimes results in a line break for the "Client code" text.
The preference is for only the initial 3 DIVs to exist and either expand indefinitely as the grid widens or maintain their width when all 3 are on one row without any line breaks. Line breaks should ideally occur only in extremely narrow viewports, currently arising at two specific points - one with 2 columns and another with 3.
The aim is to prevent the addition of these "imaginary" DIVs altogether.
Seeking advice on achieving this desired outcome.
An attempt was made by inserting a non-breaking space between "Client" and "code," resulting in a different alternation pattern upon widening: one-line ... horizontal scrollbar ... one-line ... horizontal scrollbar...
Additionally, changing to minmax(150px, 1fr) prevents "Client code" from experiencing line breaks but lengthening the text in the dbase box causes it to start breaking again. The aim is for the dbase box to allow internal text to wrap but avoid line breaks for the label except in the aforementioned situations of 2 or 3 columns.