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

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

Convert HTML raw string to DOM Nodes in Javascript

Pass the value of only one argument that you don't want to change the value of the rest argument

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