Help with CSS Grid - Text not wrapping inside grid?

[ninayfp]

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").

[thepitycoder]

Hi @mega4179988667

This is using Bootstrap, right?

[ninayfp]

Nope. This was built just with my own HTML and CSS.

[ninayfp]

Oh man, I just figured it out. The line height was too small. Really silly mistake now that I see it