CODEWITHSUNDEEP
csszurb-foundation
Yami Odymel
Yami Odymel

Reputation: 1898

Foundation one grid column width for all viewport?

In Semantic UI, I could use .four.wide.column to make a 4/16 wide column on all devices / viewports.

But in Foundation, It seems like I have to use .small-4.medium-4.large-4 to make sure the column has the same width on the different devices / viewports.

Is there anything like ... .all-4 column width in Foundation so I don't have to use .small-4.medium-4.large-4?

<!-- Semantic UI -->
<div class="ui grid">
    <div class="four wide column"></div>
</div>

<!-- Foundation -->
<div class="grid-x">
    <!-- Is there a .all-4 class? -->
    <div class="small-4 medium-4 large-4 cell"></div>
</div>

Upvotes: 0

Views: 138

Answers (2)

ksav
ksav

Reputation: 20821

Have a look at the Foundation XY Grid Docs

.cell {
  background: #1779ba;
  color: #fefefe;
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<div class="grid-x grid-margin-x">
  <div class="cell small-6">6 cells</div>
  <div class="cell small-6">6 cells</div>
</div>
<div class="grid-x grid-margin-x ">
  <div class="cell small-4">4 cells</div>
  <div class="cell small-4">4 cells</div>
  <div class="cell small-4">4 cells</div>
</div>

Or if you need, the older Foundation float grid docs. (These are now disabled by default, and were replaced in v6.4)

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation-float.css" rel="stylesheet" />
<div class="row">
  <div class="columns small-4">4</div>
  <div class="columns small-4">4</div>
  <div class="columns small-4">4</div>
</div>
<div class="row">
  <div class="columns small-6">3</div>
  <div class="columns small-6">9</div>
</div>

Upvotes: 1

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

If you use <div class="small-4 cell"></div> it will have the right size on all viewports.

The classes are always overwritten by the next higher one, e.g.: medium overwrites small

Upvotes: 0

Related Questions