Skip to content

How to Flex Grid 2 Columns using CSS

If you would like to flex grid 2 columns in CSS then you need three (3) divs.

Step 1 – Set your HTML template

Create some HTML with this layout.

<div class="Parent"> <div class="child1"> <h1>Left</h1> </div> <div class="child2"> <h1>RIGHT</h1> </div> </div>
Code language: HTML, XML (xml)

Step 2 – Container Div

Create a Parent div that uses the Flexbox display model.

.Parent { display: flex; flex-direction: row; }
Code language: CSS (css)

Step 3 – Child Divs

Create two (2) divs that are both 50% of the parent container.

Below we set the height to 100% of the viewport height.

.child1 { width: 50%; height: 100vh; background-color: green; } .child2 { width: 50%; height: 100vh; background-color: red; }
Code language: CSS (css)

Step 4 – Some gotchas to be aware of

You should also set the padding and margin to to make sure there is no overlap.

.body { padding: ; margin: ; }
Code language: CSS (css)

It is also good practice to set the border-box as follows:

box-sizing: border-box;
Code language: CSS (css)

A good overall way to set these are as follows:

* { box-sizing: border-box; padding: ; margin: ; }
Code language: CSS (css)

See also  Need more than hover?
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x