Row Content Width: Full-Width Background and Fixed Content

Question: How do I combine a fixed-content row setting for text with full-width content setting for column backgrounds? I want my column backgrounds to stretch full-screen to the side borders of the viewport, but my text to behave like it was set in a fixed-width row.

The Problem with Full-Width

In the Row Settings, when the Content Width is set to Full Width, the Column's Background Color/Image spans to the edge of the browser as we want, but so does the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus lacus eu risus viverra pulvinar.

The Problem with Fixed-Width

In the Row Settings, when the Content Width is set to Fixed, the Column's Background Color/Image no longer spans to the edge of the browser.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus lacus eu risus viverra pulvinar.

The Solution: CSS Grid!!!

By using CSS Grid the Column Settings, you can achieve the best of both worlds!

Check out the video and sample code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus lacus eu risus viverra pulvinar.

First Row Settings:

(I switched to Advanced Mode so you can copy the CSS code)

[fl_row] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Second Row Settings:

(Don't forget to assign the class name text2 to the second column's Grid Item Class setting)

[fl_row] {
    [fl_row] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
[fl_row] .text2 {
    grid-area: 1/2/2/3;
}

First Column Settings:

[fl_col] {
    display: grid;
    grid-template-columns: auto minmax(auto, 550px);
    grid-template-areas:
    ". text";
}
[fl_col] .fl-module {
    grid-area: text;
}

UPDATE! A Note About the First Column Settings:

In my video and example above, I only have a single text module in the left column. If you are wanting to use more than one module in your column, the above code won't work because it will put all of the modules in the same spot.

So you'll need to target each individual module and assign a grid-area name to each one. Then you'll need to map each one in your grid-template-area.

This updated snippet is what you can use if you had four modules in the column:

[fl_col] {
    display: grid;
    grid-template-columns: auto minmax(auto, 550px);
    grid-template-areas:
    ". a"
    ". b"
    ". c"
    ". d";
}
[fl_col] .fl-module:nth-child(1) {
    grid-area: a;
}
[fl_col] .fl-module:nth-child(2) {
    grid-area: b;
}
[fl_col] .fl-module:nth-child(3) {
    grid-area: c;
}
[fl_col] .fl-module:nth-child(4) {
    grid-area: d;
}

Second Column Settings:

[fl_col] {
    display: grid;
    grid-template-columns: minmax(auto, 550px) auto;
    grid-template-areas:
    "text .";
}
[fl_col] .fl-module {
    grid-area: text;
}

Both columns in the same row

Some people have asked how to achieve this with both columns in the same row. It's pretty similar. Before you activate CSS Grid on a row, drag a single column into a row, and then drag another single column into the same row below the first column. They need to be one on top of the other. If they start out side-by-side, that puts them in the same column group, and each column needs to be in its own column group. Once you do that, activate the CSS Grid for the row and paste the code below into the CSS Advanced settings.

In this example, I have 3 modules in each column, you can add up to 4. If you need more modules, just add the CSS for more nth-children.. each with its own grid-area.

This is a title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus lacus eu risus viverra pulvinar.

This is a title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus lacus eu risus viverra pulvinar.

Row Settings:

[fl_row] {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

First Column Settings:

[fl_col] {
    display: grid;
    grid-template-columns: auto minmax(auto, 550px);
    grid-template-areas:
    ". a"
    ". b"
    ". c"
    ". d";
}
[fl_col] .fl-module:nth-child(1) {
    grid-area: a;
}
[fl_col] .fl-module:nth-child(2) {
    grid-area: b;
}
[fl_col] .fl-module:nth-child(3) {
    grid-area: c;
}
[fl_col] .fl-module:nth-child(4) {
    grid-area: d;
}

Second Column Settings:

[fl_col] {
    display: grid;
    grid-template-columns: minmax(auto, 550px) auto;
    grid-template-areas:
    "a ."
    "b ."
    "c ."
    "d .";
}
[fl_col] .fl-module:nth-child(1) {
    grid-area: a;
}
[fl_col] .fl-module:nth-child(2) {
    grid-area: b;
}
[fl_col] .fl-module:nth-child(3) {
    grid-area: c;
}
[fl_col] .fl-module:nth-child(4) {
    grid-area: d;
}