I am attempting to utilize CSS grid to create an entirely fixed layout. This layout is for an embedded application that contains both GUI elements and text fields. The sizes of the cells should remain unchanged and not readjust as their content grows or shrinks. If the content of the text fields exceeds the available space, scroll bars should appear to prevent the GUI from becoming disorganized. Despite my efforts, the cells keep changing size and adjusting based on their content.
Configuration:
* Desired FIXED layout
* +------------------------+----------------------+
* | | 2 |
* | |----------------------|
* | | 3 |
* | |----------------------|
* | | |
* | | |
* | | |
* | 1 | |
* | | 4 |
* | | |
* | | |
* | | |
* | | |
* | | |
* | | |
* | | |
* |------------------------+----------------------|
* | | 6 |
* | 5 | |
* | |----------------------|
* | | 7 |
* +------------------------+----------------------+
Below is my MWE. I have set minwidth and minheight to 0 in the container, as suggested in previous SX questions, but it doesn't seem to have any effect (I also tried it in the items with the same outcome). (The browser I am using is FF 66 dev edition, in case that is relevant)
.container {
display: grid;
grid-template-row: 70px 70px 310px 110px 30px;
grid-template-column: 450px 350px;
background: #FAEBD7;
height: 590px;
width: 700px;
min-height: 0;
min-width: 0;
}
.item1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
background: #675443;
}
.item2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background: #42676B;
}
.item3 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background: #466567;
}
.item4 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
background: #BABBAB;
}
.item5 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 6;
background: #FFD700;
}
.item6 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
background: #FF69B4;
}
.item7 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
background: #ADFF2F;
}<div class="container">
<div class="item1">1 - Dark brown</div>
<div class="item2">2 - Bluish gray Gray</div>
<div class="item3">3 - Dark grey</div>
<div class="item4">4 - Warm grayish</div>
<div class="item5">5 - Gold (test)</div>
<div class="item6">6 - Hot pink (test)</div>
<div class="item7">7 - Green/Yellow (test)</div>
</div>