Creating Columns with <div> in HTML

Basic Two Column Layout (Using Flexbox)

<style>
  .row {
    display: flex;
  }
  .column {
    flex: 1;
    padding: 20px;
    border: 1px solid #ccc;
  }
</style>

<div class="row">
  <div class="column">
    <h2>Column 1</h2>
    <p>This is the first column.</p>
  </div>
  <div class="column">
    <h2>Column 2</h2>
    <p>This is the second column.</p>
  </div>
</div>
            

Three Column Layout Example

<style>
  .three-columns {
    display: flex;
    gap: 20px;
  }
  .three-columns .column {
    flex: 1;
    padding: 10px;
    background-color: #f3f3f3;
    border-radius: 8px;
  }
</style>

<div class="three-columns">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>
            

Tips

• Use flexbox for responsive and easy column layouts.
• Add gap or margin between columns for spacing.
• Set flex: 1 on each column to make them equal width.
• Use media queries to stack columns on smaller screens.