CSS Flex vs Grid (using Tailwind CSS) | Which to choose?

hello everyone welcome to tyrus web development tips and tutorials i am shruti balasa a full stack web developer with a with an experience of 10 years so here today i suddenly decided to do a live stream it's been a while since i've done a live stream i thought hey i have about 60 minutes let me put into some good use and immediately thought i'll schedule a stream and i quickly prepared for it this is actually the first time i'm going live without almost with zero preparation so thank you all for watching today i will be talking about one of the biggest confusions when it comes to css right so you know flex you know grid or at least you know a little bit of both and you don't know when to choose which one so while you're reading through the properties sometimes both of them seem similar and you know all the examples that you see in all these tutorials they all use some boxes or some text in between not you don't get to see some real world examples right so that's why i thought i'll just take some quick few examples and show you a pattern of how to choose when to choose flex and when to choose grid so in case you have some questions in between feel free to post them in the chat below i'm checking the chat as well and yeah so let's get started i might be uh elaborating some examples some examples i might not i'll just show you the approach i'll uh just show you how to decide but if you feel you want me to elaborate some example and show you actually how it's done then yeah please let me know that you know you can please elaborate this example so let's get started i quickly went into dribble and you know this great website called landingfolio.com and picked up some examples uh just some screenshots so let me start with that i'll start from something i'll start with something very simple something like this right so you get to see uh something like this almost you know every website you know subscribe to our newsletter or you know enter your email address get a demo and things like this now this is a small layout you might think flex is used for you know something larger no flex is used for something as small as this also now for example if you had to uh do this before the introduction of flex and grid which is probably six seven years ago when i started uh with web development i would uh you know probably use float or you know something similar but this is a very nice way nice place to use flex okay now how do you decide how did i know that flex is what i'm supposed to use so let me start with the basic distinction when would you use flex versus grid now as you know by definition all of the tutorials say that you use flex uh in when you are laying out elements in one dimension and you use grid when you want to lay out elements in two dimension but that's not the best answer i would go for because you have seen uh flex with flex wrap and then they do flow into two dimensions right so that makes you wonder then what how is it different from grid so i'd like to tell you one major distinction or one way to choose is if you are able to uh you know see that your the like these these are two boxes correct so this is one div and this is probably another div or maybe this is just a button and this is some text now if the layout if the sizing of each of these blocks depend on the content within and not exactly like you haven't decided that this has to be in a ratio of you know four is to one or let's say three is to two so if you don't have a fixed size on mind but you want the design itself to decide the content to decide how much space it should take say for example get a demo now if this was a little larger like you know get a free demo then this button would be a little larger now you can't really decide the size of this tomorrow you might change the name or you might just say you know click here for a demo now in case it gets larger you can't say i want this to occupy let's say 25 of the space now this is the best use case where you use flex because it's flexible you know you add more content here then you know it expands if you add less content here it shrinks so wherever there's a chance for expansion or shrinking when you want the layout to be laid out depending on the content within then you choose flex right so let me go into the next example sorry yeah let's look at this now okay it's quite small yeah so now the moment you look at this this can be seen you you visually can split it into four boxes like this so vertically it's split into let's say you know 50 and 50 you can see that right it looks like a table the moment you look at it you're able to draw lines like you know your mind does it already so let me show them to you i think yeah i think i can use some um how do i actually edit [Music] okay i thought i could put some annotations but ah yeah marker is here yeah so the moment you see sorry not this is this a marker yeah so this is the i am so sorry for this so you can draw a box visually now there are no borders of course but you can draw a box that goes like this right oh my god correct so definitely you can use grid here of course you can use flex also right but with flex it gets a little more complicated you will have to define flex basis you will have to mention that you know this is 50 this is 50 with grid you don't have to do that i mean there are classes that are you know it's by default you know you you can do it with grid saying that you know i want this to occupy 50 and 50 and the next content also flows below so it's easier with grid especially with tailwind css if you have a look at the grid so you see you you just have to say grid row you know column two sorry yeah you just have to say grid columns two and then it make sure that it's equal with one fr is that's what it is right one fraction and you know one fraction so it's easily it takes up you know two ah what do you say equi what do you call equally sized boxes okay that's why it's wise to choose grid here so like i'm saying there's no fixed rule that you have to use grid you have to use flex it's just the ease of use sometimes you know if you're if you only know about flex then you can design everything with flex there's no problem but some things get easier with grid okay so this was the second example uh so someone saying morning from brazil hi nice to meet you then flex is component focused and grid is layout focused yes current that's that's perfect and please make a video on installing tailwind yeah i'll get to that so thank you let's move on and now i'll take up the third example so if you look at this now you have a small you know profile icon here and you have some text this is a classic example of flex when you have an image on the left and then some text on the right so this could even have designation below or some more text here now this is where flex is very useful you just put one image in one div and you put the text in another div it takes up size only thing is you might want to say you know you might want to say flex grow for this you just set flex grow to 1 and you know this will not grow by default correct this is where you can use flex same goes here also now of course again if you see this is 50 but you know there might be more text here again a classic example of flex right you can use three or different divs here and arrange them in flex and you can use the justify align property to make sure that there is maximum space so you set it to space between that make sure that this content moves to the left and this content moves to the right so this is again a very good way to do it in flex let's see our fourth example yeah so any guesses anyone i guess you might you might already know that it's better to use grid here right because we can literally see that it's split into three columns we don't want the uh you know content to decide the size of this if that was the case this would probably be a little larger but no no matter what the text within if we want it to be one third it's better to use grid so you just do one fr one fr one fr using grid template columns and then put whatever text you want it will make sure that it's within the width okay of course again you can use flex but with that you'll have to set flex bases so grid is the best choice for this particular design let's go to the next one now this is another real world example you will see this in almost every single london landing page that you know featured in so and so or you know our customers our clients and a lot of logos that go within now earlier this was kind of difficult to do with float and you know you had to clear and things like that but with flex it's again very simple you don't know what size is each logo right so you let flex decide it it's flexible you put up all these things in flex and then you don't have to worry about the size of the of individual logo it makes sure that it gives as much size as required for the image and then you can add some space between if you're doing this using tailwind so let me actually uh you know show this let me open up play.tailwindcss.com and then let's say we have five divs four for the logos and one that says as featured in red let me add some overall padding let's say p8 or something okay and then this is logo one this is a let's say wider logo course i need to give flex here and then let's say a small logo so let let just be l and then here's another one just to make sure that it's white so the moment you add flex you see that there's no spacing in between with tailwind it's very easy you can use the space x utilities right space x means space in the horizontal direction and you can choose any value here like space x a to something or if you want them spaced further you can use space x 12 and if you want this whole thing to be center aligned you can simply use mx auto i think that works oh no that won't work but yeah of course you can use justify center that makes sure that all the items are centered and yeah so this is how it's done i'll just add a font bold so as you can see you can place your logos here this is slightly wider this is squarish this is a much wider one and this is how they all fit in now with grid we can't do something like this you'll have to actually decide the uh you know of course you can do it but with flex it's easier because you know it's made for that right next example let's look at this one i'll close this up and here we go so this is a classic footer you would see something like this on every website and the content here again decides the width of this so for contactors you need slightly uh wider width and you know for this you'll need something smaller and you know here's a logo on the right side for this again flex grow will be very useful because tomorrow you might want to add a description something a huge description here and you would want a little more space for this so you can set flex grow one for this and all of this by default flex grow can be zero again let me show this to you using you know the tailwind plate i'll open up another one and so we have this contact section i'd like to use flex here and then we have four divs right so the first one is company contactors social and some logo i would just say company logo here again let me give an overall padding and some horizontal spacing maybe spacex eight now you would uh want this company logo to go to the right and be right aligned so literally we want this to grow into as much space as available correct so let me inspect element and show you right now that this is what currently this is the size of this div we wanted to flex we wanted to be as flexible we wanted to grow and occupy the remaining space so what we can do is with tailwind you just have to add a class that says flex grow that's it and you now now again you might think nothing changed but it did change you see you saw that without flex grow so if i remove flex grow this is the size if i add flex grow this is the size so it's you know it's it's taken up the entire space the reason we can't see is because the text is still left aligned you can change that with saying text right you see immediately it's gone to the right now here whatever other text you add here it will take up the space that's required so let's say you have like some contact number here oh sorry that's with front contactors what was that about us carriers and all that right so you could probably have an you know ul here and so on correct and then here this could have a contact number and an address or something like that and then this could have the uh social media links i believe instagram twitter linkedin so you see it will take up as much space as required you can of course increase the spacing and so on now if you're wondering how do i make this responsive i just thought i'll introduce that as well so in desktop this is all fine but what about mobile maybe once you reach this from this space from you know as small as this device you would want everything to come one below the other and because tailwind is a mobile first thing i it actually starts here you'll have to start designing mobile first and only then you'll have to design desktop so when it is mobile i want the flex direction to be flex column instead of flex row because by default it is flex row that everything comes in one row instead i will say its flex call to start with and if you notice when you put flex call the space x12 is what is making it so weird i'll remove it for now i'll add it back okay and when you do flex call you notice that everything is great but we want some spacing now in the vertical direction so instead of space x now i'll add space y may be of six okay and let me just say strong just to distinguish it and here's the company logo now because we have done flex grow and uh you know text right for this that's why it's going to the right but on mobile we don't want it to go on the right it look great on in the on the left so i'll remove this okay now that's perfect so the moment you come to maybe a screen that is like md medium break point that's when you would want the flex call to change to flex row so let's say md and flex row it's not yet reached md yes the moment you do md flex row it goes into one row but now we are having a problem with this vertical spacing that's why what we do is for md we reset the vertical spacing to zero and instead again md we have some horizontal spacing great that's what we want right maybe 12 okay and now again for md break point and above we would want the logo to be on the right that's why md we can say what was that again flex group yeah sorry flex grow and text right again md text right so you see it's perfectly responsive right now this is how you use flexbox in a you know for a responsive layout great then uh so let me i'm just checking the chat um few days ago okay i don't i'm not sure if there's anything related to this please create an image with a layered background color block offset under the image as a accent block using z and grid i'm sorry i didn't understand this if you can please explain it in a better way i'm i couldn't get what you're saying i'll continue meanwhile so this was the example number five that we just saw and let's look at this example six right now okay coming to this now this is again uh you might think because the content is larger here you might want to use grid you might want to use flex but i would say visually this block is two times the size of each of this block correct and you would want to limit it because you don't have enough space now if it depends on the content it will not look good right each of these blocks will not be sized exactly that's where i would say you can you'd rather use grid here okay and you can set the size before maybe you can say 2fr 1fr 1fr and so on that way it will take up the exact size just give me a moment i'm sorry for this interruption so i'm right back all right sorry for that interruption now i was saying that that you can you know use grid here and if you see these titles are there so how do we go about it maybe we can use a grid within a grid right so first what you do is okay let me open up and i would choose a marker yeah so first what you do is oh my god how do i choose a color is this how i do it sorry i've never used this before no that's not how it's done anyway so this entire thing would be first one grid and this is two times that so you can say one fr and then two fr that way we have two grids then you put the title here you put the title here and then this entire div you again split you again make it a grid container and these four items could be one fr one fr that will be another grid so this is a nested grid you will have this entire thing is one grid and then comes two grids then two items sorry and this they will again become become a container and these four can become items within that so you can nest as many grids or you know flex items one within the other and it will not affect anything say for example you have used justify items center in the parent grid it will or the parent flex container it will not affect the one within it so you'll have to again say justify content center for the next one if you want it so right so we can use flex within a grid yes that's a good point you can use grid within flex flex within grid grid within flex within flicks and entirely nest it and none of the styles flow into the child element so you can treat them as exclusive objects you can completely forget that you have nested them and use them as individual containers right someone's saying too much css lesson for one day i'm sorry because if you don't know much of flex and grid yes this would be confusing i assumed that you would have some basic flex and grid grid knowledge i do have a video on flexworks entirely which i just released a week ago i will be coming up with a grid tutorial a couple of days from now so if this is too much for you today watch those two videos you know take up some examples try them out on your own and then watch this to understand you know why this confusion is there of when to choose css flex and when do you choose grid then you'll understand this better so someone's saying the outer grid can be 1 fr 2fr and the inner will be repeat for 1fr perfect so that's exactly how it's done then someone's saying two grit column with one on top overlapping bottom column by one third and down one fourth again i'm so sorry i'm not sure if i got you right next so this is an interesting example here okay so you see that there are two columns here and there are these divs which are not equally sized now do you use flex here or do you use grid the answer is both so you first use a grid it's easier to use a grid to split them into two columns of same size each correct and within the grid you can use flex column or if you can entirely skip flex at all because anyway it you know the vertical positioning will will take care of it so you just have to split them once and then you just use two divs and it will position them vertically anyway but if you're comfortable using flex you can use flex let's say for desktop layout all four of them might go one next to each other in that case flex would be useful this probably is a tablet layout or you know maybe a desktop layout itself so that depends on how you're responsive how responsive you want it to get great so probably we have one last example this is quite interesting uh i came across this today and i thought i'll make an entire i don't remember maybe i got it from landingfolio.com so i'll make an entire tutorial on how to make this the moment you look at this it looks quite complex and you know there are different placements you don't know how to get this on top of this what exactly should you use and you know how do you make all of this work yes the moment you look at it it might feel overwhelming but if you take it step by step it gets easier so this the moment you know you see you can actually divide this into five blocks correct i wish i can use the marker correctly this time no how do i use a marker yes so okay so this entire thing is one container and this is what it is correct now within these items let's worry about alignment later but this is what it is correct so the moment you look at it now it can easily be done using grid right all you need to do is this item you can say start the you know row from can again be a flex one i'll i think i'll yeah so this thing here can be a flex container this is a grid container so you see there are too many flex and grid don't worry about nesting so much you can absolutely do it there's no problem with it and then within this again you have one on the left one on the right one on the left and right again feel free to uh you know if this is an image anyway it will you can use inline block or you can use inline flex and they will uh you can place them next to each other easily it's someone saying i want to thank you for sharing your knowledge uh thank you so much i'm so happy to hear this and let's move on right so this was my last example and uh this is all i was able to gather in the you know 15 20 minutes gap i gave myself to actually for the live stream so i hope you enjoyed this and you learned something from here but you will immediately forget it if you don't put it into practice so i would suggest just go into all of these wonderful websites like you can even choose dribble but if dribble feels a little complicated for you you can uh check out this landing folio.com no this is not a promotion or marketing for this i personally like this website that's why i'm going there are wonderful designs not as complicated as a dribble but you know something more practical something more easier for you to follow you can take a small sample of it maybe you can just take this small piece here okay only so much so take up this take a screenshot of this work on only this much for now don't don't think of the entire page and then come down take this part and work on only so much that way if you're able to split it and work on it make sure you focus on each of the details maybe the line spacing you know maybe the padding around and so on if you notice this is split a little i don't know if maybe that's by design uh or i don't know if that was an error see if you're able to achieve some such uh you know design like this so practice is the way you can get through this and once you have mastered it you will really uh not look back you'll be able to look at any layout and say okay i can use flex here i know how to use flex i know how to use justify content i know how to use justify items and align items and none of that will start looking scary to you because you would have practiced enough right landing folio is one you can also choose front-end mentor dot io i suggest this website to a lot of people you can go to challenges and if you want to choose only the yeah you can choose so newbie junior if you're new to it or if you think you're not very new you can try some junior stuff or if you want to do intermediate you can you know come to intermediate challenges and then you can only choose the free ones if you want and try out these layouts they're really nice they are uh real world and at the same time they give you enough challenge to uh you know learn what you've i mean implement what you've learned right so thank you so much for watching and staying back this is a shorter live stream just 25 minutes and i'm wrapping it up oh i think it's 35 minutes okay i'm wrapping it up thank you for watching do share it ahead if you really loved it and in the comments do let me know if you want similar videos in the future i'll do more and watch out for the grid tutorial that's coming up in two days okay um thank you so much bye you

Channel: Thirus

Views: 2,676

Rating: 5 out of 5

Keywords:

Id: NUDLB5WG_6E

Length: 33min 1sec (1981 seconds)

Published: Tue Mar 16 2021