[css] CSS clear를 사용하여 그리드 레이아웃을 디자인하는 방법은?

26 Dec 2023

clear 속성은 다음과 같이 사용할 수 있습니다:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

clear 속성을 사용하여 그리드 시스템을 디자인하는 경우, 다음과 같은 예제 코드를 활용하여 개별 플로팅 요소 주위에 클리어량을 정의할 수 있습니다.

.item {
  float: left;
  width: 50%;
}
.item:nth-child(2n+1) {
  clear: both;
}

이 예제에서 .item 클래스는 50%의 너비로 왼쪽으로 플로팅됩니다. nth-child 선택자를 사용하여 홀수 번째 요소들에 대해 clear: both를 지정하여 라인 끝에서 플로팅이 중단되도록 할 수 있습니다.

이렇게 하면 각 요소가 화면에 규칙적으로 배치될 수 있으며, 그리드 레이아웃을 만들 수 있습니다.

참고 자료: