Using minmax() for Responsive Grids
Using minmax() for Responsive Grids by Wes Bos
HTML
<link rel="stylesheet" href="https://cdn.rawgit.com/wesbos/css-grid/master/assets/style.css">
<div class="container">
<div class="item item1">Item 01</div>
<div class="item item2">Bonjour!</div>
<div class="item item3">Item 03</div>
<div class="item item4">Item 04</div>
</div>
CSS
.container {
display: grid;
grid-gap: 20px;
border: 10px solid var(--yellow);
/* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
grid-template-columns: fit-content(100px) 150px 150px 150px;
}