Create an adaptive CSS grid with a max column count!

when we're working with css grid using the autofit keyword we can make these cool intrinsic grids that sort of adapt to their situation but there's a problem with them so say we do an autofit like this and then i come in and do a min max and i can say really simple example here i'm not going to dive too deep into it but i have one column two columns three columns four and it just sort of works but if these run out of room they're gonna start adapting and i don't have to have any media queries for this it's super cool super nice but what if i got into these ranges where i wanted a maximum of three or a maximum of four columns well doing this it doesn't allow us to do that luckily there is an interesting little solution that we can do if you need that type of thing and that's what we're going to be exploring in this video hello my friend and friends i'm so glad that you've come to join me once again and if you're new here my name is kevin and i'm here to help you fall in love with css and if i can't get you to fall in love with it i'm hoping to at least help you be a little bit less frustrated by it and let's continue with our example that we're looking at so we can see one way that you can be you know unlock a new possibility with grid and as we're getting started in this i just want to say a really big thank you to mark boots on my discord server who's the one who came up with this idea and said i could share it so a big thank you to mark and if you'd like to check out the discord it is linked down in the description below and so what i'm actually going to do here is i'm going to change this grid to be a grid auto flow of column which just means that everything's automatically going to make a new column it looks similar to what we had before but the difference is it's going to overflow it's almost like a display flex at this point not quite but a little bit like that whereas you know this adapted to things a lot better as i said we want something where we're maxing out at say three or four columns as some simple examples or whatever you need right now this doesn't work but i will say it's a little bit more hard coded in and we're gonna do it by using the i have a grid item because inside all of these we have my grid items right and i'm gonna say grid item and we're gonna say nth child or it could be an end of type we're gonna say nth child and on my nth child we're going to say let's just do a one to select the first one and for now we're going to change the background color background and i have an accent color set up here it's with a sass variable but don't worry you can see it's just changing the color there um and the reason i want to do that or you know what we're going to do that is the border color so it's a little bit less aggressive and it should still there we go we can see it's highlighting the one that's coming in there and the reason i wanted to do that on just the first one is we're sort of going to take the next step from here so right now i'm saying my first one but let's say i wanted to max out at four columns what we could actually say here instead of the first one is every fourth one plus one so four n plus one and now let's see and you know what let's change this back to a background uh background because it's gonna highlight things a little bit better again and now you'll see it's selecting the first one again but now it's also selecting the fifth one so it's one and then we're skipping three and then we get the next one one skipping three getting the next one we could also do this with every third plus one it would always be the first one and then every fourth one you might be going kevin what's the point of this well what we can do on this is we can actually say grid column for these is one and you'll notice now don't look at the numbers because the numbers are a little mucked up but what this is doing let's turn off the background color is i'm saying i want three columns maximum so i have one i have two i have three now here it's happening to fall down to two and there's a reason for that but you can see everything's sort of adapting and working we have three columns and then we have our three columns down here now there is an issue with this that has come up and you might notice that i have a over here we have a one a two a three a five and a four and the order of things has sort of got a little bit jumbled but we can fix that it just does mean that we're taking things and we do have to be a little bit more explicit with how we're setting things up and with these all in place what we're gonna do is we're gonna say three and plus one so that's our first and then every one you know our first our fourth and so on then this one will be plus two so that would be our second our fifth and so on and this one will be a three plus three and so it's going to be our third plus our sixth and so on from there and then we can make this a grid column two and then a grid column three and if we do that now you'll see we have one we have two we have three columns and then the fourth one is always just going in the right order and then from there everything's going to wrap and everything's going to work we could even take this and turn this into 10 items let's just take these three we'll get up to 9. okay we'll go up to 12. why not it's going to work and i'm not going to change the numbers just so we can don't have to speed things up but you can see i've run out of colors because i didn't plan for that many but you can see that it's just working and we can do is this is for if i want three columns but what if i want four columns well then i just change this to a four change this to a four change this to a four and then i would ideally come in and add another one here that would be my plus four and change that to a4 and now you can see we have one but if there's only one it stretches if we have two it fit it works we have three it works four works and then so on and it just works magically from there there's two more things i want to look at one of them is how does this work with you know if we get too small the old system that first one i looked at was nice because we didn't need media queries this one if you do want to adapt it would require media queries so we'll look at that first and we'll look at more of like a quick fix easy way to do this instead of having to manually do as much as we're doing here um so let's actually take off all these accent colors because we don't need those and what we can do is that's my grid container so here the grid auto flow of column on there i'm going to remove and everything's going to sort of look the same because of these column counts but we'll come here and we'll say that at media min width of say 50m just so we have a number in there we can have our grid container and then we can just take all of these throw them inside here and now we'll get that same thing where's but now it's small screen sizes everything stacks and then at large screen sizes you'd get your column or your grid set up but with like a max column count which is really cool now one downside of this this is where like you can think variables wouldn't variables be the greatest thing in the world here uh because if i could use a custom property to come in and change this and i could just update one value somewhere it would just work everywhere sadly we can't use custom properties here it just doesn't work sadly but it is what it is but what we could do is we could abstract this away a little bit but use good variable names and use sas to actually make this a little bit more workable and as long as i think you have good variable names even though you can abstract things away with sas it can actually make things a little bit more readable because if i came across this this would need a comment in the css to actually understand what's happening so let's come through this and actually turn all of this off and we can replace all of that by coming here and doing it at 4 i from 0 through and for an f through through um or from one through four and we're going to change these numbers to make it less abstract but i want to start here and this is something you can do in sas you can do loops that generate css and so here we can do our grid item nth child and we can then use the numbers so i'm going to do my 4n plus and then here we're going to use my i now the i we can't actually put it in like this we have to use something called interpolation here so i'm going to do that and wrap it around which just means it's actually going to work in my css basically and then here i'm going to do a grid column of i so what it's doing is it's going to loop through this one time so it's saying four i from one through four so the first time is the i gets replaced by the number one so we end up with a number one here and we end up with a number one here which would be exactly what we see here and then it's going to do the same thing again but it's going to replace this with the number two and this with the number two and it gives us exactly what we see here and then it does it again and again now you can see here i misspelled through so that's why i'm getting an error because i thought i fixed that but i got a thought instead of a through but we can see it's actually working and now as i said this is still actually very abstract right so for this we could you could have like your global variables and you set something up that's with your global variable the same max column count or you could come and keep it close to your grid container so right here i could say max column count and here we could actually say four and then inside over here we could come in and replace this 4 with a max column count and because that 4 is also the same number that we need here we would come in here and do the same thing of a max column count which would also need interpolation so i'll wrap that and put a pound there and now all you have to do is come and find this variable so in the one thing is you i can't take it and actually nest it inside of here because we're in a media query there because of how sas works with how all of this works basically so it does need to be like a global variable that i'm using but i could come and change this to a two and now i have a maximum of two columns or i could change it to a three and now i have three columns or i could change it to a five and now i have five columns and it just works and it's going to stretch things but we're having a max column count i think that's pretty cool and if you'd like to know more cool tricks that you can do with sas i am working on a course right now there is more information linked just below this video and if you like this video and you'd like to see more tips and tricks and fun things you can do with css in general then there is a short playlist for you right here and with that i want to say thank you very much to my supporters of awesome over on patreon jan johnny stewart and tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 46,311

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial

Id: GGcDLOuKaiA

Length: 10min 15sec (615 seconds)

Published: Thu Apr 07 2022