Aanpasbare teëls sonder spasies in CSS

Kom ons maak 'n teëls wat 'n verskillende aantal blokke per ry sal hê, afhangende van die skermwydte. Hier is 'n voorbeeld van wat ons moet kry:

Kom ons skryf eers die HTML-kode:

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

Kom ons voeg nou style vir die ouer van die blokke by:

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

Laat ons nou style vir die blokke self instel, sonder om hul wydte te spesifiseer:

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

Dit is duidelik dat die wydte van die blokke in persentasies moet wees, sodat die blokke glad van wydte verander wanneer die skerm verander. Op sekere skermbreukpunte moet ons die wydte van die blokke verander sodat 'n sekere aantal van hierdie blokke in 'n ry pas.

Kom ons skryf kode wat vier blokke in 'n ry sal plaas:

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

En nou plaas ons drie blokke in 'n ry:

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

En nou plaas ons twee blokke in 'n ry:

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

Een blok in 'n ry:

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

Kom ons bring al die kode bymekaar:

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

Herskep my kode sodat die wydte van die blokke bereken word deur die calc funksie.

Maak 'n teëls wat, wanneer die skerm verklein word, eers vier elemente in 'n ry sal hê, dan twee elemente in 'n ry, en dan een element in 'n ry.

Maak 'n teëls wat, wanneer die skerm verklein word, eers ses elemente in 'n ry sal hê, dan drie elemente in 'n ry, en dan een element in 'n ry.