CSS Grid border collapse

Question

現在のCSSグリッドの例では、二重の罫線を避けるためにどのように罫線を崩すことができますか？

これは、HTMLテーブルを使用して達成するのは簡単なことです。 display: gridを使用してどうすればよいですか？

.wrapper { 
 
    display: grid; 
 
    grid-template-columns: 50px 50px 50px 50px; 
 
} 
 

 
.wrapper > div { 
 
    padding: 15px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
</div>

Answer 1

：

.wrapper { 
 
    display: inline-grid; 
 
    grid-template-columns: 50px 50px 50px 50px; 
 
    border-bottom: 1px solid black; 
 
    border-left: 1px solid black; 
 
} 
 

 
.wrapper > div { 
 
    padding: 15px; 
 
    text-align: center; 
 
    border-top: 1px solid black; 
 
    border-right: 1px solid black; 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
</div>

Answer 2

.wrapper { 
 
    display: grid; 
 
    grid-template-columns: 50px 50px 50px 50px; 
 
} 
 

 
.wrapper > div { 
 
    padding: 15px; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    margin:0 -1px -1px 0; 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
</div>

margin:0 -1px -1px 0; 

これはトリックを行う必要があります。

あなたはこのように行うことが

Answer 3

代わりのグリッド項目間の境界線を使用して、コンテナとgrid-gap財産上の背景色を使用します。

.wrapper { 
 
    display: inline-grid; 
 
    grid-template-columns: 50px 50px 50px 50px; 
 
    border: 1px solid black; 
 
    grid-gap: 1px; 
 
    background-color: black; 
 
} 
 

 
.wrapper > div { 
 
    background-color: white; 
 
    padding: 15px; 
 
    text-align: center; 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
</div>

Answer 4

はハックのこの

.wrapper { 
 
    display: inline-grid; 
 
    grid-template-columns: 50px 50px 50px 50px; 
 
    grid-gap: 1px; 
 
    background-color: #000; 
 
    border: 1px solid #000; 
 
} 
 

 
.wrapper > div { 
 
    padding: 15px; 
 
    text-align: center; 
 
    background-color: #fff; 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
</div>