基金会6全宽行

Question

In foundation 6 a full width row is normally defined as 12 columns, but the code below have equal output,

Option #1:

<div class="row">
  <div class="large-6 columns">
    <h1>Welcome to Foundation1</h1>
  </div>
  <div class="large-6 columns">
  </div>
</div>

Option #2:

<div class="row">
  <div class="large-6 columns">
    <h1>Welcome to Foundation1</h1>
  </div>
</div>

Option #3:

<div class="row">
  <div class="large-12 columns">
    <h1>Welcome to Foundation1</h1>
</div>

They above options do all the same thing but I see option #3 is mostly what is done by web developers. Are there any advantage?

Answer 1

in foundation 6 you can usa a "row expanded" to use 100% os screen

<div class="row expanded">
    <div class="large-12 columns">
        content
    </div>
</div>

to make a single row width 12 columns in foundation 6 you can use

<div class="row column">
     my content
</div>

its is equal to first example (without expanded)

Answer 2

You already said:

a full width row is normally defined as 12 columns

So .large-6 defines a column with 50% width, .large-12 will have 100%. Give the cells backgrounds and you'll see. Here is a codepen .

This is important for line wrapping, so that might be the reason for most developers to go for the full width.