How to Add Columns to a Page or a Post

• 2 Columns
• 3 Columns
• 4 Columns

2 Columns

Chocolate bar tootsie roll tiramisu biscuit muffin brownie. Marzipan I love topping I love jelly toffee jelly beans danish. Marshmallow lollipop pie cheesecake soufflé pastry chocolate bear claw. Halvah sesame snaps jelly-o tiramisu cotton candy toffee cake. Pie toffee sugar plum dragée chocolate bar ice cream marzipan.

2 Columns: CSS

Go to Theme > Customize > Advanced > Add CSS and add this:
.columns-2 {
width: 100%;
display: table;
}
.columns-2 .col1 {
width: 50%;
display: table-cell;
vertical-align: middle;
padding: 0 20px 0 0;
}
.columns-2 .col2 {
width: 50%;
display: table-cell;
vertical-align: middle;
padding: 0 0 0 20px;
}
.columns-2 img {
width: 100%;
height: auto;
}
@media screen and (max-width: 700px) {
.columns-2 {
display: block;
}
.columns-2 .col1,
.columns-2 .col2 {
width: 100%;
display: block;
padding: 0;
margin: 0 0 20px;
}
}

2 Columns: HTML

Open your post/page in the editor, click on HTML (next to Compose) and add this: <div class="columns-2">
<div class="col1">Left column content</div>
<div class="col2">Right column content</div>
</div> Replace Left column content and Right column content with your own text and images.

3 Columns

Chocolate bar tootsie roll tiramisu biscuit muffin brownie. Marzipan I love topping I love jelly toffee jelly beans danish. Marshmallow lollipop pie cheesecake soufflé pastry chocolate bear claw.

Chocolate bar tootsie roll tiramisu biscuit muffin brownie. Marzipan I love topping I love jelly toffee jelly beans danish. Marshmallow lollipop pie cheesecake soufflé pastry chocolate bear claw.

3 Columns: CSS

Go to Theme > Customize > Advanced > Add CSS and add this:
.columns-3 {
width: 100%;
display: table;
}
.columns-3 .col1 {
width: 33.33%;
display: table-cell;
vertical-align: middle;
padding: 0 10px 0 0;
}
.columns-3 .col2 {
width: 33.33%;
display: table-cell;
vertical-align: middle;
padding: 0 20px;
}
.columns-3 .col3 {
width: 33.33%;
display: table-cell;
vertical-align: middle;
padding: 0 0 0 10px;
}
.columns-3 img {
width: 100%;
height: auto;
}
@media screen and (max-width: 700px) {
.columns-3 {
display: block;
}
.columns-3 .col1,
.columns-3 .col2,
.columns-3 .col3 {
width: 100%;
display: block;
padding: 0;
margin: 0 0 20px;
}
}

3 Columns: HTML

Open your post/page in the editor, click on HTML (next to Compose) and add this: <div class="columns-3">
<div class="col1">Left column content</div>
<div class="col2">Centre column content</div>
<div class="col3">Right column content</div>
</div> Replace Left column content, Centre column content and Right column content with your own text and images.

4 Columns

Chocolate bar tootsie roll tiramisu biscuit muffin brownie. Marzipan I love topping I love jelly toffee jelly beans danish. Marshmallow lollipop pie cheesecake soufflé pastry chocolate bear claw.

Chocolate bar tootsie roll tiramisu biscuit muffin brownie. Marzipan I love topping I love jelly toffee jelly beans danish. Marshmallow lollipop pie cheesecake soufflé pastry chocolate bear claw.

Chocolate bar tootsie roll tiramisu biscuit muffin brownie. Marzipan I love topping I love jelly toffee jelly beans danish. Marshmallow lollipop pie cheesecake soufflé pastry chocolate bear claw.

Chocolate bar tootsie roll tiramisu biscuit muffin brownie. Marzipan I love topping I love jelly toffee jelly beans danish. Marshmallow lollipop pie cheesecake soufflé pastry chocolate bear claw.

4 Columns: CSS

Go to Theme > Customize > Advanced > Add CSS and add this:
.columns-4 {
width: 100%;
display: table;
}
.col-top {
width: 50%;
display: table-cell;
vertical-align: middle;
padding: 0 15px 0 0;
}
.col-bottom {
width: 50%;
display: table-cell;
vertical-align: middle;
padding: 0 0 0 15px;
}
.columns-4 .col1 {
width: 25%;
display: table-cell;
vertical-align: middle;
padding: 0 15px 0 0;
}
.columns-4 .col2 {
width: 25%;
display: table-cell;
vertical-align: middle;
padding: 0 0 0 15px;
}
.columns-4 .col3 {
width: 25%;
display: table-cell;
vertical-align: middle;
padding: 0 15px 0 0;
}
.columns-4 .col4 {
width: 25%;
display: table-cell;
vertical-align: middle;
padding: 0 0 0 15px;
}
.columns-4 img {
width: 100%;
height: auto;
}
@media screen and (max-width: 850px) {
.columns-4 {
display: block;
}
.columns-4 .col-top,
.columns-4 .col-bottom {
width: 100%;
display: block;
padding: 0;
}
.columns-4 .col-top {
margin: 0 0 20px;
}
.columns-4 .col1,
.columns-4 .col2 {
width: 50%;
}
.columns-4 .col3,
.columns-4 .col4 {
width: 50%;
}
}
@media screen and (max-width: 500px) {
.columns-4 {
display: block;
}
.columns-4 .col1,
.columns-4 .col2,
.columns-4 .col3,
.columns-4 .col4 {
width: 100%;
display: block;
padding: 0;
margin: 0 0 20px;
}
}

4 Columns: HTML

Open your post/page in the editor, click on HTML (next to Compose) and add this: <div class="columns-4">
<div class="col-top">
<div class="col1">First column content</div>
<div class="col2">Second column content</div>
</div>
<div class="col-bottom">
<div class="col3">Third column content</div>
<div class="col4">Fourth column content</div>
</div>
</div> Replace First column content, Second column content, Third column content and Fourth column content with your own text and images.