I’ve been using CSS Grid for the ‘Build a Website Design System’ project and encountered a responsive issue I haven’t been able to find a fix for.
I’ve been able to make the rows/columns responsive to browser width, however, the text inside the grid seems to overlap in on itself as opposed to break into a new line:
Here is the grid in wider width for reference:
Below is the CSS for the grid:
.grid-color {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
grid-gap: 10px 10px;
align-items: center;
}
.grid-left,
.grid-right {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: 1fr repeat(4, 2fr);
grid-gap: 10px 10px;
align-items: center;
line-height: 2px;
padding-left: 30px;
padding-top: 30px;
}
.grid-title {
grid-column: 1 / span 3;
}
For reference, I have two grids – one for primary color (".grid-left") and one for grey colors (".grid-right") inside one parent grid (".grid-color").