将单元格均匀地分布在Zurb基金会的各个列中6
问题描述：
我正在构建一个应用程序布局，我想要布置多个卡片，将超链接均匀地列入多个列。因此，屏幕空间将被使用。将单元格均匀地分布在Zurb基金会的各个列中6
我使用Zurb基金会6，并有下面这段HTML的基础上Zurb基金会6：
<!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，但它看起来不像应该那样，列中有很多未使用的空间。
答
你可以看看这个codepen：
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 {
\t background: url(//subtlepatterns.com/patterns/scribble_light.png);
font-family: Calluna, Arial, sans-serif;
min-height: 1000px;
}
#columns {
\t column-width: 320px;
\t column-gap: 15px;
width: 90%;
\t max-width: 1100px;
\t margin: 50px auto;
}
div#columns figure {
\t background: #fefefe;
\t border: 2px solid #fcfcfc;
\t box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
\t margin: 0 2px 15px;
\t padding: 15px;
\t padding-bottom: 10px;
\t transition: opacity .4s ease-in-out;
display: inline-block;
column-break-inside: avoid;
}
div#columns figure img {
\t width: 100%; height: auto;
\t border-bottom: 1px solid #ccc;
\t padding-bottom: 15px;
\t margin-bottom: 5px;
}
div#columns figure figcaption {
font-size: .9rem;
\t 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) {
\t 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">
\t <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
\t </figure>
\t
\t <figure>
\t <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
\t <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
\t </figure>
\t
<figure>
\t <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
\t <figcaption>Belle, based on 1770’s French court fashion</figcaption>
\t </figure>
\t <figure>
\t <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
\t <figcaption>Mulan, based on the Ming Dynasty period</figcaption>
\t </figure>
\t
<figure>
\t <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
\t <figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
\t </figure>
\t
<figure>
\t <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
\t <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
\t </figure>
\t <figure>
\t <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
\t <figcaption>Snow White, based on 16th century German fashion</figcaption>
\t </figure> \t
<figure>
\t <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
\t <figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
\t </figure>
<figure>
\t <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>
\t </figure> \t
<small>Art © <a href="//clairehummel.com">Claire Hummel</a></small>
\t </div>实现pinterest般的布局。你可以有多列和不同高度。
这看起来完全像我想要实现的，但为此我需要了解它:)我看到我应该尝试列宽来强制显示在列中。 –
我已经在Foundation 6中成功地应用了这个内容。对于这部分我不使用它的xy网格，而是将类似于您的示例的代码放在一个单元中，现在它工作得很好，thanx！ –