CSS Grid izmantojot Flexbox

Tagad iemācīsimies izveidot grid izkārtojumu, izmantojot flexbox. Vispirms izvietosim flex elementus vairākās rindās, pa trim blokiem katrā rindā.

Lai to izdarītu, flex konteinerim iestatīsim platumu uz 300px un flex-wrap uz vērtību wrap, bet pēctečiem platumu uz 100px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Tagad pievienosim atstarpi starp mūsu blokiem horizontāli. Lai to izdarītu, palielināsim konteinera platumu, lai radītu papildu vietu atstarpēm.

Tā kā mums ir trīs bloki rindā, tas nozīmē, ka starp tiem ir divas atstarpes. Pieņemsim, ka mēs vēlamies, lai katra atstarpe būtu 10px plata. Tas nozīmē, ka konteinera platumu vajag palielināt par 20px, tas ir, izveidot ne 300px, bet 320px.

Tagad konteinerim iestatīsim justify-content uz vērtību space-between un iegūsim vēlamo atstarpi starp blokiem:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Tagad pievienosim tādu pašu atstarpi starp blokiem vertikāli. Lai to izdarītu, varam iestatīt īpašību align-content uz vērtību space-between.

Tomēr, lai tas darbotos, konteinerim jāiestata augstums, pretējā gadījumā align-content nedarbosies. Iestatīsim augstumu uz 320px. Šajā gadījumā mums tieši ietilps trīs rindas bloku, kuri ir 100px augsti, plus divas atstarpes starp rindām pa 10px.

Palaidīsim:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Viss darbojas lieliski, taču ir dažas problēmas, kuras apskatīsim nākamajā nodarbībā.