[css]리스트 list 2열 배치 display gird 그리드

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

 

ul{display: grid; grid-template-columns: 1fr 1fr;}
/* 
 grid-template-columns: repeat(2, 1fr)과 동일
*/

가로값이 정확할 경우 float혹은 display: flex로 가로값을 줘서 

배치를 할수 있지만 

 

가로값이 정확하지 않을 경우엔 display: grid를 사용

ㅇ

ㅇ

ㅇ

ㅇ

ㅇ

↓

ㅇㅇ

ㅇㅇ

ㅇ

로 변환됨

 

grid-template-columns에서 지정된 갯수만큼 배열이 되며 

fr는 자동으로 가로값이 인식된다 

너비가 1000px일 때
=> grid-template-columns: 200px 1fr 에서 1fr은 800px
// 1000px - 200px = 800px(1fr)

=> grid-template-columns: repeat(4, 1fr) 에서 1fr은 250px
// 1000px / 4  = 250px(1fr)

=> grid-template-columns: 400px repeat(4, 1fr) 에서 1fr은 150px
// (1000px - 400px) / 4  = 150px(1fr)

=> grid-template-columns: 400px 1fr 2fr 에서 1fr은 200px
// (1000px - 400px) / 3 * 1  = 150px(1fr)
// (1000px - 400px) / 3 * 2  = 150px(2fr)

 

 

px로 고정하고 나머지를 fr사용도 가능하며, 정확하게는 

2개 이상의 fr를 사용하면 확실히 알수 있음

(fr들은 너비값이 동일하게 설정됨)

 

fr값이 하나일 경우 auto와 동일

100px 1fr = 100px auto와 동일

 

100px 1fr 1fr 1fr일 경우 

100px repeat(3, 1fr)로 사용 가능

 

 

** fr만을 사용할 경우 1fr 2fr 일때 flex: 1, flex: 2와 동일

 

auto-fit과 auto-fill

grid-template-rows: repeat(auto-fit, minmax(20px,1fr)) > 최소 높이가 20px

grid-template-rows: repeat(auto-fill, minmax(20px,1fr)) > 최대 높이가 20px

 

 

 

참고 사이트

https://studiomeal.com/archives/533

See the Pen Untitled by sangmok-ye (@sangmok-ye) on CodePen.