CSS - Grid 연습 template,auto-fit - section4-2

https://codesandbox.io/s/cocky-sutherland-sgisr

cocky-sutherland-sgisr - CodeSandbox

 

featured 1.

- nav를 grid로 만들었다.

- 행의 높이는 자동으로 100px 고정

-열은 최소 60px 보장 및 1fr로 최대한 늘릴수 있으면 늘리도록 auto-fit을 설정했다.

.title .title__menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-auto-rows: 100px;
  gap: 10px;
}

featured 2.

- nav트렌지션 설정함

- 결과적으로 title__item에 적용을시킨다. 그래야 opacity가 정상적으로 적용

- 다만 hover되는 트리거가 2가지 조건인데, menu가 호버된 경우 : 0.5 , 아이템이 호버된 경우 : 1.0

.title .title__item {
  display: grid;
  grid-template-rows: 2fr 1fr;
  place-items: center center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.1s linear;
}
.title__menu:hover .title__item {
  opacity: 0.5;
}
.title__menu .title__item:hover {
  opacity: 1;
}

 

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA