css - 所有视口(viewport)的基础一个网格列宽？

Question

在语义 UI 中，我可以使用 .four.wide.column 在所有设备/视口(viewport)上创建一个 4/16 宽的列。

但在 Foundation 中，我似乎必须使用 .small-4.medium-4.large-4 来确保列在不同的设备/视口(viewport)上具有相同的宽度。

Foundation 中是否有类似 ... .all-4 列宽的内容，因此我不必使用 .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>

Answer 1

看看 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>

或者如果你需要，旧的Foundation float grid docs . (这些现在默认禁用，并在 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>