Tiles with auto width blocks in CSS

In the previous lesson, in our tile it turned out that the width of the elements and their indents in total should give the width of the parent. This is a bit non-universal. Let's make it so that the elements automatically adjust to the width of the parent.

Let's say we have a parent like this:

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

Let the elements of this tile stand in 4 blocks in a row:

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

Let's set the width of our blocks so that each of them takes up a quarter of the parent. To do this, set their size to 25%:

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

Set the width of the blocks in percentage so that there are three blocks in a row in the tile.

Set the width of the blocks in percentage so that the tile has two blocks in a row.

Set the width of the blocks in percentage so that there is one block per row in the tile.