CSS Dynamic Grid Layout with auto fit, min and max

Alright, so you've probably seen dynamic advanced layouts like this one. I'm going to show you how to create this layout with literally zero media queries. This is all going to be CSS Grid and some cool CSS functions. You just need one media query and that's just to make this first and last item, like this one and this one right here, take up two columns instead of one to achieve this layout. Everything else we're going to do with CSS Grid and some responsive functions. media queries. So to get started with this let's first go to my code here and you can see I already have a list of benefits to render over here. Let's start to add the code over here. So first things first I'm going to rename this div into a section and I'm going to give it some classes. We'll give it some padding and a background of white. And inside this let's create a container. We'll create a div and we'll give it a max width of 7 XL which is 1280 pixels and margin-auto. We'll also give it some horizontal padding and in here now we'll create a grid and we'll give it these columns just copy this exactly as I do it It's going to look a bit weird, a bit complicated, but I'll explain how all of this works in a bit. And we'll also give some gap over here. Now these columns do look a lot complicated and I will explain this in just a bit. But first let's create this whole layout. Now inside of this div, in this grid, let's render the benefits list that we have. This will be a div and it will have the key and it will have these classes. Some padding, it will be rounded and have a shadow and a background of grey 50. And we also make it so that on the empty breakpoint the first and last items in this grid will take up two columns instead of one And this will give us the layout that we want So do the same thing for the last item. And also overflow hidden so we don't have any overflow issues with this. Now inside of this let's render the actual content for each benefit. I'll create an h4 and I'll give it the classes text3xl and semi bold font and some margin bottom and here we'll render the title of this and right below this let's create a paragraph with grade 500 and here we'll render the benefit text Now, below this, let's also render the image. And I'll give it some margin top, just to separate it from the text. And in here, let's create an image component. And render the image right here. And let's also give it some classes to style this. We'll give it full width. And make it rounded. it a border of gray 300 and with that we are done with this now let's actually go and see what this actually looks like so if you can see over here we have actually achieved all of the layout that we wanted it looks exactly like I showed you and if I go to the developer tools and resize this you can see it's actually responsive as well So on smaller screens it shifts to this layout and if we go even smaller than this Then it just shifts to a single column layout all of this is fully responsive and We've achieved the layout that we wanted. So how exactly does this work? Let's go through this step by step. The first of all, we have a section over here This is just standard padding background. This is nothing complicated Inside we have a div which is basically a container for all of our content I gave it a max width and I gave it some margin auto to Center it so we have a container and a max width for the entire section and in here we have our grid and This is where all the magic is happening so if we go inside this div and And also before we discuss the grid, we need to look at this media query over here inside the benefits where we render each benefit. What we doing over here is we taking the first and the last item in this grid and we making it so that it spans two columns instead of one on medium screens and above which is exactly what gives us the layout that we want So over here you can see the first and the last items take up two columns instead of one and that's what gives us this layout and if I shrink below the MD breakpoint, which is at 768 pixels, if I resize this all the way down to 768 and below right here, you'll see that the first and last items are now taking up only one column instead of two. Now the most important part of this whole layout is this class right here, which defines the grid columns. And this looks very complicated as a Tailwind class, so I'm going to turn this into CSS, and then we're going to see how it actually works. So this is the CSS that this class right here will generate. So let's look at this. First we have the repeat function and this just tells our grid to repeat as many columns as it can and then inside this we have the auto fit keyword which there we go the auto fit keyword and this just gives us the responsiveness that we want. This auto fit keyword is going to try and fit as many columns as it can based on the minimum and maximum column size that we define later in this min max function. And now min max is going to take two arguments which is the minimum column size and the maximum column size. The maximum size that we give this over here is one fr which is just to make each column take up as much space as it fractionally can. And this whole function right here is the minimum size that each column can be. So inside of this min function right here, we have another max function. So first let's look at that one inside. This is also going to take two arguments and it's just going to return whichever is larger. That's why it's called max. So we're saying 300 pixels or 100% of the screen divided by 4. And why 4 over here? Because we need at least three columns to create this layout that we want. If I show you the layout again, you can see we need at least three columns to make this whole layout. We We need two columns for this first element and at least one column for this second element. Same thing down here. So we need at least three columns for this layout. And we also have a bunch of gap between each column. Which is why we want to give this four columns right here Just to accommodate the gap If we didn have the gap this would be 100 divided by 3 So that why we divide the screen or divide 100 by 4 Now what this max function is doing is it's saying if 300 pixels is larger than 100% of the screen divided by 4 then give us 300 pixels. Otherwise give us 100% divided by 4. So on large screens 100% divided by 4 is bigger than 300 pixels which means that's the value we're going to get on large screens but on smaller screens we're going to get this 300 pixel value now the result of this max function is what gets passed into this min function here outside and the min function just does the same thing as the max but it gives us the minimum value instead of the maximum value. So it takes two values and it returns the minimum value out of those two values. Now on large screens whatever value we get from this max function is automatically going to be smaller than 100 percent because any value you get from over here is just going to be smaller than 100 percent of the screen right. So by default on large screens the max functions value that we get over here this will be the minimum value and this is what will be ultimately passed into the min max function as the minimum column size but on small screens if we look at the max function 300 pixels is going to be bigger than 100 percent of the screen divided by 4 so we're going to get 300 pixels from the max function here on small screens then that 300 pixel in this min function is going to be greater than 100 percent of the screen if we're on mobile or small screens so that will become the minimum value for our column size 300 pixels on small screens and this will just avoid the um what is it the overflow issues that we may run into because then we'll get 100 of the screen as the minimum column size instead of a hard-coded value like 300 pixels. And this will just help us avoid any nasty overflow issues and make our site fully responsive. And that's about it. On small screens, the 100% becomes the column size. And on larger screens, this max functions result becomes the minimum column size. and that's how this whole layout works. Now hopefully I explained everything clearly but I would encourage you to recreate this in your own code somewhere and just play around with the values and see what you get. Experiment with the math here and then you'll have a much better and clearer understanding of everything that I just said.