时间戳

首页 > 解决方案 > 文本末尾的网格模板列

css - 文本末尾的网格模板列

问题描述

我有看起来像这样的网格：在此处输入图像描述

与CSS：

display: grid;
float: left;
gap: 18px;
grid-template-columns: repeat(2, 1fr);
margin-top: 10px;

有没有办法缩短Text1和Text2 long bla开头之间的距离......？（例如使用网格css而不是matgin：-12px）它们之间的距离似乎是Text2 long bla的宽度......（这是最长的元素）？

谢谢你！

标签： csscss-grid

解决方案

使用repeat(2, 1fr)会将容器分成2 等份。所以如果你想降低它们之间的距离，你应该改变你的容器的宽度。

.firstContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 300px;
  border: 1px solid red;
}

.secondContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 200px;
  border: 1px solid green;
}
<section class="firstContainer">
    <span>Hello</span>
    <span>, World!</span>
</section>

<section class="secondContainer">
    <span>Hello</span>
    <span>, World!</span>
</section>

推荐阅读