minmax
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 100px);
grid-auto-columns: 100px
}1fr을 갖는 10개의 column이 4개의 row로 늘어선다.
압력을 가하면
이렇게 변한다. 변화를 막고 최소한의 품위를 유지하게 하고 싶다. 그러기 위해서는 minmax를 사용해야 한다. grid-template-columns: repeat(10, minmax(100px, 1fr))
최소 100px 그리고 최대 1fr을 갖는 셀이 탄생했다. 아무리 압박해도 크기가 100px 이하로 떨어지지 않는다.
auto-fit, auto-fill
html
<body>
auto-fill
<div class="grid">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
</div>
auto-fit
<div class="grid">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div class="boxes">4</div>
<div class="boxes">5</div>
</div>
</body>
css
.grid {
display: grid;
grid-gap: 10px;
grid-auto-rows:100px;
margin-bottom: 30px;
}
.grid:first-child{
grid-template-columns: repeat(5, minmax(100px, 1fr));
}
.grid:nth-child(2){
grid-template-columns: repeat(5, minmax(100px, 1fr));
}
auto-fill과 auto-fit을 나눠주고 parent에 grid-auto-rows:100px를 주었다. child selector로 최소 100px 최대 1fr를 가지는 5개 column를 만들었다.
이제 grid-template-columns: repeat(5, minmax(auto-fill, 1fr))과 grid-template-columns: repeat(5, minmax(auto-fit, 1fr))로 각각 바꿔보자.
디자인 작업을 할 때 몇 개의 요소가 들어갈지 모르므로 특정한 숫자를 적는 것보다 auto-fill 혹 auto-fit을 적는 것이 좋다.
auto-fill은 가능한 범위 안에서 가능한 많은 column을 만들어 준다.
auto-fit 은 가지고 있는 element를 늘여서 주어진 자리에 딱 맞춘다.
프론트엔드 개발