Image for post
Image for post
Photo by Tim Johnson on Unsplash

Welcome to part-5 of the series. You can find part-4 here.

We will first learn about the auto-fill and auto-fit property in this tutorial. We will be using this codepen for the tutorial.

Auto-fill property is used with repeat function and it is used by grid to fit as many item as possible in the row, before items been moved to next row. It is great for responsive design, where items reorganise themselves.

Consider the below CSS.

Here every column is to be 150px. So, the grid is able to fill only till item 07 and then the item 08 is moved to next row.

You can read the rest of the article from my blog site. The link for the same is below.

You can find part-6 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store