Auto Fill With CSS Grid To Adjust For Mobile

CSS Grid is a great tool for styling your web pages. This neat trick will let you adjust your grids with a minimum size so it will look better on phones.

CSS Grid

CSS Grid is quite simple, you just declare display: grid in a parent container and then declare which pattern you want. Usually with grid-template-columns or grid-template-rows. You can specify the values in any unit possible, however, if you need to resize it based on size, I usually do like this.

.container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

In this case, the minimum with is 300px, meaning no container will be smaller than that, else, all elements will take up 1fr, or 1 fraction of the space.

In my case, this is on a bigger screen:

And this is on a phone screen: