css 网格布局内的边框

b1uwtaje 于 2023-04-13 发布在其他

关注(0)|答案(7)|浏览(221)

我有一个CSS网格来表示井字游戏。我只想在网格内部放置一个边框。今天，我将这样做：

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
}

.child {
  display: flex;
  align-items: center;
  align-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
}

.child:nth-child(1),
.child:nth-child(2),
.child:nth-child(3) {
  border-bottom: var(--border);
}

.child:nth-child(7),
.child:nth-child(8),
.child:nth-child(9) {
  border-top: var(--border);
}

.child:nth-child(1),
.child:nth-child(4),
.child:nth-child(7) {
  border-right: var(--border);
}

.child:nth-child(3),
.child:nth-child(6),
.child:nth-child(9) {
  border-left: var(--border);
}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

结果：

这个解决方案工作，但我觉得它没有吸引力。你有一个想法重构这个解决方案？

css

来源：https://stackoverflow.com/questions/49554727/border-inside-grid-layout

7条答案

按热度按时间

tuwxkamq1#

既然你想要一个风格化的边框（在本例中是虚线），那么你的方法和其他答案中采用的方法似乎是有用的。
但是，如果您决定使用简单的实线边框，那么方法可以简化。只需使用网格的背景色作为边框颜色，并使用grid-gap属性作为边框宽度。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background-color: black;
  grid-gap: 1px;
  height: 100vh;
}

.child {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF7F5B;
  font-size: 2.5rem;
}

body { margin: 0;}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">X</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">O</div>
  <div class="child"></div>
</div>

赞(0）回复(0）举报 2023-04-13

vyswwuz22#

有一件事，你可以像下面这样更好地使用nth-child选择器，而不是一个接一个地定位。

.child:nth-child(-n+3) {
  border-bottom: var(--border);
}

.child:nth-child(3n+1) {
  border-right: var(--border);
}

.child:nth-child(3n) {
  border-left: var(--border);
}

.child:nth-child(n+7) {
  border-top: var(--border);
}

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
}

.child {
  display: flex;
  align-items: center;
  align-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
}

.child:nth-child(-n+3) {
  border-bottom: var(--border);
}

.child:nth-child(3n+1) {
  border-right: var(--border);
}

.child:nth-child(3n) {
  border-left: var(--border);
}

.child:nth-child(n+7) {
  border-top: var(--border);
}

<div class="grid">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

赞(0）回复(0）举报 2023-04-13

cuxqih213#

您可以考虑此解决方案。
您可以使用grid-template-columns来实现这一点。

创建一个父容器来保存你的四个图像。
设置一个背景颜色（希望的边框颜色）。
将填充设置为0
然后按grid-template-column排列图像：汽车

汽车;

然后将gap添加到grid-gap：10 px;（以网格形式显示容器的背景颜色）。
请参阅下面的代码以供参考 *

.container {
  width: 200px;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;

  background-color: #000;
  padding: 0;
}
.container > div {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

超文本标记语言

<div class="container">
      <div>Image here</div>
      <div>Image Here</div>
      <div>Image here</div>
      <div>Image here</div>
    </div>

为了帮助你形象化，我创建了一个示例代码
http://plnkr.co/edit/gIeumXLt0k3FPVCgGlDd?p=preview
希望能帮上忙
干杯！

赞(0）回复(0）举报 2023-04-13

sq1bmfud4#

您可以从this answer减少nth-child选择器的数量。

body {
  margin: 0;
}

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
}

.child:not(:nth-child(3n)) {
  border-right: var(--border);
}

.child:not(:nth-last-child(-n + 3)) {
  border-bottom: var(--border);
}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">x</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child">o</div>
  <div class="child"></div>
</div>

赞(0）回复(0）举报 2023-04-13

cedebl8k5#

尝试在.child类中使用负边距，此处overflow:hidden在父.grid类中...此处无需使用nth-child选择器...

:root {
  --border: 2px dashed #393939;
  --symbol-color: #FF7F5B;
}

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, calc(100%/3));
  grid-template-rows: repeat(3, calc(100%/3));
  overflow: hidden;
}

.child {
  height: 100px;
  display: flex;
  align-items: center;
  align-content: center;
  color: var(--symbol-color);
  font-size: 2.5rem;
  border-bottom: var(--border);
  border-left: var(--border);
  margin-left: -2px;
  margin-bottom: -2px;
}

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

赞(0）回复(0）举报 2023-04-13

of1yzvn46#

使用background和linear-gradient：

body {
  margin: 0;
}

.grid {
  --b: #393939 0px, #393939 5px, transparent 5px, transparent 8px;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
  grid-auto-rows:calc(100% / 3);
  background: 
    repeating-linear-gradient(to right ,var(--b)) 0   calc(100% / 3), 
    repeating-linear-gradient(to bottom,var(--b)) calc(2 * (100% / 3)) 0, 
    repeating-linear-gradient(to right ,var(--b)) 0 calc(2 * (100% / 3)), 
    repeating-linear-gradient(to bottom,var(--b)) calc(100% / 3) 0;
  background-size:100% 2px,2px 100%;
  background-repeat: no-repeat;
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
  <div class="child">D</div>
  <div class="child">E</div>
  <div class="child">F</div>
  <div class="child">G</div>
  <div class="child">H</div>
  <div class="child">I</div>
</div>

赞(0）回复(0）举报 2023-04-13

lyfkaqu17#

我有点晚了这个问题，但有一个解决方案.每个孩子必须有border-right和border-bottom设置.父div在边缘边界上有伪，以模仿删除.它只适用于如果你在一个普通的背景色使用这个.
在我的例子中，背景是白色的。

<div class="grid">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
  <div class="child">D</div>
  <div class="child">E</div>
  <div class="child">F</div>
  <div class="child">G</div>
  <div class="child">H</div>
  <div class="child">I</div>
</div>

CSS：

.grid{ display: flex; flex-wrap: wrap; position: relative; }
.grid:before{ border-right: 1px solid #fff; content: ''; display: block; right: 0; top: 0; bottom: 0; position: absolute; }
.grid:after{ border-bottom: 1px solid #fff; content: ''; display: block; left: 0; right: 0; bottom: 0; position: absolute;  }
.child{ border: 1px solid #000; border-width: 0 1px 1px 0; }

赞(0）回复(0）举报 2023-04-13

我来回答

css 网格布局内的边框

7条答案

相关问题

热门标签

最新问答