Vetia grid-auto-flow

Vetia grid-auto-flow përcakton vendosjen automatike të elementeve në rrjet. Mund të ketë vlerat row - mbush rreshtat me elemente, column - kolonat, dense - vendos elementet në të gjitha vendet bosh në rrjet; row dense - rregullon elementet, duke mbushur çdo rresht dhe të gjitha vendet e lira të rrjetit; column dense - mbush kolonat me elemente dhe të gjithë hapësirën e lirë në rrjet.

Sintaksa

përzgjedhësi {
	grid-auto-flow: pjesa e mbushur e rrjetit;
}

Shembull

Le të mbushim të gjitha rreshtat në tabelë:

<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;
}

Shembull

Tani le të mbushim të gjitha kolonat në tabelë me elemente:

<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;
}

Shembull

Le të vendosim të gjithë elementët në tabelë, në mënyrë që të mos ketë vend bosh:

<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;
}

Shembull

Tani le të mbushim të gjithë vendin e lirë në rreshta me elemente:

<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;
}

Shembull

Le të ndryshojmë shembullin e mëparshëm, në mënyrë që elementët të mbushin të gjithë vendin e lirë në kolona:

<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;
}

Shihni gjithashtu

vetia grid,
e cila përcakton shënimin e shkurtuar të vetive të kolonave dhe rreshtave
vetia grid-auto-rows,
e cila përcakton numrin dhe gjerësinë e rreshtave në rrjetin e nënkuptuar
vetia grid-template-columns,
e cila përcakton numrin dhe gjerësinë e kolonave në rrjet
vetia grid-template-rows,
e cila përcakton numrin dhe gjerësinë e rreshtave në rrjet