Menu icon Foundation
What does .row do exactly?

I'm confused as to when I should and shouldn't use .row. What purpose does it serve? Any help is appreciated.

rowpurposeuse

I'm confused as to when I should and shouldn't use .row. What purpose does it serve? Any help is appreciated.

This post has been closed. No new replies can be added.

Mihai Stroe over 5 years ago

.row essentially creates a block of content on the horizontal plane. For example you could do something like this to separate your header, content area, and footer:

<body>

  <!-- header row -->
  <div class="row">
    <header>
      <h1>Heading</h1>

      <nav>...</nav>
    </header>
  </div>

  <!-- content row -->
  <div class="row">
    <section id="content">
      <h2>Content</h2>
    </section>
  </div>

  <!-- footer row -->
  <div class="row">
    <footer>
      <h3>Footer</h3>
    </footer>
  </div>

</body>

Then inside of the .row you would assign appropriate grids as per your design. I'd say it should be used to section off larger parts of your page.

Rafi Benkual over 5 years ago

To expand on what @Mihai wrote, a row is a horizontal block to contain vertical columns. By default, a row contains 12 columns. You can have as many rows as you want going down the page. They are simply a way to separate your content vertically.

Specifying columns within a row will organize your content horizontally.

You can see it represented on this page:
http://foundation.zurb.com/docs/components/grid.html