Can't change grid debug alignment

[robsonsobral]

Hi, @mirisuzanne .

I'm trying to centralize the grid, but I can't.

I guess it is because the SVG element doesn't have a width.

Thank you!

[mirisuzanne]

Can you give me a bit more detail on what you are doing, why you need it centered, and what you've tried so far?

[robsonsobral]

I need it centered because... The layout asks for it to be centered. The content has a maximum width.

I just tried to change the background-position. I can try to debug it tomorrow.

[mirisuzanne]

Right, I understand that the grid is centered. I'm trying to understand the code. normally, the grid-container would be centered, and the svg-image would be the same size as the container – so it's not clear to me how your code is structured differently.

I do think I left things so you should be able to use either the $offset value, or a combination of background-position, background-origin, and background-size to move the image where you need it.

[robsonsobral]

Oh, I see! I'm sorry! I just want to put the grid above all elements.

body {
	background: transparent;
	min-height: 100%;
	margin: 0;

	.grid &:after {
		background-image: susy-svg-grid();
		background-position: center top;
		background-repeat: repeat-y;
		content: '';
		pointer-events: none;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: layer('modal');
	}
}

[mirisuzanne]

If you are using a fixed-width grid, try background-size: span(all) 100%;, or replace span(all) with the set width of your grid. I think that should give you what you need?

[robsonsobral]

It worked, @mirisuzanne, but I can't stop to find weird to have an image "without" width, so I've to set it manually.

[mirisuzanne]

Hmmm, I'll take a look and see if there are any downsides to setting a width.

[mirisuzanne]

Fixed by 2699ab8

• The default on a responsive grid is 100%, so you'll still have to use background-size if you are trying to center a fluid grid at a different width (common when using fluid grids and a manual max-width).
• You can still use background-size/origin/etc to override as needed.