Row Content Width: Full-Width Background and Fixed Content

Use the Posts Module to Create a Three-Part Horizontal Masonry Grid Use the Post Module to Create a Responsive Modular Grid

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;
}