[HTML5&CSS] CSS page layout – float, flex, grid

세가지 많이 쓰이는 layout 테크닉이 있다.

  1. float
  2. flex
  3. grid

 

float-based CSS layout은 이 셋 중 가장 오래되었지만 여전히 쓰인다.

float의 property는 왼쪽 아니면 오른쪽 어디에 둘 건지를 정한다.

float: left 혹은 float: right

float: none을 쓰기도 하는데 자주 안 쓴다. left나 right를 override하고 싶을 때 쓴다.

일반적으로 float되는 element의 width를 px나 %등을 사용해서 명시적으로 정해준다.

width: 100px 혹은 width: 50%

float이라는 이름에서 알 수 있듯이, non-floated element 위에 떠 있는 식으로 보이면서 layout이 깨지는 문제를 자주 겪는다. 많은 해결책이 있지만, 가장 간단한 해결책은 이를 감싸는 element에 다음 속성을 주는 것이다.

overflow: hidden

 

flex-based CSS layout은 float-based CSS layout을 좀 더 개선한 새로운 대안이다. flex에서는 float에서와 같은 floating element의 clearing 문제를 걱정할 필요가 없다. 사용을 위해서는 개별 item을 담는 flex container에 다음을 적용하면 된다.

display: flex;

기본값으로 한 줄에 모든 element를 두도록 되는데, 이를 바꾸기 위해서는 다음 속성을 적용한다.

flex-wrap: wrap;

flex item들의 width를 정하기 위해서는 다음과 같이 한다.

flex-basis: 25%;

 

grid-based CSS layout은 세가지 중 가장 최신 기술이다. grid container에 다음을 적용한다.

display: grid;

그리고 grid 내에 몇 개를 둘 건지, 크기는 어떻게 할지, 몇 개의 열을 둘 것 인가를 정한다. 아래처럼 하면 4개의 같은 크기를 가지는 열을 갖게 된다.

grid-template-columns: auto auto auto auto;

float나 flex에서는 item들의 width를 정해주어야 했지만, grid-based CSS layout에서는 그럴 필요가 없다.