防止CSS网格中出现双重边框

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

您可能会这样：

.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;
}
body {
 background:pink;
}
<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>

另一个想法是依靠渐变来填补空白，如下所示：

.wrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-gap:1px;
  background:
    linear-gradient(#000,#000) center/100% 1px no-repeat,
    repeating-linear-gradient(to right,
        transparent ,transparent 50px,
        #000 50px,#000 51px);
  border:1px solid;
}
.wrapper > div {
  padding: 15px;
  text-align: center;
}
body {
 background:pink;
}
<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>

您还可以调整初始解决方案以使其更加灵活，并且可以在一行中处理任意数量的项目。

在整个页面上运行以下代码并调整窗口大小：

.wrapper {
  display: grid;
  max-width:800px;
  grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.wrapper > div {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}
body {
 background:pink;
}
<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>9</div>
  <div>10</div>
  <div>11</div>
</div>

以上是 防止CSS网格中出现双重边框 的全部内容， 来源链接： utcz.com/qa/412196.html

回到顶部