Several Code Pen examples related to CSS layout
Nested Grid and measurement issues
See the Pen Nested grid with margins on both sides by Oliver Roeger (@uic-des) on CodePen.
Margins on both sides of the elements are fine for the parent elements. But if we want a nested grid being consistently lining up with the parent elements, we have an issue with the spaces (on the left and right of a parent box).
Nested grid visually matching parent grid margins (with right margins only and ninth-child rules to strip margins from the last grid item:
See the Pen Nested grid with right margins only and nth-child by Oliver Roeger (@uic-des) on CodePen.
Here parent and child elements have different percentage values for widths and margins. But they are visually the same. We also only use the right margin and strip it off from the last grid element with the nth-child property (in the CSS).