作者：zhanwang | 来源：互联网 | 2022-10-19 14:41
我试图实现一个布局，第一行有2列，此后有3列，就像附加的图像一样。我正在使用css grid。
到目前为止，这是我的代码
body {
background: #161616;
color: #bdbdbd;
font-weight: 300;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: Helvetica neue, roboto;
}
h1 {
font-weight: 300;
}
a {
color: white;
text-decoration: none;
color: #4d4d4d;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.feature__item {
background-color: #C4C4C4;
padding: 15px;
color: #4d4d4d;
}
.feature__item:first-of-type{
grid-column-start: 1;
grid-column-end: 3;
}
.feature__item:nth-child(2) {
}
这是Playcode上的工作示例
1> G-Cyr..：
您需要将网格划分为6列，才能跨越其中的3或2
body {
background: #161616;
color: #bdbdbd;
font-weight: 300;
height: 100vh;
margin: 0;
display: flex;
/*
align-items: center;
justify-content: center;
*/
text-align: center;
font-family: Helvetica neue, roboto;
}
h1 {
font-weight: 300;
}
a {
color: white;
text-decoration: none;
color: #4d4d4d;
}
.container {
/* instead , align/justify */ margin:auto;
display: grid;
grid-template-columns:repeat(6,1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.feature__item {
background-color: #C4C4C4;
padding: 15px;
color: #4d4d4d;
grid-column : span 2;
}
.feature__item:first-of-type,
.feature__item:nth-child(2) {
grid-column: span 3;
}
京公网安备 11010802041100号