How can I make this little grid layout responsive?

HTML-CSS
#1

Suppose, I have the following HTML code snippet,

<div class="grid">
    <div class="box-1">First Row, First Column</div>
    <div class="box-2">First Row, Second Column</div>
</div>

Now, if I set the ‘display’ property of that div to CSS grid, I can write,

.grid {
    display: grid;
    grid-template-columns: 20% 80%;
}

and some additional CSS for better representation,

.box-1 { background: #f4f4f4; }
.box-2 { background: #eaeaea; }

As I studied, I came to know about repeat() and minmax() functions can make a layout responsive with the same grid element width. But what is the way to make this grid responsive with 20% and 80% different widths?

#2

If you mean how to make box-1 stack on top of box-2 on small screens you could write:

.grid {
    display: grid;
}

@media screen and (min-width: 600px) {
  .grid {
    grid-template-columns: 20% 80%;
  }
}

https://jsfiddle.net/16v3kLhm/

1 Like
#3

Thanks, but is there any option without media queries?

#4

I think you should explicitly state what you want. Are you asking how to use the repeat function and the minmax function?
Not really sure what you want, but based on the code you provided, i think your grid is responsive already, after you used a responsive unit. Plus nothing much is inside the div elements. You can as well replace your percentage unit with the fr fractional unit.

This might answer your question - I guess