我很抱歉，如果这是简单的东西，如果有任何问题，我的问题-我是非常新的HTML/CSS沿着协作工具，如这个网站。
我知道这些不是传统的HTML表，但这些是我能够最好地工作的。基本上，我有几个表，都有相同数量的列，但不同数量的行。这导致他们在我的页面上有大量的死空间-例如下面的例子。希望图片能解释得更好。
下面是一个HTML和CSS的例子：
HTML：
<section class="table">
<div class="goaltable_title"><h2>Goal Table Category</h2></div>
<div class="goaltable_header">
<div class="check_header"><p>Completed:</p></div>
<div class="objective_header"><p>Objective:</p></div>
<div class="view_header">Additional Information:</div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 1</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 2</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 3</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 4</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 5</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 6</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 7</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 8</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 9</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 10</div>
<div class="view"><button>View</button></div>
</div>
</section>
<section class="table">
<div class="goaltable_title"><h2>Goal Table Category</h2></div>
<div class="goaltable_header">
<div class="check_header"><p>Completed:</p></div>
<div class="objective_header"><p>Objective:</p></div>
<div class="view_header">Additional Information:</div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 1</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 2</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 3</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 4</div>
<div class="view"><button>View</button></div>
</div>
</section>
<section class="table">
<div class="goaltable_title"><h2>Goal Table Category</h2></div>
<div class="goaltable_header">
<div class="check_header"><p>Completed:</p></div>
<div class="objective_header"><p>Objective:</p></div>
<div class="view_header">Additional Information:</div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 1</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 2</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 3</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 4</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 5</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 6</div>
<div class="view"><button>View</button></div>
</div>
</section>
<section class="table">
<div class="goaltable_title"><h2>Goal Table Category</h2></div>
<div class="goaltable_header">
<div class="check_header"><p>Completed:</p></div>
<div class="objective_header"><p>Objective:</p></div>
<div class="view_header">Additional Information:</div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 1</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 2</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 3</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 4</div>
<div class="view"><button>View</button></div>
</div>
</section>
<section class="table">
<div class="goaltable_title"><h2>Goal Table Category</h2></div>
<div class="goaltable_header">
<div class="check_header"><p>Completed:</p></div>
<div class="objective_header"><p>Objective:</p></div>
<div class="view_header">Additional Information:</div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 1</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 2</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 3</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 4</div>
<div class="view"><button>View</button></div>
</div>
</section>
<section class="table">
<div class="goaltable_title"><h2>Goal Table Category</h2></div>
<div class="goaltable_header">
<div class="check_header"><p>Completed:</p></div>
<div class="objective_header"><p>Objective:</p></div>
<div class="view_header">Additional Information:</div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 1</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 2</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 3</div>
<div class="view"><button>View</button></div>
</div>
<div class="row">
<div class="check"><input type="checkbox"></div>
<div class="objective">row 4</div>
<div class="view"><button>View</button></div>
</div>
</section>CSS：
body {
padding: 0px;
margin: 0;
}
main {
padding: 0px;
margin: 0 auto;
display: grid;
grid-template-columns: auto auto auto;
grid-auto-rows: 0fr;
align-content: start;
justify-content: space-evenly;
flex-wrap: wrap;
}
.table {
display: inline-block;
width: 30rem;
padding: 0px;
margin: 1.5%;
height: fit-content;
}期望/期望：Desired / Expected
实际值：Actual:
我没有线索去这一点-基本上我只是想任何表，我在我的部分，以利用所有的自由空间以上和以下。表的顺序并不重要，我还计划拥有十几个不同行（相同列）的表。
任何帮助是赞赏！
2条答案
按热度按时间rjjhvcjd1#
这被称为砌体布局，您可以在此处了解有关如何构建它的更多信息：CSS-only masonry layout
nfeuvbwi2#
由于你的“表格”都有相同的宽度，你可以看看CSS的列数，而不是网格（直到砖石沿着，这对你的要求来说有点太固定了）。
这个代码片段有7个“表”，将列计数设置为3，并在每个“表”上放置一个
break-inside: avoid，这样它就不会被拆分到下一列。