<p>Hello CSS grid lovers, today I'll be showing you how to easily create a responsive grid using minmax() and min() without creating media queries.</p>
<p>CSS Grid no doubt is the most powerful layout system for 2 dimensional complex pages. CSS Grid can do more to that of flex which is a 1-dimension based system.</p>
<p>Let's not get distracted to comparing flex and grid, so let's get to the fun part of creating a responsive grid without media queries.</p>
<h4>The Code:</h4>

<pre><code>grid-<span class="hljs-keyword">template</span>-columns: repeat(<span class="hljs-keyword">auto</span>-fill, minmax(<span class="hljs-number">10</span>rem, <span class="hljs-number">100</span>%));
</code></pre><p></p><h4>The Explanation</h4>
Without writing any line of media queries, the code above will automatically adjust your containers to fit. A container that has a flexible number of columns would be set up. The columns will stretch, until there is space for another.<p></p>
<p>It'll keeping adjusting and creating more columns for your grid items to fit in to your page. It'll take the first default which is 10rem and would adjust using 100% on stretching the screen. You can tweak the code to fit in to what you want.</p>
<p>The reason I used 100% is because % provides flexibility on our page.</p>
<p>Hope this would help you someday 😁</p>


Hello CSS grid lovers, today I'll be showing you how to easily create a responsive grid using minmax() and min() without creating media queries.

CSS Grid no doubt is the most powerful layout system for 2 dimensional complex pages. CSS Grid can do more to that of flex which is a 1-dimension based system.

Let's not get distracted to comparing flex and grid, so let's get to the fun part of creating a responsive grid without media queries.

<h4>The Code:</h4>

```
grid-template-columns: repeat(auto-fill, minmax(10rem, 100%));

``` 
<h4>The Explanation</h4>
Without writing any line of media queries, the code above will automatically adjust your containers to fit. A container that has a flexible number of columns would be set up. The columns will stretch, until there is space for another.

It'll keeping adjusting and creating more columns for your grid items to fit in to your page. It'll take the first default which is 10rem and would adjust using 100% on stretching the screen. You can tweak the code to fit in to what you want.

The reason I used 100% is because % provides flexibility on our page.

Hope this would help you someday 😁

Create a Responsive Grid without Media Queries

A Software Developer and a JavaScript lover
