I'm trying to make the 250px number inside the minmax function dynamic inside a styled component.
Normally I could just use something like this:
minmax(${props => props.minWidth}, 1fr)
But this breaks instantly and won't even render because it's invalid syntax.
This is my code right now without it being dynamic. Any ideas much appreciated :)
const GridContainer = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: auto;
grid-gap: 20px;
width: 100%;
`;
You need to use template literals.
Below is the code with the correct use of props in the styled component.
const GridContainer = styled.div`
display: grid;
grid-template-columns: ${(p) => `repeat(auto-fit, minmax(${p.minWidth}, 1fr))`};
grid-auto-rows: auto;
grid-gap: 20px;
width: 100%;
`;
With default minWidth.
const GridContainer = styled.div`
display: grid;
grid-template-columns: ${(p) => `repeat(auto-fit, minmax(${p.minWidth || '250px'}, 1fr))`};
grid-auto-rows: auto;
grid-gap: 20px;
width: 100%;
`;