Laatoitus automaattisella lohkojen leveydellä CSS:llä

Edellisessä oppitunnissa laatoituksessamme tuli niin, että elementtien leveyden ja niiden marginaalien piti yhteensä antaa vanhemman leveys. Tämä ei ole kovin universaalia. Tehdään niin, että elementit sopeutuvat automaattisesti vanhemman leveyteen.

Oletetaan, että meillä on tällainen vanhempi:

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

Oletetaan, että tämän laatoituksen elementit ovat 4 lohkoa per rivi:

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

Asetetaan lohkojemme leveys niin, että jokainen niistä vie neljänneksen vanhemmasta. Tätä varten asetamme niiden koon 25%:

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

Aseta lohkoille leveys prosentteina niin, että laatoituksessa on kolme lohkoa per rivi.

Aseta lohkoille leveys prosentteina niin, että laatoituksessa on kaksi lohkoa per rivi.

Aseta lohkoille leveys prosentteina niin, että laatoituksessa on yksi lohko per rivi.