Min Max Css Grid

index.html

<div class="container">
  <div class="item item--1">Modern</div>
  <div class="item item--2">CSS</div>
  <div class="item item--3">with</div>
  <div class="item item--4">flexbox</div>
  <div class="item item--5">and</div>
  <div class="item item--6">Grid</div>
  <div class="item item--7">is</div>
  <div class="item item--8">great</div>
</div>

min-max-css-grid.markdown

Min Max Css Grid

A Pen by Ankit Jindal on CodePen.

License.

style.scss

.container {
  width: 1000px;
  margin: 30px auto;
  background: #eee;
  
  
  display: grid;
  // grid-gap: 20px;
  // grid-template-rows: repeat(2, 100px);
  // using minmax function
  // width: 90%;
  grid-template-rows: repeat(2, minmax(150px, min-content));
  grid-template-columns: minmax(200px, 300px) repeat(3, 1fr);
  
  // using min-content, max-content
  // grid-template-columns: max-content 1fr 1fr min-content; 
  
  
  // using auto-fit and auto-fill
    grid-template-columns: repeat(auto-fill, 150px);
    grid-template-columns: repeat(auto-fit, 1fr);
    width: 90%;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 150px;
    
  
    .item {
      padding: 20px;
      color: #fff;
      font-family: sans-serif;
      font-size: 24px;
      background-color: orangered;
      &--1 {background-color: orangered;}
      &--2 {background-color: yellowgreen;}
      &--3 {background-color: lightcoral;}
      &--4 {background-color: royalblue;}
      &--5 {background-color: crimson;}
      &--6 {background-color: blueviolet;}
      &--7 {background-color: palevioletred;}
      &--8 {background-color: slategray;}
      
  }
}