그리드 시스템을 사용할 때 반응 형 사각형을 만들기 위해 div의 높이를 너비와 동일하게 만드는 방법은 무엇입니까?

Question

스켈레톤 상용구를 사용하여 그리드를 만듭니다. 달성하고자하는 격자는 행당 3 개의 사각형으로 구성됩니다. 높이 비율 (33.33 %)을 만들려고 시도했지만 여전히 사각형을 만들지 않습니다. 고맙습니다! :)

Answer 1

CSS3에서는 vh 단위를 사용합니다. 이것은 백분율 단위로도 동일합니다.이 경우 상대 값은 viewport height입니다.

33.33%과 동일하게 33.33vh이고 상자는 뷰포트의 view height으로 조정되어야합니다.

모두보기 Css Units을 참조하십시오.

예는

.box{ 
 
    width: 100%; 
 
    height: 33.33vh; 
 
    } 
 
.foo{background-color: red;} 
 
.bar{background-color: purple;} 
 
.na{background-color: blue;}

<div class='box foo'></div> 
 
<div class='box bar'></div> 
 
<div class='box na'></div>

다음은 CSS에 상대 단위입니다.
그 중 하나를 시도해보십시오.