CSS Grid layout: overlapping areas don't respect site container max width

[skndal]

Hey there, been so much fun toying with CSS grid layouts since the new release. Really awesome stuff, a big thumbs up to the entire team and especially Kory for finally adding this feature!

I’ve run into some trouble toying with it though, and it has to do with the old section-row-system’s Container Max Width. As most of the site I’ve made so far has been using sections and rows (with flexbox, basically) in the No Container template, most of the site content respects the site’s max width (in this case 1300px) set in the Theme Options. However, I can’t seem to get that to jazz very well with the new grid system…

The design
Basically, what i’m trying to make is two horizontal rows with different backgrounds, and one box that starts in the first overlaps into the second a little. In the past I’d do this with relative positioning, but the grid system promises no more hack-arounds, but I can’t get the hang of it. There’s some text elements around it too, by the way. See example below:

The problem
The problem is that once I recreate this in grid it comes out as absolute 100% width. I can’t find a way to simultaneously 1) control the color of the background rows and 2) create grid areas for content that can overlap and also 3) get those areas to stay within the boundaries of the rest of the site content. See example below:

The question
I’ve been wreaking my head around this problem and reading up on CSS Grid to see if I’ve missed anything. But I can’t find any examples that are able to do this too (all examples break the container max width, or are fully contained within the container so the sides are blank/not set to the right background color).

You can download the test template from here

Considering the CSS Grid-element is just introduced, and that I’m sure others will love to read up on creative ways to put it to good use, your advice (ahem Kory ahem) is very much appreciated!

[christopher]

Hi Meng,

Thank you for your kind words .

Kory is not available at the moment so I will do my best to double-check your case scenario.
I downloaded the page template and from what I see you used the same method on our Changelog with 1fr 4rem 1fr values.

From what I see, you can click on the Grid element to show the overall main grid options and enable the Global Container functionality which will force the whole grid to respect the container:

I think that will do the trick for your case unless you have another point in mind which I could not understand correctly.

Thank you.

[skndal]

Hi @christopher.amirian ! Thanks for your response. Unfortunately, enabling the global container only adds whitespace to the sides, not two differently colored backgrounds that I need for this layout to work properly. That’s pretty much where I’m stuck now: either get the global container and loose the background colors, or disable it and get stuck with a fullwidth grid where the fr’s don’t respect max width.

[friech]

Hi Meng,

I understand your dilemma here, but this is not an issue with the Grid, this is an issue with the background-color, I see that you added the background-color to the first and second cell and make that look like a ROW, but there is the issue because those cell is contained inside the Grid same as all cell.

I would advise finding a way to put your background-color on the Section instead (outside of the grid). Try applying Gradient background on your section.

Let us know how it goes,
Cheers!

[skndal]

Hi @friech thanks a lot for the suggestion. The problem with a gradient background is that it doesn’t align correctly with the height of the ‘rows’ we’re simulating.

But from your answer I take it CSS Grids aren’t necessarily the best way to go about producing this desired kind of end-result? I’ve basically worked around it using traditional rows and columns and giving one column absolute position with a top value to push it further down. Looks the same, but I had hoped to achieve the kind of proportional and systematic alignment you can only get with grid.

Anyway, bottom line, last try with the general question:

Any way to assign a max width to an area of several 1fr-wide tracks?

Thanks again :))

[kory]

@skndal,

Thanks for writing in! As to your question from your last comment, if I’m understanding everything you’re trying to accomplish properly, I think that this video of ours that we released along with the Grid Element should help:

Take a look at that whole video as there are many techniques I go over in there that I think will help you here, such as:

1. Starting around 12:50 in the video above, I explain how to use a combination of calc() with vw units to create a faux “max width” around content without actually using the container. I did this as I need the grid to extend to the far edges of the screen so I had control over the placement of the background layer, but I didn’t want the content to keep growing as the screen got larger. This should directly answer your last question, but I would of course recommend watching the whole video to get more ideas there.
2. Using the grid template to create gaps between content and have greater control over how things overlap. I actually go into much more detail on this technique in this video: https://www.youtube.com/watch?v=QdT7DeH2HAk Basically, we can use the grid template to create very declarative, finite control over how content should interact. Instead of doing the height for your rows in fr units as you’re using, I’d recommend using some combination of auto for the areas that have text (so that it can wrap appropriately) and then “hard units” (e.g. px, em, rem, et cetera) for your gaps and overlapping portions. I walk through this in great detail in both videos linked above.

Hopefully this helps to point you in the right direction with your design. Best of luck!