Stuck on getting items to grid wrap.
Trying t o get my input and button be 100% container width at certain widths, then be side by side with the input being the majority of the width. I been tring different template columns with minmax and autofits but cant get them do both.
I gave the input a max width, and was thinking once that max width was met the button move from the second line to the same line.
8 Replies
Do you have a code pen or something like that?
However, you're probably looking for a @container query here.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
https://codepen.io/bsups/pen/MWLOWVN
im trying to do it without media queries
Just out of curiousity, why is that a requirement?
its not, just trying to learn how to use grid in more responsive ways
What you're trying to achieve might be easier with
display: flex.okay
Something along the lines of this:
https://codepen.io/ConfusedHorse/pen/XWOzWoX
(hover to apply ma max width)
thank you