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

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.

I would do flex grow to main

Worth noting that you still have to set min-height to 100dvh for this to work.

Hahaha this is great! Hope the video was indeed useful to you!

The same situation😅

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 😁

Thank you so much! Glad you like the videos, an appreciate you commenting ❤️

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

Thank you! Glad you enjoyed it!

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.

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

Yeah nothing wrong with using the body indeed! Just need to be aware that things can be injected in the body indeed.

Glad it was helpful for you!

Glad it was helpful!

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!

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.

There’s definitely more solutions to this indeed! Glad you like this one though!

Nice, glad you like it!

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!

Thank you Didem! Nice to see you in the comments again 😁

I love hearing this! Glad the algorithm decided to show it to you!

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

The font is called Recursive Mono Casual Static

@@frontendfyi thank you

It is right!! Glad you got the solution now 😁

Someone else mentioned it too! Didn’t know that yet. Thanks 😁 Also happy you enjoyed the video!

Tailwind is CSS my friend. I even show the css properties to make it even clearer. But thanks for your constructive feedback.

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 😁

Oh!! Didn’t see they added this! Thanks for mentioning 🙏

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

If it’s always visible then I think position fixed for the footer makes most sense.

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.

Glad you liked it! 😁

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

You're welcome! Glad you enjoyed the video!

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

Quite some modules are already released! Did you see that? 😁 www.frontend.fyi/course/framer-motion

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.

You at least need to add a min-height to your body then. You’re welcome 😉

It looks horrible yes, it is so great to work with though. Although I tried 100 times before I finally converted 😂

The main difference is that you can style only the parent with grid. With flex-box you have to style the child as well.

There’s a part at the end where I show exactly this 😁

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 😂

The theme called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

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.

Yup.. I misspoke each and every time 😂 my bad.

Absolutely works too yeah!

Haha. Yeah the difference between wanting the answer and wanting to know the why, right?

Yes! I didn’t know that it was added, so I learned something new by making this video too. Hahaha

Curious to hear how this impacts seo, because I don’t think it does.

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 KZfaq 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_ 👍

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.