Aalok Posted November 13, 2019 Share Posted November 13, 2019 I am creating a custom code section on my home page and want to use css-grid to style it. Everything works fine except when I try to use the minmax function with fr units. This is a common way of having elements stretch evenly across a container but then stack when the window is resized and the min width (250) is reached. However this isn't working for me in Squarespace. Any thoughts on why? I'm using Chrome, so fr units and css-grid is compatible. grid-template-columns: reapeat(auto-fit, minmax(250px, 1fr); This seems to work, but it's obviously not what I want: grid-template-columns: reapeat(auto-fit, minmax(250px, 300px); Here is my full code: <div class="home-services-container"> <div class="service-card service1"> <h3> Creative<br /> Engagement </h3> </div> <div class="service-card service2"> <h3> Ideation + <br />Innovation </h3> </div> <div class="service-card service3"> <h3> Career <br/> Coaching </h3> </div> </div> CSS: .home-services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 16px; } .service-card { display: flex; flex-direction: column; justify-content: flex-end; color: #401025; height: 200px; width: 1fr; padding: 32px; border-radius: 8px; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1); background-repeat: no-repeat; background-position: -150px -80px } Link to comment
Grant05 Posted March 26, 2020 Share Posted March 26, 2020 Sorry I dont have the answer, but just wanted to notify that I'm getting the same problem. If you inspect the elements on your chrome browser for whatever reason the css changes from ` grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); to grid-template-columns: repeat(auto-fit, minmax(250px, 1 fr); there's a space between the 1 and fr in 1fr...NO IDEA WHY THIS HAPPENS and it only seems to happen when using the repeat function. ColineDoe 1 Link to comment
ColineDoe Posted April 15, 2020 Share Posted April 15, 2020 I also had the exact same issue! Link to comment
AmyGoodchild Posted August 15, 2020 Share Posted August 15, 2020 Having this exact same issue. It's changing the custom css from 1fr to 1 fr and that stops it working. Did anyone find a solution? Link to comment
Solution _Gavin Posted August 21, 2020 Solution Share Posted August 21, 2020 Try this: grid-template-columns: reapeat(auto-fit, minmax(~"250px, 1fr"); Link to comment
Aalok Posted April 24, 2021 Author Share Posted April 24, 2021 On 8/21/2020 at 9:34 AM, _Gavin said: Try this: grid-template-columns: reapeat(auto-fit, minmax(~"250px, 1fr"); Thanks @_Gavin! I think that worked! Strange. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment