Glad you’re finding this helpful!

  1. The rectangle is an imaginary one for the designers, but it is how the developers will code it. If you can you should use the grid to give order to your designs. At the end of the day the grid is an aid, and if your developer is not using CSS Grids, then it doesn’t matter all that much that you follow it to the T.
  2. If I understand your question correctly, yes, the parent element should be sitting on the columns. Nested child elements do not need to be within the grid.
  3. Ultimately you have to! For example a button and text inside a card is already a nested element.

Product Designer. Jury at Awwwards. eSports enthusiast. Bonafide nerd. Ketogenic foodie. Sarcastic and crass INTJ.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store