在 Zurb Foundation 6 中跨列均匀分布单元格

Question

我正在构建一个应用程序布局，我想在其中布局一些卡片，这些卡片在多个列上均匀列出超链接。这样屏幕 space 将得到最佳使用。

我正在使用 Zurb Foundation 6 并且有以下基于 Zurb Foundation 6 的 HTML：

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <base href="/">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0=" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class="grid-y small-up-1 medium-up-3 large-up-6">
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 1
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 2
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 3
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 4
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 5
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 6
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 7
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 8
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 2</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                        <li><a href="#">Option 3</a></li>
                        <li><a href="#">Option 4</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="card">
                <div class="card-divider">
                    Header 9
                </div>
                <div class="card-section">
                    <ul>
                        <li><a href="#">Option 1</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk=" crossorigin="anonymous"></script>
</body>
</html>

现在我将所有卡片都放在一列中，并且在浏览器中得到一个垂直滚动条。

是否有可能让卡片显示在多列中，例如中号 3 列，大号 6 列？

我已经尝试过 grid-x，但它看起来并不像它应该的那样，列中有很多未使用的 space。

Answer 1

你可以看看这个代码笔：

https://codepen.io/dudleystorey/pen/yqrhw

（在更大的屏幕上看起来更好）

实现这个：

@font-face{font-family:'Calluna';
 src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
}
body {
 background: url(//subtlepatterns.com/patterns/scribble_light.png);
  font-family: Calluna, Arial, sans-serif;
  min-height: 1000px;
}
#columns {
 column-width: 320px;
 column-gap: 15px;
  width: 90%;
 max-width: 1100px;
 margin: 50px auto;
}

div#columns figure {
 background: #fefefe;
 border: 2px solid #fcfcfc;
 box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 margin: 0 2px 15px;
 padding: 15px;
 padding-bottom: 10px;
 transition: opacity .4s ease-in-out;
  display: inline-block;
  column-break-inside: avoid;
}

div#columns figure img {
 width: 100%; height: auto;
 border-bottom: 1px solid #ccc;
 padding-bottom: 15px;
 margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
 color: #444;
  line-height: 1.5;
}

div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
 opacity: 0.4;
}

@media screen and (max-width: 250px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}

<div id="columns">
  <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
 <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
 </figure>
 
 <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
 <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
 </figure>
 
  <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
 <figcaption>Belle, based on 1770’s French court fashion</figcaption>
 </figure>
  
 <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
 <figcaption>Mulan, based on the Ming Dynasty period</figcaption>
 </figure>
 
   <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
 <figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
 </figure>
 
   <figure>
  <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
 <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
 </figure>
  
 <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
 <figcaption>Snow White, based on 16th century German fashion</figcaption>
 </figure> 
  
   <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
 <figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
 </figure>
  
    <figure>
 <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
    <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
 </figure> 
  <small>Art &copy; <a href="//clairehummel.com">Claire Hummel</a></small>
 </div>

实现类似 pinterest 的布局。你可以有多列和不同的高度。

在 Zurb Foundation 6 中跨列均匀分布单元格

Spread cells evenly across columns in Zurb Foundation 6

html

css

zurb-foundation