티스토리 뷰

Html,Css/Css

css: grid autofill , autofit

YG - 96년생 , 강아지 있음, 개발자 희망 2021. 10. 18. 16:33 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <h3>auto-fill</h3>
    <div class="grid">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
    </div>
    <h3>auto-fit</h3>
    <div class="grid2">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
    </div>
  </body>
</html>
.grid {
  display: grid;
  grid-auto-rows: 100px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  /*
  autofill 의 경우 콘텐츠의 사이즈를  계산하여 column 에 빈 grid의 column 개수를 설정하는 경우이다.
  */
}
.grid2 {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  /*
  autofit 의 경우 여백없이 콘텐츠를 stretch 하여 column을 채우는 경우이다.
  */
  grid-auto-rows: 100px;
}

.item1 {
  background-color: aqua;
}

.item2 {
  background-color: brown;
}

.item3 {
  background-color: chocolate;
}

.item4 {
  background-color: darkgreen;
}

.item5 {
  background-color: darkmagenta;
}

 

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

 

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in

css-tricks.com

 

'Html,Css > Css' 카테고리의 다른 글

css : grid place-content  (0) 2021.10.18
scss : Scss Extends  (0) 2021.10.18
css: grid minmax()  (0) 2021.10.18
css : grid-template  (0) 2021.10.18
css :Grid Rows and Columns  (0) 2021.10.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함