[CSS] columns 속성 / masonry layout 메이슨리 레이아웃

[CSS] columns 속성 / masonry layout 메이슨리 레이아웃

---

✔️ columns 속성

: 요소의 다단 레이아웃 열수 및 열 너비를 설정한다.

.box2 { columns: 200px; margin: 30px;} /*단 최소 크기 지정*/

.box3 { columns: 200px 5; margin: 30px;} /*단 최소 크기 지정 및 최대 단수*/

💡 단의 최소 가로 크기를 200px로 하면, 균등한 크기로 분할했을 때 200px 보다 크면서 200px에 가장 가까운 가로 크기를 갖도록 단의 개수가 정해진다.
웹브라우저의 가로 크기를 늘리면 단의 개수가 늘어난다.(폭을 늘리거나 줄이면 확인 가능)

 

 

✔️ masonry layout 메이슨리 레이아웃

: 단으로 구현. 상자의 순서는 열 아래로 내려가는 레이아웃이다.

: 컬럼 모드를 활용해서 메이슨리 레이아웃 형태를 만들 수 있는데, 웹페이지를 2개 이상의 컬럼으로 나누어 컬럼 흐름에 따라 주르륵 컨텐츠가 배치되도록 하는 것이다. 

.container {
	width: 800px; margin: 50px; padding: 20px;
	background: #e3fafc;
	border: 1px solid #99e9f2;
	
	columns: 3 250px;
	column-gap: 1rem;
}

💡 컨테이너의 단은 3개로 250 px 폭을 가진다.  단의 간격은 1rem 이다.

 

.container > .item {
	border: 1px solid #3bc9db;
	border-radius: 3px;
	background: #99e9f2;
	font-size: 250%;
	color: #fff;
	padding: 5px;
	text-align: center;
	
	width: 100%;
	display: inline-block;
	margin-bottom: 10px;
	
}

💡 텍스트가 들어가있는 div 태그의 클래스는 item 이다. 
이미지가 컬럼 너비를 넘치지 않도록 width 는 100% 
차례대로 아래와 같이 이미지가 배치된다.