CSS Grid Layout: Cool Code that is super helpful to know

Hello, my Friends.

I want to share my experience which I think may help many of you interested in coding and do it every day. Some of you may be experience and know or not yet and some of you are new to coding like me and this may seem like “wow” to you 🙂

Here you go.

While I was doing my assignment in coding I was figuring out using a Grid such a way so I could be able to use it on a mobile version and desktop version without a change or a minimum change to a code. So, this code, which I found to be the best fit for my purpose, works wonders.

So, here it is.

After setting the Display: Grid, then you would set the “grid-template-columns:” or “grid-template-rows:” depending on what you want to make super responsive. Then you would give a value as such:

example: grid-template-columns: repeat(auto-fit, min-max(150px, 100%));

So what this piece of code will do? It basically makes the content fit to the viewport of whatever device you have [ auto-fit() ] and from the column size of smallest as 150px and the biggest as 100% of the screen [ min-max( ) ].

For more technical information please use the following link: