I'd like to use calc() to make the height of an element dependent on the screen size, but since I'm conforming to a baseline grid, this height should always be a multiple of my defined $baseline.
I can see that the mod operator is no longer widely supported (Using modulus in css calc function).
Is there a different way of achieving a fluid height for my element without setting multiple height breakpoints?
bootstrap uses multiple breakpoints as it gives the least headache.
using calc requires two render loops hence its not recommended to use on core page styles such as the layout of the page.
you can combine both media queries and percentage to achieve your desired behavior.
give a % to the height, so it resized with the screen, also give a max-height property on each screen breakpoint to serve as a replacement to your mods.
personally i recommend breakpoints. I made a flex layout mini-library and the best layout architecture for me was the following:
/**
* ||||||||∞ layout-lg-direction
* ||||||||||||||||||∞ layout-md-direction
* |||||||||||||||||||||||||||||∞ layout-sm-direction
* ||||||||||||||||||||||||||||||||||||||||∞ layout-xs-direction
* ||||||||||||||||||||||||||||||||||||||||||||||||||∞ layout-direction
* |---------|----------|----------|---------|--------
* 0px 480px 768px 940px 1200px ∞px
*
*///direction: row, column
this is the opposite of bootstrap, doesnt go mobile first in coding BUT its mobile optimized more than bootstrap as it reduces media queries needed on mobile.
on a sidenote, you can also use @if $i % $breakpoint == 0 or something similar in your breakpoints, combined with % on height, you will achieve the same behavior.
