If there are just 2-3 rows Vaadin Grid displays an empty space below the last one for some reason (I always wondered why it's so). In Vaadin 8 I solved this problem in the following way:
grid.setHeightByRows(size <= 12 ? size : 12);
So, if there are not so many rows grid has a smaller size without unnecessary empty space below, but if the number of rows is more than 12 it limits its height by 12 and displays a vertical scroll bar.
Could you please advise how can I implement it in Vaadin 24? There is a grid.setAllRowsVisible(true) method, but it doesn't act in the same way. First of all, it loads all elements at once which is not necessary, and also it doesn't allow limiting the maximum height in rows (I can set the height in pixels, but the counting of pixels is not fun).
Because the V10+ Grid does not have a fixed row height like the V8 version had (i.e. each row can be a different height now), there is no way to set the Grid's height to a certain number of rows. In fact, in 24.0 allRowsVisible mode does not work well with a max-height at all, but this will be fixed in 24.1, when this bugfix ships https://github.com/vaadin/web-components/pull/5429.
Once you're on 24.1, you can set a max-height that will limit the Grid to that height (and make it smaller if there are fewer rows). The default min-height of rows is --lumo-size-m, so you might be able to achieve what you want with something like
vaadin-grid {
max-height: calc(5 * var(--lumo-size-m));
}
where 5 is the number of rows.