css - CSS Grid:分数中的分数
问题描述
我正在构建仪表板并想使用 CSS-grid。我设置了一个 4 列网格。在第三行中,我需要 2 个项目来跨越 1.5 列。
如何使 D 和 E 的宽度相等,以便它们各自占据可用空间的一半,它们共同等于 C 的宽度?我需要创建不同的列结构吗? 密码笔
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 5px;
grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [col4-start] 1fr [col4-end];
grid-template-rows: [row1-start] .75fr [row2-start] 2fr [row3-start] 4fr [row4-start] 1fr [row5-start] 1fr [row6-start] 1fr [row6-end];
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: col1-start / col4-start;
grid-row: row1-start ;
}
.b {
grid-column: col4-start / col4-end ;
grid-row: row1-start / row5-start;
}
.c {
grid-column: col1-start / col4-start;
grid-row: row2-start ;
}
.d {
grid-column: col1-start / col2-start ;
grid-row: row3-start / row5-start ;
}
.e {
grid-column: col3-start ;
grid-row: row3-start / row5-start ;
}
.f {
grid-column: col1-start / col4-end;
grid-row: row5-start ;
}
.g {
grid-column: col1-start / col2-start;
grid-row: row6-start ;
}
.h {
grid-column: col2-start / col3-start;
grid-row: row6-start ;
}
.j {
grid-column: col3-start / col4-start;
grid-row: row6-start ;
}
.k {
grid-column: col4-start / col4-end;
grid-row: row6-start ;
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box j">J</div>
<div class="box k">K</div>
</div>
解决方案
将列数加倍,您将拥有更好的灵活性。您还可以简化代码以放置元素,如下所示:
.wrapper {
margin: 40px;
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: .75fr 2fr 4fr 1fr 1fr 1fr ;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a, .c{
grid-column:span 6; /* 6 columns */
}
.b {
grid-column: span 2; /* 2 columns */
grid-row: span 4; /* 4 rows */
}
.d, .e{
grid-column:span 3; /* 3 columns */
grid-row:span 2; /* 2 rows */
}
.f {
grid-column: 1/-1; /* Full width */
}
.g, .h, .j, .k{
grid-column: span 2; /* 2 columns */
}
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box j">J</div>
<div class="box k">K</div>
</div>
推荐阅读
- java - 在 Oracle 数据库中存储不同类型数据的最佳体验
- php - Laravel,composer 需要 laravel/ui,移除 laravel/framework v7.25.0
- php - 检索远程用户的 Wikipedia 搜索
- javascript - 如何从 HTML 文件中更改文本
- f# - 使用元组列表定义模式匹配函数时出现 F# 异常错误
- c# - 禁用与当前视图对应的当前按钮wpf c#
- ballerina - 如何处理foreach中的xml?--> 不兼容的类型:预期的 'xml',找到 '(xml|string)'
- javascript - document.getElementById(' ').value 返回 undefined
- r - 使用 Ploty 的 Splom 虹膜代码,但我在 rstudio 中的绘图上没有显示数据
- perl - 如何用 ::FileRotate 替换 Log::Dispatch::File?