I am currently utilizing CSS grid to create the layout for my web application. I need to specify that a particular class should have a minimum grid-column span of 3 frames and extend across the entire grid row if it is the only object in that specific row.
Grid Layout
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, auto));
grid-template-rows: 1fr min-content;
grid-gap: 50px;
}
Class Definitions
.overalldata {
grid-column: auto / span 3;
}
.clustergraph {
grid-column: auto / span 6;
justify-items: center;
}
.userinfoboard {
grid-column: auto / span 3;
justify-items: center;
align-self: center;;
}
When my browser window has a full width, it can accommodate up to 19 columns. If I reduce the window size to allow only 11 columns, the userinfoboard class object must expand to fill the entire width since it is the sole object in its grid row.
How can I achieve this?
I came across an answer on a similar issue in this Stack Overflow post, but it lacks the feature of PSEUDO: min-span: span 3:
.userinfoboard {
grid-column: 1 / -1;
justify-items: center;
align-self: center;;
}
Thank you for your help!