I dont understand grid rows

Hey, iam on this Codecademy lesson about grid rows

i dont understand it at all, especially when he says this →

One way to achieve this outcome is to wrap the content in a row component.

and also when he says

by placing a row element around our component that spans 7 columns we can force any new content to start beneath our component

i just dont get what he means by wrapping the component? how is the row only 7 column wide and not 12 columns wide

Good question, Alamenium!

“Wrapping” the component means to put an opening tag before and a closing tag after the component. For example, I can wrap an important line in h2 tags. Or I can wrap a component in row tags.
If a single component is 7 columns wide, but we don’t want anything to sit next to it inside its container, placing a tag before the component and a right after it forces anything else to shift off the component’s horizontal space. In other words, you don’t have to fill all 12 columns but can let smaller components have their moment in the sun.

By the way, I found the CSS lessons about columns and flexboxes difficult and had a hard time applying it to my own projects. Bootstrap has a great workaround. Codecademy offers a short introduction that makes it a lot easier to place content on a response website.

I hope this helps!
Sandy