good fix! i personally use flex flex-col and min-h-screen on the parent, and apply flex-1 to the main child to let it expand. effectively the same thing though lol
Yes very similar indeed! Only “downside” is that you need to add styles to children too instead of only the parent. Makes it that this logic is split over multiple elements. But yeah, nothing wrong with it and very similar approach 😁
@@frontendfyi I agree. I have been using flex also before I watched this and I think this is a better solution since the parent controls everything and it is much clearer. Imagine your child component gets imported than the style will have to be in another file.
I prefer the grid method because the control is central. For personal projects I always go with it. Grid can require more maintenance though. For example a site with third party widgets that you can't control injection points for - the main el might not always be the second row. I've found the flex method to require less maintenance in these cases
It’s a thing I’m constantly struggling with. I see upsides and downsides to both and I haven’t made a final decision yet. Did a poll on the channel recently and the majority voted for tailwind. Love to hear opinions though, so feel free to share more of your thoughts! This is also why I tried to show the css equivalent for every step.
@frontendfyi I think vanilla css makes it easier to understand the underlying concept. Those that want to use a library will still be able to apply it. As someone who's used bootstrap and tailwind in the past I think vanilla css is getting better and better over time to the point where I'm not sure I'd choose a library for a new project unless I just wanted some decent default styling to start with
If you understand HTML/CSS then you can adopt it to the framework you like. If you explain it in Tailwind I skip that video because I don't use that framework and don't want to find out what the things are actually doing or how it is working.
It’s about the concept that anyone who understands CSS can grasp this clip without needing to know Tailwind at all. However, some viewers start complaining as soon as they see the word "Tailwind." Maybe using pure CSS might be better.
it can be done with flex, such as using display:flex;flex-direction:column; and then applying flex: 0 0 auto to header and footer. and applying flex:auto; to main.
Me trying to find solution for a similar problem. Opened UA-cam first. Got this suggested. Hmm. Not even searched the issue anywhere yet. Looks like phone has moved on from listening to mind reading
I also hate Tailwind but since Tailwind is just a means of applying CSS, you can still grok the actual CSS rules to apply. Also, he mentions what the actual rules are at the end. Display grid, min height 100dvh, grid template rows auto 1fr auto.
@danielwilkowski5899 I get what you’re saying. With “only” in this case I mean: the only way I think you should do it. But that would make the title way too long.
Great fix! I fixed mine by using this code in that wrapper div: I am gonna test to see if the two options behave the same way. Oh and of course header is 'fixed' and footer is 'sticky' in my case :)
The result will be fairly similar! Main benefit to grid as soon as you have more than 2 elements is that you only need to set styles (grid rows) on the parent element rather than multiple elements. But that’s literally the only “benefit” I can think of 😁
Very useful, and well explained with the grid fragment expanding. Sticky header with top is a bonus. I put -top-24 to only hide a portion of my header when scrolling
That's my chosen approach 👍 although I try and use body directly. If there's injected code, even if I wrap things, they would break the design, and maybe the footer won't be the last item at the bottom anyway.
Thank you so much! You have no idea the messy workaround I used 😅. The frontend will never be my friend but as I look for independence I need to learn catch-up. Tailwind is great help
Nice tutorial. I personally prefer having a main contain with `min-h-dvh` and using flex to grow the main content container and take priority in height. This way the footer is aligned to the bottom, and any extra height required by the main content is properly accounted for. Has always worked like a charm.
I would love to hear though what you don’t like about the few lines of tailwind I add, since I explain every css property you need. I think you will still gain the same knowledge. Would love to hear why you decide to skip. Thanks!
@@frontendfyi i guess because obviously not everyone is using or prefers using tailwind. You will reach a far bigger audience when showing and teaching things in plain css
OK - I'm a 40 year dev, who has finally embraced the front end by building an angular SPA (live with customers for 4 years without me knowing any of the CSS magic that make it look cool other than copy/paste examples) - so now I'm forcing myself to finally embrace CSS - and loving it...(I don't know what I was so frightneded!!) - I worked with WPF like 20 years ago, so many of the same concepts, but your tips just knock me into another zone.. thanks.
This is so great to hear! Happy that I’m able to help you so much! Thank you so much for sharing this with me. Since you’re just starting out with CSS, I’d like to ask you something I’m doubting a bit about for a while now: Do you think it’s confusing that I’m mainly explaining CSS through Tailwind, even though I try to show the css equivalent and what Tailwind rendered in the end? Do you think the videos would be easier to follow or even more useful to you if I wrote plain css? Thanks!
@@frontendfyi display contents makes elements themselves disappear while keeping its children in the document flow. This allows the child elements to be displayed as if they were direct children. Now you can apply grid rows (auto 1fr auto) to body: nav + main + footer. Also maintain the scrollbar of the main and the basic layout is ready
@biovawan oooh that’s what you mean! Interesting approach yeah. I’m honestly not sure if there would be any downside to it. Plus you gotta make sure you apply it to any element that you want to hide in that case. For example random JavaScript html snippets injected.
i thought i would get a solution to something that really irritates when creating blank layouts for clients.... but it tailwind so im still gonna have to persevere with what im trying to do... i never use frameworks unless a client specifically wants it, but you got yourself a new follower anyway
I tried to show the css equivalents too - that wasn’t helpful for you either? Since, I’ve switched to make new videos with vanilla css by the way. Thanks for commenting!
Highly debating whether I want to stick with that though. I’m aware that it’s an abstraction layer that some people don’t like, and even to quite some can be confusing. Thanks for your honesty.
With open source, as a developer, I can also look into the code and see exactly what is happening, exactly how my personal data is being used. It is being saved to a secure database? Is it being distributed to third party advertisers? I think this is the primary reason people love open source.
Yes this definitely works too! Only reason I prefer grid is so I only have to set styles on a single element rather than on the children too. But yeah, that’s literally the only difference I think 😁
Absolutely the thing that I have been dealing with why h-full is not working for inner pages inside the layout for my project in Nextjs. Than you 👏🏻🙏🏻 Also, can you share your vscode theme and font name, it looks awesome and cool 😎🎉
have the parent flex and give the footer a margin-top: auto.. Thats all you need. Also, tailwind has min-h-dvh included since a couple of versions now, just so you know!
Misleading TITLE! This IS NOT CSS, it is a framework ( tailwind ) . You don’t mention anywhere you are using tailwind css, This is the worst tutorial I ever saw …
I worked with this aproch for a long time, but I face a problem with it, when I have a table and I want to make it overflow-x-scroll in small devices, I got an overflow in X direction for the entire layout, you can try it to understand what I mean.
@@frontendfyi sticky has some downsides. However, If header is fixed, we can say that it's not really part of the GRID anymore. So [1fr_auto] may help.
A big thumbs down from me. People coming to this video didn't expect the added complication of React and Tailwind - there's no mention of those in the title. I'll stick to Kevin Powell - and everyone else should too.
I love the way people share feedback on the internet 😂 I guess you should try starting your own youtube channel. And yes, Kevin makes great content, people should indeed follow him.
@@frontendfyi displaying the parent of all the content as flex, setting the flex direction to column, and then targeting the footer and setting margin-top to auto. this would scale the best way. changing the layout of the website would be extremely easy this way. think of every time you would want to change something, maybe delete the footer or the header entirely. you would need to change the grid-rows prop (line 5 @5:26) every time the layout changes. this simply does not scale. what if for example the main, for some reason, had some other siblings? you would also need to change the grid-rows prop to match this new markup change. your approach, this approach, is good whenever we're absolutely sure that there are N number of elements inside the root, and that never ever changes. let the layout breathe, display it to flex and let the footer push itself down with margin, just like I said at the beginning. that's the solution I like more. no need to be petty and tell me you "didn't bent over because that would break your back". what a stupid joke. "bending over backwards" means to work very hard to accomplish something. I get the video; you showcase one of the many approaches. this one happens to suck. I created a pen with the approach I described but I think UA-cam deletes comments with links in them ( codepen.io/vladsolomon/pen/ExBjeZy )
lol. Happy to hear you’re a big fan of your own approach though. Was genuinely interested in your solution and happy to have a discussion about it. Making a stupid joke was just to hopefully make stuff a bit less serious and have that healthy discussion. Apparently that didn’t work. No reason for me then to tell you why my solution definitely has my preference here (there is almost never a “best” in web dev). Hoping you have a great weekend and think about how you can have a healthy discussion instead of telling people their approach sucks in the future. Saying stuff like that is too easy on the internet (especially anonymously). It brings you nothing.
@@frontendfyi I agree that there is no best solution. i agree that even my solution is not for all cases. but yours, using grid, work in only one scenario: when the markup does not change. not even one bit. one change in the markup and you have to rewrite the css rule. that, for me, is stupid. no need to go all teary eyed; you asked, I answered, your joke was not good. timing is extremely important. I think the only one that turns this in an unhealthy discussion is you. Hoping you have a great weekend and think about how you can receive actual feedback. Also, the bit about anonimity is borderline stupid. Look at the link I sent. It has both my first and last name. You want me to tell you that this approach sucks nominally? ok, no problem, I, Vlad Solomon, think this approach works in only one case. the benefits are marginal, near zero even, because if the markup changes, the css has to change also, just another exercise in reinviting the wheel.
Thank you for your video. Yet more proof that CSS is unforgivable, unworkable garbage. Go read a real GUI API like Quickdraw from 1984. seriusly, the craft was farther advanced in 1984 than anything you can find in a web browser. Frightening.
It almost sounds like you’ve been bitten once too often with CSS, haha. I can fully imagine that CSS can absolutely feel as that unforgiving language when you try to style something. CSS is definitely not an easy language to learn. Your reference to QuickDraw seems to be more in line with for example the Canvas web api. They serve a completely different purpose than what CSS is trying to achieve.
good fix! i personally use flex flex-col and min-h-screen on the parent, and apply flex-1 to the main child to let it expand. effectively the same thing though lol
I use justify-between, so it pushes the footer at bottom. is it correct 😅
Yes very similar indeed! Only “downside” is that you need to add styles to children too instead of only the parent. Makes it that this logic is split over multiple elements. But yeah, nothing wrong with it and very similar approach 😁
@@frontendfyi I agree. I have been using flex also before I watched this and I think this is a better solution since the parent controls everything and it is much clearer. Imagine your child component gets imported than the style will have to be in another file.
I prefer the grid method because the control is central. For personal projects I always go with it.
Grid can require more maintenance though. For example a site with third party widgets that you can't control injection points for - the main el might not always be the second row. I've found the flex method to require less maintenance in these cases
+1 this
Please write Tailwind in the video title instead of CSS.
Why not use plain HTML/CSS to explain HTML /CSS?
It’s a thing I’m constantly struggling with. I see upsides and downsides to both and I haven’t made a final decision yet. Did a poll on the channel recently and the majority voted for tailwind. Love to hear opinions though, so feel free to share more of your thoughts!
This is also why I tried to show the css equivalent for every step.
@@frontendfyiIt’s more like 3 lines of Tailwind markup than 3 lines of CSS.
@frontendfyi I think vanilla css makes it easier to understand the underlying concept. Those that want to use a library will still be able to apply it. As someone who's used bootstrap and tailwind in the past I think vanilla css is getting better and better over time to the point where I'm not sure I'd choose a library for a new project unless I just wanted some decent default styling to start with
If you understand HTML/CSS then you can adopt it to the framework you like. If you explain it in Tailwind I skip that video because I don't use that framework and don't want to find out what the things are actually doing or how it is working.
It’s about the concept that anyone who understands CSS can grasp this clip without needing to know Tailwind at all. However, some viewers start complaining as soon as they see the word "Tailwind." Maybe using pure CSS might be better.
it can be done with flex, such as using display:flex;flex-direction:column; and then applying flex: 0 0 auto to header and footer. and applying flex:auto; to main.
I would do flex grow to main
Worth noting that you still have to set min-height to 100dvh for this to work.
Your videos are best by far. Please post more of a cool CSS, Js stuff. Greetings from Cyprus!
Thank you so much! Glad you like the videos, an appreciate you commenting ❤️
Me trying to find solution for a similar problem. Opened UA-cam first. Got this suggested. Hmm. Not even searched the issue anywhere yet. Looks like phone has moved on from listening to mind reading
Hahaha this is great! Hope the video was indeed useful to you!
The same situation😅
I stopped watching the video because "in just 3 lines of CSS" turns to be so many inline of Tailwind
Or you just skip to the summary chapter and see that it's indeed just 3 lines you have to add 😉
🥱
I also hate Tailwind but since Tailwind is just a means of applying CSS, you can still grok the actual CSS rules to apply. Also, he mentions what the actual rules are at the end. Display grid, min height 100dvh, grid template rows auto 1fr auto.
You also can apply flex and flex col to the parent and margin top auto (mt-auto) on the child footer. So it will push it to the bottom.
This is true!
@@frontendfyi So I guess 100vh and grid template columns isn't the ONLY option like the title says. Perhaps you should change the title?
@danielwilkowski5899 I get what you’re saying. With “only” in this case I mean: the only way I think you should do it. But that would make the title way too long.
@@frontendfyi current title is clickbait
@danielwilkowski5899 okay
Great fix! I fixed mine by using this code in that wrapper div:
I am gonna test to see if the two options behave the same way. Oh and of course header is 'fixed' and footer is 'sticky' in my case :)
The result will be fairly similar! Main benefit to grid as soon as you have more than 2 elements is that you only need to set styles (grid rows) on the parent element rather than multiple elements. But that’s literally the only “benefit” I can think of 😁
Love this... Clean, intuitive, localized. Nice work!
Thank you! Glad you enjoyed it!
Very useful, and well explained with the grid fragment expanding. Sticky header with top is a bonus. I put -top-24 to only hide a portion of my header when scrolling
That's my chosen approach 👍 although I try and use body directly. If there's injected code, even if I wrap things, they would break the design, and maybe the footer won't be the last item at the bottom anyway.
Yeah nothing wrong with using the body indeed! Just need to be aware that things can be injected in the body indeed.
Thank you so much! You have no idea the messy workaround I used 😅. The frontend will never be my friend but as I look for independence I need to learn catch-up. Tailwind is great help
Glad it was helpful for you!
A better alternative to what I am used to, using flex instead of grid
Works like charm. Thank you, Jeroen!
Glad it was helpful!
Nice tutorial. I personally prefer having a main contain with `min-h-dvh` and using flex to grow the main content container and take priority in height. This way the footer is aligned to the bottom, and any extra height required by the main content is properly accounted for. Has always worked like a charm.
Just be upfront about Tailwind in the title next time so i can skip the video.
I would love to hear though what you don’t like about the few lines of tailwind I add, since I explain every css property you need. I think you will still gain the same knowledge. Would love to hear why you decide to skip. Thanks!
@@frontendfyi i guess because obviously not everyone is using or prefers using tailwind.
You will reach a far bigger audience when showing and teaching things in plain css
I think you’re right. My latest video and the one dropping this week will be fully CSS only. Let me know what you think!
Skill issue - just read the CSS when he hovers on the tailwind
skill issue
OK - I'm a 40 year dev, who has finally embraced the front end by building an angular SPA (live with customers for 4 years without me knowing any of the CSS magic that make it look cool other than copy/paste examples) - so now I'm forcing myself to finally embrace CSS - and loving it...(I don't know what I was so frightneded!!) - I worked with WPF like 20 years ago, so many of the same concepts, but your tips just knock me into another zone.. thanks.
This is so great to hear! Happy that I’m able to help you so much! Thank you so much for sharing this with me.
Since you’re just starting out with CSS, I’d like to ask you something I’m doubting a bit about for a while now: Do you think it’s confusing that I’m mainly explaining CSS through Tailwind, even though I try to show the css equivalent and what Tailwind rendered in the end? Do you think the videos would be easier to follow or even more useful to you if I wrote plain css?
Thanks!
What about
#app, script {display: contents}
?
Now the body can be styled as you wish. The less nesting, the less troubles to style
What would this do to push the footer down? Could you explain it a bit more?
@@frontendfyi display contents makes elements themselves disappear while keeping its children in the document flow. This allows the child elements to be displayed as if they were direct children.
Now you can apply grid rows (auto 1fr auto) to body: nav + main + footer.
Also maintain the scrollbar of the main and the basic layout is ready
@biovawan oooh that’s what you mean! Interesting approach yeah. I’m honestly not sure if there would be any downside to it. Plus you gotta make sure you apply it to any element that you want to hide in that case. For example random JavaScript html snippets injected.
display: contents is pretty new and only the latest browser versions have support
i thought i would get a solution to something that really irritates when creating blank layouts for clients.... but it tailwind so im still gonna have to persevere with what im trying to do... i never use frameworks unless a client specifically wants it, but you got yourself a new follower anyway
I tried to show the css equivalents too - that wasn’t helpful for you either?
Since, I’ve switched to make new videos with vanilla css by the way. Thanks for commenting!
I prefer this solution conpared to other ones, it's simple and really understandable!
Nice, glad you like it!
I nearly subscribed but then I realised you're using TailWind
Highly debating whether I want to stick with that though. I’m aware that it’s an abstraction layer that some people don’t like, and even to quite some can be confusing. Thanks for your honesty.
Great fix! thank you 👍
With open source, as a developer, I can also look into the code and see exactly what is happening, exactly how my personal data is being used. It is being saved to a secure database? Is it being distributed to third party advertisers? I think this is the primary reason people love open source.
cool video! can you tell me what font and theme are you using on vscode?
there is a several solution for this, eg flex or calc, but the grid wasn't on my daily solution so is something new - thanks!
There’s definitely more solutions to this indeed! Glad you like this one though!
They have a builtin util for 100dhv already so you can just do min-h-dvh
Oh!! Didn’t see they added this! Thanks for mentioning 🙏
Thanks for the great great video, I'm looking forward to the tailwind course 🤞
Amazing tip as always!
Thank you Didem! Nice to see you in the comments again 😁
@@frontendfyi :D finally I have time for improvement of my skills
This is awesome! Will be using that. BTW, latest tailwind has min-h-dvh, svh and lvh classes :)
Someone else mentioned it too! Didn’t know that yet. Thanks 😁 Also happy you enjoyed the video!
another fix is wrapper div "flex flex-col w-full min-h-dvh" and the middle section just add "flex-1 flex-grow"
Yes this definitely works too! Only reason I prefer grid is so I only have to set styles on a single element rather than on the children too. But yeah, that’s literally the only difference I think 😁
Thank you. That was my pain in the ass for decade!!
It is right!! Glad you got the solution now 😁
Absolutely the thing that I have been dealing with why h-full is not working for inner pages inside the layout for my project in Nextjs. Than you 👏🏻🙏🏻
Also, can you share your vscode theme and font name, it looks awesome and cool 😎🎉
Yes, this solved the problem. With flex-1 on the parent, the children does not know what the height is.
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
Can you share your VS Code Settings? Or at least help with the theme and font name? Really liked your setup and thanks for making these videos
have the parent flex and give the footer a margin-top: auto.. Thats all you need. Also, tailwind has min-h-dvh included since a couple of versions now, just so you know!
This video must be a gift of god, because I was trying to find the best way to do this for the last 5 hours! Thank you so much
I love hearing this! Glad the algorithm decided to show it to you!
hey. can you tell what font family are you using in your vscode
The font is called Recursive Mono Casual Static
@@frontendfyi thank you
Finally the guide i need :) thanks
What would you do if your footer needs to always be visible. For example it’s a tab bar at the bottom and the main content needs to scroll?
If it’s always visible then I think position fixed for the footer makes most sense.
Misleading TITLE! This IS NOT CSS, it is a framework ( tailwind ) . You don’t mention anywhere you are using tailwind css,
This is the worst tutorial I ever saw …
Tailwind is CSS my friend. I even show the css properties to make it even clearer. But thanks for your constructive feedback.
Nice video!! What is the font you use?
Thank you!
The font is called Recursive Mono Casual Static
@@frontendfyi If it's not too much to ask, what vscode theme do you use? I really like your configuration.
Thank you so much!
You're welcome! Glad you enjoyed the video!
Very much looking for the framer motion course ❤
Quite some modules are already released! Did you see that? 😁 www.frontend.fyi/course/framer-motion
Wow that's so amazing, thankyou sir!
Glad you liked it! 😁
06:05 does someone know what font is this?
I worked with this aproch for a long time, but I face a problem with it, when I have a table and I want to make it overflow-x-scroll in small devices, I got an overflow in X direction for the entire layout, you can try it to understand what I mean.
Try adding grid-template-columns: minmax(0, 1fr); too. I think what you’re experiencing is called grid blowout.
@@frontendfyi I was so dump, instead of adding a table inside a div with overflow-x-auto, I give overflow-x-auto directly to the table.
@@frontendfyi This is a must if you ever need to do overflow scrolling in any of the children element
FYI, fr is fraction not fragment
your vs code theme name?
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
100svh is better in my tests, good grid aproach tho
Or u could use "mt-auto" so the footer get pushed to the bottom of the page. Would me in 1 line of CSS. But still thanks.
Framework nightmares..
What about a header pinned to the top?
There’s a part at the end where I show exactly this 😁
“mb-auto” is all you need. You’re welcome 😂
You at least need to add a min-height to your body then. You’re welcome 😉
*fraction
Fraction?
@@frontendfyi the fr css unit is short for fraction. Not fragment. If I'm not mistaken👍
@dealerpriest oooh, oops you’re totally right. Haha. Sorry for keep making the same mistake over and over in the video 😂
Tailwind is hideous.
It looks horrible yes, it is so great to work with though. Although I tried 100 times before I finally converted 😂
I use Flex and Flex grow because I tend to think that as 1D only, so I don't use Gird System.
The main difference is that you can style only the parent with grid. With flex-box you have to style the child as well.
This becomes a bit problematic when the header has position: fixed
This is true! In most cases position sticky will give you the same result though.
@@frontendfyi sticky has some downsides. However, If header is fixed, we can say that it's not really part of the GRID anymore. So [1fr_auto] may help.
Whenever someone pushes the Grid cart, I'm happy to knowing that I'm not alone.
fr is a 'fraction', not a 'fragment'... 🤦🏻
Yup.. I misspoke each and every time 😂 my bad.
Very good fix 👏🏻 also mind sharing your editor font?
Flex col is much simpler and understandable
Absolutely works too yeah!
Good but u made it more complex than dvh 100,,,😂
Yes! I didn’t know that it was added, so I learned something new by making this video too. Hahaha
3 lines of code and 7.5 mins video. Gg
Haha. Yeah the difference between wanting the answer and wanting to know the why, right?
A big thumbs down from me. People coming to this video didn't expect the added complication of React and Tailwind - there's no mention of those in the title. I'll stick to Kevin Powell - and everyone else should too.
I love the way people share feedback on the internet 😂 I guess you should try starting your own youtube channel.
And yes, Kevin makes great content, people should indeed follow him.
@@frontendfyi I don't need to start a YT channel.
That is correct.
what font are you using in vs code ? it looks smooth. I would like to try that too.
The theme called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
Now go to w3c and test this solution. Next look to good practics for SEO.
Bad advice bro.
Curious to hear how this impacts seo, because I don’t think it does.
bending over backwards just to use grid. horrible approach
Which solution do you like more - honestly wanna know?
I really like this the best, didn’t bent over ‘cause that would break my back.
@@frontendfyi displaying the parent of all the content as flex, setting the flex direction to column, and then targeting the footer and setting margin-top to auto. this would scale the best way. changing the layout of the website would be extremely easy this way. think of every time you would want to change something, maybe delete the footer or the header entirely. you would need to change the grid-rows prop (line 5 @5:26) every time the layout changes. this simply does not scale. what if for example the main, for some reason, had some other siblings? you would also need to change the grid-rows prop to match this new markup change. your approach, this approach, is good whenever we're absolutely sure that there are N number of elements inside the root, and that never ever changes. let the layout breathe, display it to flex and let the footer push itself down with margin, just like I said at the beginning. that's the solution I like more.
no need to be petty and tell me you "didn't bent over because that would break your back". what a stupid joke. "bending over backwards" means to work very hard to accomplish something. I get the video; you showcase one of the many approaches. this one happens to suck.
I created a pen with the approach I described but I think UA-cam deletes comments with links in them ( codepen.io/vladsolomon/pen/ExBjeZy )
lol. Happy to hear you’re a big fan of your own approach though. Was genuinely interested in your solution and happy to have a discussion about it. Making a stupid joke was just to hopefully make stuff a bit less serious and have that healthy discussion. Apparently that didn’t work. No reason for me then to tell you why my solution definitely has my preference here (there is almost never a “best” in web dev).
Hoping you have a great weekend and think about how you can have a healthy discussion instead of telling people their approach sucks in the future. Saying stuff like that is too easy on the internet (especially anonymously). It brings you nothing.
@@frontendfyi I agree that there is no best solution. i agree that even my solution is not for all cases. but yours, using grid, work in only one scenario: when the markup does not change. not even one bit. one change in the markup and you have to rewrite the css rule. that, for me, is stupid. no need to go all teary eyed; you asked, I answered, your joke was not good. timing is extremely important. I think the only one that turns this in an unhealthy discussion is you.
Hoping you have a great weekend and think about how you can receive actual feedback.
Also, the bit about anonimity is borderline stupid. Look at the link I sent. It has both my first and last name. You want me to tell you that this approach sucks nominally? ok, no problem, I, Vlad Solomon, think this approach works in only one case. the benefits are marginal, near zero even, because if the markup changes, the css has to change also, just another exercise in reinviting the wheel.
@cafelutsa_ 👍
Thank you for your video. Yet more proof that CSS is unforgivable, unworkable garbage. Go read a real GUI API like Quickdraw from 1984. seriusly, the craft was farther advanced in 1984 than anything you can find in a web browser. Frightening.
It almost sounds like you’ve been bitten once too often with CSS, haha. I can fully imagine that CSS can absolutely feel as that unforgiving language when you try to style something. CSS is definitely not an easy language to learn.
Your reference to QuickDraw seems to be more in line with for example the Canvas web api. They serve a completely different purpose than what CSS is trying to achieve.