LcsGa
Explore posts from serversKPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
Hey! Thank you for your answer! This is exactly what I was looking for => Are there come techniques I don't know with grids that would be "better"/"easier" than playing with selectors/paddings! => not atm (maybe never, and it's 100% okay)! 😄
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
Nobody has an idea? @Kevin it is inspired of one of your videos, maybe you have some answers/hints for me?
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
For examle, if I want to space the p from the image, I need to add a margin-top to it instead of "simply" adding a gap on the card (wich is something I could "easily" do in my stackblitz example)
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
I could also do this, overriding the
grid-template-rows, but it feels a little less flexible that with the padding-block16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
(Also if you want to see a more concrete use case of what I'm trying to improve, you can take a look at this little technical test I made and partly implemented. To deal with the top/bottom gutters, I currently have block paddings and I override them if needed, but I feel like I could do something better!)
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
(In the end, I'm trying to find the limits of grids 😅 If I must go with a wrapper there is no problem at all 😜)
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
I could of course make it work by removing the
repeat function, with always 3 rows, just like for the columns, then always have the content within a wrapper where I would have all of the control I'd like to, but I'd like to avoid that if there is a way to achieve the same thing without it16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
As you can see, I don't have any named columns, and the rows, doesn't work as I expect them to, at all (no gutter at all)
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
I made a codepen with the code shown in my screenshots https://codepen.io/lcsga/pen/dyBOqGg?editors=1100
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
The thing is that I would like the same behavior with the rows BUT the difference here is that I would have a first and the last rows being some spaces, and I'd like the content to, by default, be within it
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
As you can see, I'd like to be able to add a grid-like gutter to avoid needing to wrap the contents that should be spaced from the edges to be wraped within divs with paddings. Like that, everything would, by default, be on the
content column but if I want to make some elements taking 100% of the card, I would then put them on the card column.16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/28/2024 in #front-end
grid-template-rows with named columns for advanced/flexible/automatic layouts
16 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/22/2024 in #front-end
"Auto filled" grid not working as expected with subgrids
Thanks to both of you for your help 😄 I'm marking this issue as solved!
19 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/22/2024 in #front-end
"Auto filled" grid not working as expected with subgrids
how could the cards wrap when I specified that the
grid-row-start IS 1.... in my example, if I want the second one to wrap under the first one, then its row-start has to be 4... 😅 That's why I need span 4...19 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/22/2024 in #front-end
"Auto filled" grid not working as expected with subgrids
I just realized what was my issue 😅
19 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/22/2024 in #front-end
"Auto filled" grid not working as expected with subgrids
...
19 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/22/2024 in #front-end
"Auto filled" grid not working as expected with subgrids
I don't know if it is an expected behavior of if that's an issue
19 replies
KPCKevin Powell - Community
•Created by LcsGa on 7/22/2024 in #front-end
"Auto filled" grid not working as expected with subgrids
But that still feels weird
19 replies