Menu icon Foundation
Grid nesting Best Practices, and use of divs w/o classes

I'm wondering if there is someplace to read up on more complex aspects of the grid system. Perhaps you all could take a look at this and let me know what you think the best practices layout would be.

First off, what happens when you need to (or are forced to) use divs without being able to apply grid classes to them? Will this effect the layout? Are there any adverse side effects?

<body>
  <div class="row">
    <div class="small-12 columns">
      <div> <!-- This cannot have a class or ID attributed to it -->
        <div> <!-- This cannot have a class or ID attributed to it -->
          <div class="row" id="container1">
            <div class="small-12 medium-4 columns">
              <div class="row">
                <div class="small-12 columns">
                  <img src="http://placehold.it/150" alt="Teaser Image">
                </div>
              </div>
              <div class="row">
                <div class="small-12 columns">
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                </div>
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <div class="small-12">
                  <img src="http://placehold.it/150" alt="Teaser Image">
                </div>
              </div>
              <div class="row">
                <div class="small-12 columns">
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                </div>
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <div class="small-12 columns">
                  <img src="http://placehold.it/150" alt="Teaser Image">
                </div>
              </div>
              <div class="row">
                <div class="small-12">
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Do I need all those columns, or should I just use rows? I'll comment out the ones I am speaking of:

<body>
  <div class="row">
    <div class="small-12 columns">
      <div> <!-- This cannot have a class or ID attributed to it -->
        <div> <!-- This cannot have a class or ID attributed to it -->
          <div class="row" id="container1">
            <div class="small-12 medium-4 columns">
              <div class="row">
                <!-- <div class="small-12 columns">   If the row is left in, do I need this column? Do you always need a column in a row?-->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              </div>
              <div class="row">
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <!-- <div class="small-12"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              </div>
              <div class="row">
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <!-- <div class="small-12 columns"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              </div>
              <div class="row">
                <!-- <div class="small-12"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Or should I edit even more out? Take out the rows as well? I suppose if the image is wide enough, or style set to width 100%, it will take up a 'row' if you will. And H4 and P will take up their own 'rows' - again, if you will.

<body>
  <div class="row">
    <div class="small-12 columns">
      <div> <!-- This cannot have a class or ID attributed to it -->
        <div> <!-- This cannot have a class or ID attributed to it -->
          <div class="row" id="container1">
            <div class="small-12 medium-4 columns">
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns">   If the row is left in, do I need this column? Do you always need a column in a row?-->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              <!-- </div> -->
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              <!-- </div> -->
            </div>
            <div class="small-12 medium-4 columns">
              <!-- <div class="row"> -->
                <!-- <div class="small-12"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              <!-- </div> -->
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              <!-- </div> -->
            </div>
            <div class="small-12 medium-4 columns">
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              <!-- </div> -->
              <!-- <div class="row"> -->
                <!-- <div class="small-12"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
             <!--  </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Thank you everyone, I really appreciate it!

Here is a fiddle: http://jsfiddle.net/bmcwebdev/9j6ps5fk/

Update: on looking at this in Fiddle, I see that option #2 does mess with the margins. The .row .row style is adding the negative margin (or padding, I can't remember). So it seems that always ending with a column is most advisable.

griddivno class

I'm wondering if there is someplace to read up on more complex aspects of the grid system. Perhaps you all could take a look at this and let me know what you think the best practices layout would be.

First off, what happens when you need to (or are forced to) use divs without being able to apply grid classes to them? Will this effect the layout? Are there any adverse side effects?

<body>
  <div class="row">
    <div class="small-12 columns">
      <div> <!-- This cannot have a class or ID attributed to it -->
        <div> <!-- This cannot have a class or ID attributed to it -->
          <div class="row" id="container1">
            <div class="small-12 medium-4 columns">
              <div class="row">
                <div class="small-12 columns">
                  <img src="http://placehold.it/150" alt="Teaser Image">
                </div>
              </div>
              <div class="row">
                <div class="small-12 columns">
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                </div>
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <div class="small-12">
                  <img src="http://placehold.it/150" alt="Teaser Image">
                </div>
              </div>
              <div class="row">
                <div class="small-12 columns">
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                </div>
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <div class="small-12 columns">
                  <img src="http://placehold.it/150" alt="Teaser Image">
                </div>
              </div>
              <div class="row">
                <div class="small-12">
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Do I need all those columns, or should I just use rows? I'll comment out the ones I am speaking of:

<body>
  <div class="row">
    <div class="small-12 columns">
      <div> <!-- This cannot have a class or ID attributed to it -->
        <div> <!-- This cannot have a class or ID attributed to it -->
          <div class="row" id="container1">
            <div class="small-12 medium-4 columns">
              <div class="row">
                <!-- <div class="small-12 columns">   If the row is left in, do I need this column? Do you always need a column in a row?-->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              </div>
              <div class="row">
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <!-- <div class="small-12"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              </div>
              <div class="row">
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              </div>
            </div>
            <div class="small-12 medium-4 columns">
              <div class="row">
                <!-- <div class="small-12 columns"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              </div>
              <div class="row">
                <!-- <div class="small-12"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Or should I edit even more out? Take out the rows as well? I suppose if the image is wide enough, or style set to width 100%, it will take up a 'row' if you will. And H4 and P will take up their own 'rows' - again, if you will.

<body>
  <div class="row">
    <div class="small-12 columns">
      <div> <!-- This cannot have a class or ID attributed to it -->
        <div> <!-- This cannot have a class or ID attributed to it -->
          <div class="row" id="container1">
            <div class="small-12 medium-4 columns">
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns">   If the row is left in, do I need this column? Do you always need a column in a row?-->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              <!-- </div> -->
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              <!-- </div> -->
            </div>
            <div class="small-12 medium-4 columns">
              <!-- <div class="row"> -->
                <!-- <div class="small-12"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              <!-- </div> -->
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
              <!-- </div> -->
            </div>
            <div class="small-12 medium-4 columns">
              <!-- <div class="row"> -->
                <!-- <div class="small-12 columns"> -->
                  <img src="http://placehold.it/150" alt="Teaser Image">
                <!-- </div> -->
              <!-- </div> -->
              <!-- <div class="row"> -->
                <!-- <div class="small-12"> -->
                  <h4>Title</h4>
                  <p>Something to say here yadda yadda</p>
                <!-- </div> -->
             <!--  </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Thank you everyone, I really appreciate it!

Here is a fiddle: http://jsfiddle.net/bmcwebdev/9j6ps5fk/

Update: on looking at this in Fiddle, I see that option #2 does mess with the margins. The .row .row style is adding the negative margin (or padding, I can't remember). So it seems that always ending with a column is most advisable.

April Sadowski almost 4 years ago

What is this for?

 <!-- This cannot have a class or ID attributed to it -->

You don't need a row inside of a column unless you plan on putting in another nest of columns...

Example:

 <div class="row">
  <div class="small-8 columns">8
    <div class="row">
      <div class="small-8 columns">8 Nested
        <div class="row">
          <div class="small-8 columns">8 Nested Again</div>
          <div class="small-4 columns">4</div>
        </div>
      </div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>

Jim Christenson almost 4 years ago

Hey April, thanks for the reply. The divs where I say "this cannot have a class or ID attributed to it" are automatically inserted because this page is being built by a database. Put simply, they are there, and they are hands off. (It's a whole separate battle, but I won't get into it :-D ) So I'm wondering what happens when you insert divs that are not part of the row column set up/layout.

Are they basically assumed to be 100% width of parent and height dependent on content inside? How does this play with Foundations row - column margins and padding? And the row row negative margin?

Also, thank you for the clarification regarding the necessity of rows.