თვისება 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,
რომელიც აზუსტებს რიგების რაოდენობას და სიგანეს გრიდში