如何在 html 中制作 2 列网格

Question

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

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

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

提前致谢！

Answer 1

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

然后只要你想要的 style.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>