【发布时间】：2019-05-19 14:22:39
【问题描述】：
我有一个混合了 3 列和 2 列的布局（下图），我需要知道这种布局是否可以在使用单个容器的 css 网格中实现，因为我已经尝试将它与 grid-template-areas 一起使用和行/列跨越，但无法弄清楚。问题在于定义grid-template-columns，我已经用3 cols定义了它以获得我的3 col布局，但是对于底行，我需要两个col 50％。任何帮助将不胜感激。
这是我的代码。
:root {
--yellow: #ffc600;
--black: #272727;
}
html {
/* border-box box model allows us to add padding and border to our elements without increasing their size */
box-sizing: border-box;
/* A system font stack so things load nice and quick! */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 900;
font-size: 10px;
color: var(--black);
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.07);
}
/*
WAT IS THIS?!
We inherit box-sizing: border-box; from our <html> selector
Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-image: url("./images/topography.svg"),
linear-gradient(110deg, #f93d66, #6d47d9);
background-size: 340px, auto;
min-height: calc(100vh - 100px);
margin: 50px;
/* background: white; */
background-attachment: fixed;
letter-spacing: -1px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 5px 0;
}
/* Each item in our grid will contain numbers */
.item {
/* We center the contents of these items. You can also do this with flexbox too! */
display: grid;
justify-content: center;
align-items: center;
border: 5px solid rgba(0, 0, 0, 0.03);
border-radius: 3px;
font-size: 35px;
background-color: var(--yellow); /* best colour */
}
.item p {
margin: 0 0 5px 0;
}
/*layout*/
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.item-1{
grid-row: span 2;
}
.item-4{
grid-column: 3 / 3;
grid-row: 1 / span 2;
}
.item-5,.item-6{
grid-row: span 2;
}
.item-10{
grid-column: span 2;
}<div class="container">
<div class="item item-1">
1
</div>
<div class="item item-2">
2
</div>
<div class="item item-3">
3
</div>
<div class="item item-4">
4
</div>
<div class="item item-5">
5
</div>
<div class="item item-6">
6
</div>
<div class="item item-7">
7
</div>
<div class="item item-8">
8
</div>
<div class="item item-9">
9
</div>
<div class="item item-10">
10
</div>
<div class="item item-11">
11
</div>
<div class="item item-12">
12
</div>
</div>【问题讨论】：