javascript - 带有扩展项目及其周围项目的网格布局
问题描述
尝试创建如下所示的布局:
每个项目都是一个正方形(通过 padding-bottom 技术创建)。项目不应重叠。
我在使用绿色元素时遇到问题,无论grid-area
我应用什么道具——它都会在左侧创建空白空间。
我在 JSFiddle 上做了一个演示——http: //jsfiddle.net/f2to1kyw/
甚至可以在没有 JS 的情况下创建这样的布局吗?
.container {
position: relative;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
.item {
background: tomato;
width: 100%;
}
.item:before {
content: '';
padding-bottom: 100%;
display: block;
}
.item--big {
grid-area: 1 / 1 / 3 / 3;
}
.item--green {
background: #36926A
}
<div class="container">
<div class="item item--big"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item item--green"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
解决方案
甚至可以在没有 JS 的情况下创建这样的布局吗?
是的。使用 CSS Grid 有多种方法可以做到这一点。
使用grid-area
属性:
来自MDN:
grid-area
CSS 属性是 、 和 ... 的简写属性grid-row-start
。grid-column-start
<grid-row-end
/ pgrid-column-end
>
grid-area
因此,绿色框的属性值为:2 / 4 / 4 / 6
这是以下的简写:
grid-row-start: 2;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 6;
所以CSS规则是:
.item--green {
grid-area: 2 / 4 / 4 / 6;
}
.container {
position: relative;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
.item {
background: tomato;
width: 100%;
}
.item:before {
content: '';
padding-bottom: 100%;
display: block;
}
.item--big {
grid-area: 1 / 1 / 3 / 3;
}
.item--green {
background: #36926A;
grid-area: 2 / 4 / 4 / 6;
}
<div class="container">
<div class="item item--big"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item item--green"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
使用grid-column
/grid-row
属性
.container {
position: relative;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
.item {
background: tomato;
width: 100%;
}
.item:before {
content: '';
padding-bottom: 100%;
display: block;
}
.item--big {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.item--green {
background: #36926A;
grid-column: 4 / span 2;
grid-row: 2 / span 2;
}
<div class="container">
<div class="item item--big"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item item--green"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
相关代码:
.item--green {
grid-column: 4 / span 2; /* start at column 4 and span 2 columns */
grid-row: 2 / span 2; /* start at row 2 and span 2 rows */
}
推荐阅读
- soap - 空手道 - 如何写入用作特征文件输入的同一 CSV 文件
- c# - Linq to SQL 将一个可为空的 bool 值映射到 IsNull 而不是 = NULL
- angular - Angular 8 + IVY 的问题 - 模板更改后编译器中断
- android - 无法将 API 的响应添加到数据库
- artifactory - 从远程复制到本地存储库
- python - 合并两个 NumPy 二维数组
- mysql - 在执行查询之前在 SQL 脚本中创建变量
- android - 如何正确使用 querySkuDetailsAsync?
- java - 如何将 Eclipse Java Jar 文件导入 VSC?
- python - 为什么我在运行 runmodwsgi 时收到缺少“split”属性的错误?