grid-auto-flow 속성

grid-auto-flow 속성은 그리드에서 항목의 자동 배치를 지정합니다. 가질 수 있는 값은 row - 행을 항목으로 채움, column - 열을 채움, dense - 그리드의 모든 빈 공간에 항목을 배치합니다; row dense - 각 행을 채우고 그리드의 모든 빈 공간에 항목을 배치합니다; column dense - 각 열을 항목으로 채우고 그리드의 모든 빈 공간을 채웁니다.

문법

선택자 {
	grid-auto-flow: 채울 그리드 부분;
}

예제

테이블의 모든 행을 채워 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 테이블의 모든 열을 항목으로 채워 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

테이블에 빈 공간이 없도록 모든 항목을 배치해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이제 행의 모든 빈 공간을 항목으로 채워 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: row dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

예제

이전 예제를 변경하여 항목이 열의 모든 빈 공간을 채우도록 해 봅시다:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-auto-flow: column dense;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

같이 보기

열과 행 속성의 단축 표기를 지정하는 grid 속성
암시적 그리드에서 행의 수와 너비를 지정하는 grid-auto-rows 속성
그리드에서 열의 수와 너비를 지정하는 grid-template-columns 속성
그리드에서 행의 수와 너비를 지정하는 grid-template-rows 속성