html - 使用网格的问题 - 居中文本和使用间隙

Question

我正在学习在网站中使用网格并且有几个问题：

我无法在网格项目中居中文本；

如果我试图在列之间有一个间隙，它只会插入最后两列之间。

它们是否可能是由于相同的错误？我尝试了 margin-auto 和各种 align 和 justify 设置，但没有任何帮助。

.wrapper1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    grid-auto-rows: minmax(20px, auto);
}

.wrapper1 a {
    color: white;
}

.one {
    grid-column: 1 / 2;
    grid-row: 1;
    background-color: red;
}

.two {
    grid-column: 2 / 2;
    grid-row: 1;
    background-color: red;
}

<div class="wrapper1">
    <div class="one"><a href="/chart/world-vaccinations-map">World Vaccinations</a></div>
    <div class="two"><a href="/chart/world-capita-new-cases-map">World Cases</a></div>
</div>

标签： htmlcsscss-grid

Answer 1

它工作正常：尝试下面的代码，已经做了基本的添加。基本上你只有 2 列由grid-template-columns: repeat(2 ,minmax(0, 1fr));. 简单地用于text-align:centergrid-container .wrapper-1。让所有工作按预期休息！！！

更新：对于使用 CSS-Grids 的代码片段下方的任意数量的相等大小的列：

a{
  text-decoration:none;
  color:#fff;
}
.wrapper1{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}

.wrapper1 div{
  background:red;
  text-align:center;
}

<div class="wrapper1">
<div class="one"><a href="/one">One</a></div>

<div class="two"><a href="/two">Two</a></div>

<div class="three"><a href="/three">Three</a></div>

<div class="four"><a href="/four">Four</a></div>

<div class="five"><a href="five">Five</a></div>

<div class="six"><a href="six">Six</a></div>

</div>