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:

css css flexbox flexbox three columns html

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

Latest

Remove an object item from array by ID in Javascript

How to reverse an array in Javascript without changing the original array?

Auto scroll to a specify element every time open webpage by Javascript

How to scroll to top every time React router change?

Get height or width of an element in Javascript

The way to separate logic code of the Vuejs component into smaller files

Related

Make smooth effect on hover for buttons, background, text... with CSS transitions

Create a sticky ad banner easily with CSS and Javascript

Create a Caro pattern background with HTML and CSS

Select only Odd or Even elements by CSS

Fix issue the scrollbar of an element has been hidden