html - 使用浮动项目的 CSS Grid
问题描述
我正在尝试实现一个简单的网格,每行有 3 个方形项目,每个项目最多可以有 3 行/列。这是我到目前为止所拥有的:
https://jsfiddle.net/dt3u6840/
HTML:
<div class="layout-grid">
<a href="#" class="block" data-rows="2" data-cols="2"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="3"></a>
</div>
CSS:
.layout-grid { overflow: hidden; max-width: 800px; width: 100%; }
.layout-grid .block { position: relative; display: block; float: left; background-color: green; height: auto; transition: all .3s ease; }
.layout-grid .block:hover { opacity: .2; }
.layout-grid .block:nth-child(odd) { background-color: blue; }
.layout-grid .block[data-cols="1"] { width: 33.33333333333%; }
.layout-grid .block[data-cols="2"] { width: 66.66666666666%; }
.layout-grid .block[data-cols="3"] { width: 100%; }
.layout-grid .block[data-rows="1"] { padding-top: 33.33333333333%; }
.layout-grid .block[data-rows="2"] { padding-top: 66.66666666666%; }
.layout-grid .block[data-rows="3"] { padding-top: 100%; }
这很好用。但是,如果我尝试添加 > 1 行的项目,则不会:
https://jsfiddle.net/pz4vhjw6/
新的 HTML:
<div class="layout-grid">
<a href="#" class="block" data-rows="2" data-cols="2"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="2" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
</div>
我能做些什么来完成这项工作吗?
解决方案
您可以CSS Grid layout
在此处使用 - 并非仅在现代浏览器中受支持(请参阅支持信息)。在这里,您可以使用 3 列布局并跨越行和/或列来获得所需的布局 - 请参阅下面的两个布局的演示:
.layout-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
width: 100%;
max-width: 800px;
}
.layout-grid .block {
background-color: green;
transition: all .3s ease;
padding-top: 100%; /* set height of block */
}
.layout-grid .block:hover {
opacity: .2;
}
.layout-grid .block:nth-child(odd) {
background-color: blue;
}
.layout-grid .block[data-cols="2"] {
grid-column: span 2; /* occupy 2 columns */
grid-row: span 2; /* occupy 2 rows */
}
.layout-grid .block[data-cols="3"] {
grid-column: span 3; /* occupy 3 columns */
grid-row: span 3; /* occupy 3 rows */
}
.layout-grid .block[data-rows="2"] {
grid-row: span 2; /* occupy 2 rows */
}
.layout-grid .block[data-rows="3"] {
grid-row: span 3; /* occupy 3 rows */
}
<div class="layout-grid">
<a href="#" class="block" data-rows="2" data-cols="2"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="3"></a>
</div>
<br/>
<div class="layout-grid">
<a href="#" class="block" data-rows="2" data-cols="2"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="2" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
<a href="#" class="block" data-rows="1" data-cols="1"></a>
</div>
推荐阅读
- javascript - setTimeout 在微任务队列(作业队列)中的任务之前执行
- ios - 如何仅在从 Web 获取数据后显示 tableView?(迅速)
- ios - 无法加载从具有标识符 xxx 的包中的笔尖引用的 xxx 图像
- ionic-framework - ionic Object(...) 不是 DocumentViewer.viewDocument 的函数:
- listview - Xamarin 列表视图在滚动视图中时未显示完整项目
- python - 从列表中删除重复项 - “TypeError:'Series' 对象是可变的,因此它们不能被散列。”
- javascript - 如何使用阅读模式和 JAVA 启动嵌入在网络浏览器中的 pdf 文件
- php - 从php中的复选框保存多个值
- c# - 如何比较(大于小于)未知类型的对象?
- android - 为什么我在 Xamarin 中找不到我的参考资料并且 Google Map 不显示?