如何让 2 列网格在 html 中工作？

【问题标题】：How do I get a 2 column grid working in html?如何让 2 列网格在 html 中工作？
【发布时间】：2021-05-26 05:21:02
【问题描述】：

我正在学习 Web 开发，我想创建这样的布局：我最近了解了网格，我认为这将是执行此设计的最有效方法。我有很多不同尺寸的图片，我想把它们都放在一个网格中，并在它们的一侧放置一些文本块，并附上与每张图片相关的小文字。

我已经浏览了几天的 W3School 文档，但仍然没有找到获得我想要的效果的方法。

我知道这个问题可能真的很愚蠢，但是我如何让它成为网页的一部分并使其大小都相互一致？（即文本块始终与图像大小完全相同，大小相同）

提前致谢！

【问题讨论】：

标签： html css css-grid

【解决方案1】：

这样的事情应该可以做到。让容器带有显示网格，然后是 grid-template-columns: auto auto 几乎只是说给我 2 个偶数列，添加的自动越多，得到的列间距越均匀。

然后，您可以随意设置 .grid-item 样式

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}
.grid-item {
 height: //Whatever you want them to be
}

<div class="grid-container">
 <div class="grid-item"> Test</div>
 <div class="grid-item">test2</div>
 <div class="grid-item">test3</div>
 <div class="grid-item">test4</div>
 <div class="grid-item">test5</div>
 <div class="grid-item">test6</div>
 <div class="grid-item">test7</div>
 <div class="grid-item">test8</div>
</div>

【讨论】：