Breaking the Grid

[webcraftsman]

Is there a way to break the grid (offset an item between column lines or row lines) without using absolute positioning on an item?

Example: http://codepen.io/webcraftsman/full/ryNYGY/

The div.arrow-6 is currently absolute positioned. Would there be a way to start the element at grid-column 4 (15vw) and then offset it by -2vw so that it is positioned on the grid in the same way it is positioned absolutely (13vw)?

[rachelandrew]

You probably don't want to offset it, but rather create a grid that gives you lines in the right places. Or, use alignment to create an area in the right place them align the item inside that area.

If that doesn't help, if you could create a reduced test case (preferably in HTML and CSS rather than Sass) that demonstrates the issue in a simple manner, that would help me to answer your question.

[webcraftsman]

It makes sense what you said about creating a grid that gives lines in the right places. But I am thinking of cases where you want to have as simple a grid as possible but would want to "break the grid" to make the layout a bit more exciting.

Have you published an example of creating an area and aligning the item within that area like you described? I am not following what you are trying to describe with that solution.

Let me simplify my example. A simple grid example from your MDN guide. I am generally interested to understand if you can break the grid with CSS grid properties (represented in the example by the opaque red box). I know that "breaking the grid" is one design strategy and I am curious if the specification addresses or allows for it in some way. The answer may be that I have to use something like absolute positioning (and that is fine). Just trying to push the boundaries of my understanding of the CSS Grid Layout.

BTW, I really appreciate all the resources you have created to get people ready to use Grid Layout. I went through your videos in December and have already implemented some Grid layout in recent projects using @supports. Thanks so much.

[rachelandrew]

You can do something like this.

http://codepen.io/rachelandrew/pen/EWaMRb?editors=1100#0

So create a grid area and then use alignment to align the item inside that area. You could also add position: relative on the grid container and then absolutely position the item inside the area.

If you use the Firefox grid highlighter you can see how the item crosses grid lines.

[webcraftsman]

Thank you so much for your answer. I appreciate you taking the time to help me understand how to do this. Cheers!