3 個答案:

答案 0 :(得分：5)

您可以使用justify-content在內容之前和之后添加其他列，而不是1fr將內容置于中心位置。

然后將div之后的div和.line置于第二列的開頭。

* {

box-sizing: border-box;

}

.outer {

width: 80%;

margin: 0 auto;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

display: grid;

grid-template-columns: 1fr repeat(3, auto) 1fr;

}

.wrapper>div:not(.line) {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

.wrapper > div:first-of-type,

.line + div {

grid-column: 2;

}

.line {

grid-column: 1 / -1;

height: 1px;

background: black;

}

11111112223333333333444455555555599999999999

答案 1 :(得分：1)

這是一個響應式解決方案，它可以處理variable個項目，并且無需添加愚蠢的硬編碼div。基本上每個項目下面都有一行，復雜的部分是確定最后一行中不能有一行的項目。該示例使用flex-box(和LESS)，但是此處不相關，它也適用于grid。

.grid {

display: flex;

}

.grid-item{

position: relative;

.one-col{

flex-basis: 100%/1;

&:nth-last-child(1){

&:after{ border-bottom: 0; }

}

}

.two-cols{

flex-basis: 100%/2;

&:nth-last-child(1),

&:nth-last-child(2):nth-child(odd){

&:after{ border-bottom: 0; }

}

}

.three-cols{

flex-basis: 100%/3;

&:nth-last-child(1),

&:nth-last-child(2):nth-child(3n+1),

&:nth-last-child(2):nth-child(3n+2),

&:nth-last-child(3):nth-child(3n+1){

&:after{ border-bottom: 0; }

}

}

.four-cols{

flex-basis: 100%/4;

&:nth-last-child(1),

&:nth-last-child(2):nth-child(4n+1),

&:nth-last-child(2):nth-child(4n+2),

&:nth-last-child(2):nth-child(4n+3),

&:nth-last-child(3):nth-child(4n+1),

&:nth-last-child(3):nth-child(4n+2),

&:nth-last-child(4):nth-child(4n+1){

&:after{ border-bottom: 0; }

}

}

@media screen and (max-width: @screen__sm) {

.grid-item .one-col;

}

@media screen and (min-width: @screen__sm) and (max-width: (@screen__md - 1)) {

.grid-item .two-cols;

}

@media screen and (min-width: @screen__md) and (max-width: (@screen__lg - 1)) {

.grid-item .three-cols;

}

@media screen and (min-width: @screen__lg) {

.grid-item .four-cols;

}

&:after{

content: "";

display: block;

position: absolute;

left: 0;

right: 0;

bottom: 0;

border-bottom: solid 1px black;

}

答案 2 :(得分：1)

我使用nth-of-type并將該行切換為其他類型()取得了一些成功。

我還為行跨越添加了第一和第六列，

而其他項只占據第2-5列。

＆＃13;

＆＃13;

* {

box-sizing: border-box;

}

.outer {

width: 80%;

margin: 0 auto;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

display: grid;

grid-template-columns: 1fr repeat(3, auto) 1fr;

justify-content: center;

}

.wrapper>div {

border: 2px solid #ffa94d;

border-radius: 5px;

background-color: #ffd8a8;

padding: 1em;

color: #d9480f;

}

.wrapper>div:nth-of-type(3n+1) {

grid-column: 2;

}

.line {

grid-column: 1/6;

height: 2px;

border-bottom: 1px solid black;

}＆＃13;

11111112223333333333444455555555566666667777788888888899＆＃13;＆＃13;＆＃13; 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css grid布局增加边框,CSS Grid中每行之后的边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。