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

Question

我正在学习 Web 开发，我想创建这样的布局：我最近了解了网格，我认为这将是执行此设计的最有效方式。我有很多不同大小的图像，并希望将它们全部放在一个网格中，并将文本块放在它们的一侧，并与每个图像相关的小写。

几天来我一直在浏览 W3School 文档，但我仍然没有找到获得我想要的效果的方法。

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

提前致谢！

标签： htmlcsscss-grid

Answer 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>