Rrjeti i blloqeve me gjerësi automatike në CSS

Në mësimin e mëparshëm, në rrjetin tonë rezultoi që gjerësia e elementeve dhe hapësirat e tyre duhet të mblidheshin për të dhënë gjerësinë e elementit prind. Kjo është pak jo universale. Le ta bëjmë që elementet të përshtaten automatikisht në gjerësinë e prindit.

Le të themi se kemi këtë element prind:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Le të themi se elementët e këtij rrjeti janë 4 blloqe në një rresht:

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

Le të caktojmë gjerësinë e blloqeve tona në mënyrë që secili prej tyre të zërë një të katërtën e prindit. Për këtë le të vendosim madhësinë e tyre në 25%:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Caktoni blloqeve një gjerësi në përqindje në mënyrë që të ketë tre blloqe në një rresht në rrjet.

Caktoni blloqeve një gjerësi në përqindje në mënyrë që të ketë dy blloqe në një rresht në rrjet.

Caktoni blloqeve një gjerësi në përqindje në mënyrë që të ketë një bllok në një rresht në rrjet.