Sorry can’t quite grasp what you are asking? 
Do you want to change the order of the smaller boxes or did you want the second row further away from box1?
Sorry can’t really think what you are trying to do:)
xD, Here we go again! I don’t know how to make it more clearer than that.
Here is the drawing:
i want the first box to go down with the horizontal width of one, not two
L-shape grid items are not allowed.
Why?
It’s specified here that a grid area must be rectangular: https://www.w3.org/TR/css-grid-1/#placement.
While it seems simple to allow text to flow in a non-rectangular area, I guess it’s problematic for other content.
Yes that makes it easier to see what you want.
As @Archibald said grid can’t do an L shape in the sense that content can flow from the top section and then into the sidebar seamlessly.
You could of course make the sidebar as a separate element to look like the drawing you made but you can’t make content from the top flow into it automatically.
You would need CSS exclusions/ to do this but there is very little browser support (only IE and Edge) and indeed the specs are still in flux after years of talks.
There is one way you could achieve the non rectangular flow and that would be by floating a block so that content wraps around it. However you would lose any explicit grid relationships between the other elements and the text would wrap at the bottom if it stretched that far.
Would content flow in box 1 from the top horizontal part into the side part?
Or would it be separate, Eg: a heading in the top and body text in the side?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.