Creating responsive layout can sometimes be tricky. There are many scenarioes you have to take into account and the old I-just-go-with-desktop-tablet-and-mobile doesn’t cut it anymore. But luckily there are some cool features in CSS to fix this.
Flexible layout
Combining display grid with min-max functions you have a powerfull tool for responsive layout in CSS. In the example below minmax ensures that each column will be at least 200 pixels wide but can expand to occupy available space (1fr). This is the cool stuff because it makes the layout and design of elements in CSS alot more flexible. Which is what all designers and developers want.
Here is an example
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.child {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
CSS Tricks has a small article about it here