Create three columns layout with the same width and height use CSS flexbox

Create a layout with 3 columns with the same width and height use CSS flexbox

Create HTML layout with 3 column like this:



Add a short piece of CSS code:

.wrapper {
	display: flex;
	flex-wrap: wrap;
}
.col {
	flex-grow: 1;
	width: 33%;
	height: 400px;
}
.left {
	background: #37d373;
}
.center {
	background: #ff4800;
}
.right {
	background: #06b2dd;
}


Finally, view your result in the browser:



© 2019 4codev

Created with love by Sil.