Rrjetë Pjeksore Pa Hapësira në CSS

Le të krijojmë një rrjetë pjeksore që do të ketë numër të ndryshëm të blloqeve në rresht në varësi të gjerësisë së ekranit. Ja një shembull i asaj që duhet të marrim:

Le të shkruajmë fillimisht kodin HTML:

<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 class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Tani le t'i shtojmë stilet prindit të blloqeve:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Tani le t'u caktojmë stilet vetë blloqeve, pa u caktuar atyre gjerësi:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

Është e qartë se gjerësia e blloqeve duhet të jetë në përqindje, në mënyrë që kur ekrani ndryshon, blloqet të ndryshojnë pa probleme gjerësinë e tyre. Në të njëjtën kohë, në pika të caktuara të ekranit ne duhet të ndryshojmë gjerësinë e blloqeve në mënyrë që në një rresht të vendoset një numër i caktuar i këtyre blloqeve.

Le të shkruajmë kodin, i cili do të vendosë katër blloqe në një rresht:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Tani le të vendosim tre blloqe në një rresht:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Tani le të vendosim dy blloqe në një rresht:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

Një bllok në rresht:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Le të mbledhim të gjithë kodin së bashku:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Riktheni kodin tim në mënyrë që gjerësia e blloqeve të llogaritet përmes funksionit calc.

Krijoni një rrjetë pjeksore që kur ekrani zvogëlohet së pari të ketë katër elemente në rresht, pastaj dy elemente në rresht, dhe më pas një element në rresht.

Krijoni një rrjetë pjeksore që kur ekrani zvogëlohet së pari të ketë gjashtë elemente në rresht, pastaj tre elemente në rresht, dhe më pas një element në rresht.