자식의 css 를 건드리지않고 부모의 css 를 통해 자식 요소 숨기기 (feat. Grid)

Grid 를 Flex 보다 우선적으로 사용하는 이유는 무엇보다도 자식 요소에 아무런 css 태그가 들어가지않아도,

부모가 자식의 width 나 height 를 결정할수있다는것이다.

더 놀라운 사실은, 부모 css 에서 Grid 를 건드리면 자식 요소를 숨길수도있다. 

보통 자식 요소를 숨기기위해서는 display: none 을 사용하지만, Grid 를 사용하면 훨씬 유연하게 dynamic layout 을 구현할수있다.

<div class='parent'>
  <div></div>
  <div></div>
  <div></div>
</div>

.parent {
	
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}

.parent-hide-2nd-child {
	
    grid-template-columns: 1fr 0 1fr
	
}

위에서 보이는것처럼, 2번째 자식 요소의 column 크기를 0 으로 주는것이다.

 

 

.parent

에서..

.parent-hide-2nd-child

가 된다.