Short version: We have plans to work in this direction and this page will get updated once it gets done. If you haven't already, click the Follow button to get notifications for status changes.

Long version:

At the moment, the grid has a Height property that can take pixel values only. We are considering improving the approach to setting sizes across the board and once it is decided upon, we will release it. Perhaps we will simply change the Height and Width properties to string so you can put any valid CSS dimension there, for example "100%" or "50vw" and so on.

I must note that 100% height is something that is quite tricky for a grid and next to impossible without JS code that will re-calculate dimensions. The main reason for that is that there are several horizontal elements that create a grid - column headers, filter row, footer/pager, in addition to the data rows. The 100% height works in such a way that you can't really have siblings that fill up to 100% height with CSS, you need to calculate their dimensions separately and set them with JS so they add up to the desired height. Since this is not really a good practice in Blazor, it is still to be determined how and even if such a thing can work out.

For the time being, you can try a CSS override like the snippet below. Considering the paragraph above, however, if there are many data rows, the grid will probably stretch to accommodate them, it does not have a constraint in this regard once the default pixel height is removed. Once a container with size in px is encountered, things are likely to work out better, though - hence the .container with explicit height below. If that .container is also set to have a height in percentage, however, the layout is determined by elements further up the DOM and their rules and things can get messy.

On the approach to have the rows determine the height, you can try something like this: