Adaptyvi plytelė be tarpų CSS

Sukurkime plytelę, kuri turės skirtingą blokų skaičių eilėje, priklausomai nuo ekrano pločio. Štai pavyzdys, koks rezultatas turėtų gautis:

Pirmiausia parašykime HTML kodą:

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

Dabar pridėkime stilius blokų tėviniui elementui:

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

Dabar nustatykime stilius pačiems blokams, nenustatydami jų pločio:

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

Akivaizdu, kad blokų plotis turi būti procentais, kad keičiantis ekranui blokai sklandžiai keistų savo plotį. Tuo pačiu metu tam tikruose ekrano pločio taškuose mes turime keisti blokų plotį taip, kad eilutėje tilptų tam tikras šių blokų kiekis.

Parašykime kodą, kuris pastatys keturis blokus eilėje:

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

Dabar pastatykime tris blokus eilėje:

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

Dabar pastatykime du blokus eilėje:

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

Vienas blokas eilėje:

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

Sukonkretinkime visą kodą:

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

Pakeiskite mano kodą taip, kad blokų plotis būtų skaičiuojamas naudojant funkciją calc.

Sukurkite plytelę, kuri, mažėjant ekranui, pirmiausia turės keturis elementus eilėje, po to du elementus eilėje, o po to vieną elementą eilėje.

Sukurkite plytelę, kuri, mažėjant ekranui, pirmiausia turės šešis elementus eilėje, po to tris elementus eilėje, o po to vieną elementą eilėje.