What's the best way to define variable rows' height in CSS Grid

Dear All,

I’ve a design with different row heights, please explain what’s the best way to handle this situation

1.1 grid-template-rows: 200px 100px 150px;

1.2 grid-template-rows: minmax( 100px, 200px );

or some other solution is better ?

you could try using ‘fr’ units for more ‘responsiveness’ if you’d like, perhaps a better approach would be go through this article from mdn and decide for yourself what suits your needs for this situation

n.b. you’ll find plenty of other grid related articles that might be useful as well, happy reading :slight_smile:

1 Like