Grid3

🔶minmax(최소, 최대)

• 화면 크기가 줄어들거나 늘어날때 제한 값 설정

• 예) Grid-template-columns: repeat(5, minmax(200px, 1fr));
  : 최대 1fr로 하되 최소 200px너비

• 예제코드

/* html 
    <div class="grid">
    .box*20{$}
    <div class="box">1</div>
    ...
    </div>

/* css */
.grid {
  height: 50vh;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, minmax(300px, 1fr));
  grid-template-rows: repeat(5, minmax(100px, 1fr));
}

.box {
  background-color: cadetblue;

• 출력결과
  
  
  

🔶auto-flll, auto-flt

• auto-flll
  : 화면이 늘어나도 item들은 지정한 사이즈대로 고정되있고, 빈 컨테이너 영역엔 빈 item으로 채워준다.

• auto-fit
  : 화면이 늘어나면 item들을 화면에 맞게끔 늘려서 빈 컨테이너 영역을 가득 채우게 됨.

• 예시코드

/* html */
  <div class="grid">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
    </div>

/* css */

.grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-template-rows: repeat(4, 100px);
  grid-auto-rows: 100px;
  margin-bottom: 30px;
}

.box {
  background-color: cadetblue;
}

/*auto-fill 일때*/
.grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/*auto-fit 일때*/
.grid {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

*auto-fill 결과

*auto-fit 결과

🔶 min-content, max-content

• 1) max-content
  : content의 크기만큼 item의 크기를 최대한 늘린다.

• 2) min-content
  : content의 크기를 최대한 줄여 item의 크기를 최대한 줄인다.

• repeat(), minmax와 결합하여 사용할 수 있음.
  예) grid-template-columns: repeat(4, minmax(130px, max-content));
   : 화면을 줄여도 item의 가로, 최소 크기는 130px, 최대 크기는 최대 콘텐츠 크기만큼만 되도록

• 예시코드

/* html */
    <div class="grid">
      <div class="item">This is text</div>
      <div class="item">This is very longer text</div>
      <div class="item">This is very longer longer text</div>
      <div class="item">This is very longer longer longer text</div>
      <div class="item">This is text</div>
      <div class="item">This is very longer longer longer longer longer text</div>
    </div>
    
 /*css*/
 .grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(4, minmax(130px, max-content));
  grid-template-rows: repeat(4, 150px);
}

.item {
  background-color: steelblue;
}