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?