I am making a section of a page, where I just want to the row background color to extend to the edges of the viewport, but maintain the spans in the grid - so that the spans in the row will line up with the grid system already on the page. Is there a quick way of doing this?

I don't know if this is the best way, but in that row, I created a column, but set it to absolute positioning, with auto top and bottom, and gave it a min height, and no max width, and a z-index or -1, and set the background color on that column.

Did it work?

Yeah, my method worked, but it doesn't seem intuitive because one has to take a column out of the page flow.

Use a container then. It doesn't really matter if it looks the way you want the the flow is correct. Then end result seems the same.