When creating a grid layout in CSS, you may run into the problem that your grid does not adjust to the lack of space on smaller devices. But since more and more people are addicted to smartphones nowadays, we should be able to create responsive grids. Ideally, you want your elements to simply wrap to the next line, as you may know it from CSS Flexbox. In CSS Grid, you can achieve the same thing by adjusting the amount of columns, depending on how much space is available. And maybe you even want to resize the elements at the same time, so the elements can wrap and resize to fill any empty space.
But to do all of that, we quickly have to understand the basics of a CSS Grid layout. My name is Fabian and this is Coding2Go, the channel where you learn the most relevant coding concepts in just a few minutes. And since many of you guys ask for it, I will be making a CSS Grid series, where I'm going to explain all sorts of Grid layouts. And today we create this responsively wrapping and resizing Grid. But one thing you might ask yourself is why aren't we just using Flexbox for this?
Flexbox has the flexwrap property which does the same job, right? Unfortunately, In the words of Kevin Powell, Flexbox isn't good enough. Because with Flexbox we would run into problems like this, where the resizing will create these inconsistently huge elements on a new line. We can see, when there are fewer elements on one line, then the FlexGrow property will make them very huge.
By having a grid layout with rigid columns, our layout will have more stability and order, even when there are fewer elements in one line. So it's just better to use a grid layout for this. Let's see how it works.
Step 1, create a grid container. that contains a few generic div elements. They have some headings and text paragraphs, but it really doesn't matter.
Step 2. Apply some very basic styles in CSS, so that everything looks nice and clean. Step 3 is where things really get interesting. Define your grid. On the grid container, we apply display grid. Now we can use the properties gridTemplateColumns and gridTemplateRows to define how many columns and rows our grid should have.
They also define how big each column and row will be. So if I apply 250 pixels three times. Then I end up with three columns, each being 250 pixels wide. Pretty simple. If I want to have a grid with 10 columns, then I have to provide 10 values here.
One for each column. But that would be very annoying to write. Writing the same value 10 times, which is why we can also use the repeat function to make it shorter. Just say repeat, and provide two values. The first one is the amount of times we want to repeat the value.
Let's say 10 times. And the second parameter is the value that we want to repeat. 250 pixels.
That will do the same job. But 10 columns is quite a lot, so let's say 4 instead, and apply 300 pixels. This looks a lot better.
But the thing is, we don't want to use these fixed pixel values. The grid should be responsive. So instead of 300 pixels, I use fractions.
One fraction can resize itself to fill out the entire website. It does the same thing as flex grow in a flexbox layout, but now in grid. The columns are distributed equally.
If I say one fraction four times, then I have four columns. where each column can resize itself. They will fill the entire website.
This is one way to make it responsive, by resizing the elements. But let's talk about how we can wrap the elements to the next line when we have fixed values of 300 pixels. What we need is the amount of columns should adjust automatically to the screen size.
When we don't have enough space to display our 4 columns, it should only display 3 columns. And then 2, and then 1. The amount of columns is controlled by the first parameter, which is 4. If I say 10, it will be 10 columns. But this value should not be a definite number. We want this value to change responsively, so instead I can say auto fit. This value will check how many columns will fit automatically.
Meaning how many times can we fit 300 pixels next to each other. So this value can add and eliminate columns responsively. Sometimes 4 columns will fit and sometimes only 3. On smartphone screens it's only 1 column. The auto fit value tries to add as many columns as possible to the grid, depending on the screen size. Now let's take care of the alignment.
You see, when there's around this much space, then only two columns can be created. And automatically, they are aligned on the left side. This means we have some space on the right side. To center our grid, we can use justify content center.
This will put our columns in the center of the grid. It's also possible to use flex start or flex end. Currently, we have a wrapping grid working.
But how can we combine this behavior with the resizing of the columns which I did earlier? Right now, there are only two columns, because there is not enough space for a third one. But still, there is some space, so these two columns could be a bit wider.
To make these columns grow, we can use fractions. Remember, in a grid that uses fractions, the space will be distributed equally among the columns. Each column tries to grow as much as possible. But using fractions in this example will give us only one column. Since fractions will always fill out the entire space, the AutoFit value will check how many columns will fit next to each other when every column tries to fill out the entire space.
The answer is 1. Only one column can fit if it takes up the entire space. For it to work properly, I need to provide the information somehow, that my columns should only be 300 pixels wide initially, but they have the potential to grow when there is any available space. To achieve that, CSS provides another function, which is called minMax. This function defines a size range greater than or equal to min and less than or equal to max. In other words, the first parameter is our minimum value, 300 pixels, and the second parameter our maximum value, one fraction.
This will create a grid. where every column is at least 300 pixels wide and has the potential to grow bigger when there is enough space. In combination with the AutoFit property, it will try to create as many columns as possible.
Since min-max is only a size range, the columns can be anywhere between 300 pixels and one fraction wide. One fraction is an open-ended value, so it could potentially be infinitely big. But since AutoFit always tries to create as many columns as possible, it will prefer the min value of 300 pixels.
because that will allow it to create more columns. And that's what it tries to do. This was cutting to go.
If you want to see more videos on grid, subscribe to the channel. And if all of this seems a bit complicated to you, it might be a good idea to get our HTML and CSS complete course. There you can learn the fundamentals first.
I will see you in the next video.