Hello, my friends.
As a Website Creator, I want to share my experience, which will be very helpful to many of you interested in coding and website design. Some of you might be experienced and know this already, while others might be new to coding or website design, and this might seem like “wow” to you 🙂
Let’s dive into it without further do.
While working to create a website, I figured out how to use a Grid to use it on both mobile and desktop versions with little to no change to the code. So, this code, which I found to be the best fit for my purpose – works wonders.
Here it is:
After setting Display: Grid, you would then set “grid-template-columns:” or “grid-template-rows:” depending on what you want to make super responsive. Then you would give a value like this:
Example: grid-template-columns: repeat(auto-fit, min-max(150px, 100%));
So, what does this piece of code do? It basically makes the content fit to the viewport of whatever device you have (auto-fit) and sets the column size to be at least 150px but up to 100% of the screen (min-max).
For more technical information, please use the following link:
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`
I hope it will be helpful to solve some of your coding problems 🙂
Best, Iskandar