Saturday, June 3, 2023
HomeSoftware EngineeringHow you can Flex Grid 2 Columns utilizing CSS

How you can Flex Grid 2 Columns utilizing CSS


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

Step 1 – Set your HTML template

Create some HTML with this structure.

<div class="Mother or father">
  <div class="child1">
      <h1>Left</h1>
  </div>
  <div class="child2">
      <h1>RIGHT</h1>
  </div>
</div>

Step 2 – Container Div

Create a Mother or father div that makes use of the Flexbox show mannequin.

.Mother or father {
  show: flex;
  flex-direction: row;
}

Step 3 – Youngster Divs

Create two (2) divs which are each 50% of the dad or mum container.

Under we set the peak to 100% of the viewport top.

.child1 {
  width: 50%;
  top: 100vh;
  background-color: inexperienced;
}

.child2 {
  width: 50%;
  top: 100vh;
  background-color: purple;
}

Step 4 – Some gotchas to concentrate on

You must also set the padding and margin to “ to ensure there isn’t any overlap.

.physique {
  padding: 0;
  margin: 0;
}

It is usually good observe to set the border-box as follows:

box-sizing: border-box;

general approach to set these are as follows:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments