防止CSS Grid中的双重边框 [英] Preventing double borders in CSS Grid

问题描述

给定当前的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 = 包装 > < 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>

解决方案

您可以这样做：

falsedata-console =truedata-babel =false>

.wrapper {display：inline-grid; grid-template-columns：50px 50px 50px 50px; border-bottom：1px纯黑色; border-left：1px solid black;}。wrapper> div {padding：15px; text-align：center; border-top：1px纯黑色; border-right：1px solid black;}

< div类= 包装 > < 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>

Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ?

This is such a simple thing to achieve using an Html table. How do I do it using 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>

解决方案

You may do like this :

.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>

这篇关于防止CSS Grid中的双重边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！