Fluid grid layout

Question

I am creating a form. In the form I have 20+ html controls i.e. textboxes, checkboxes, textarea. I want to arrange all the html elements in a table format. But when the screen sizes is reduces the number of column should get reduced. example. Initially there will be 4 columns. when screen size reduces no of columns becomes 3. on further screen size reduction no of columns becomes 2 and then to 1.

How this can be achieved?

[Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/introduction/) is the answer, specifically [Bootrap Grid](https://getbootstrap.com/docs/4.0/layout/grid/)'s. Be aware when implementing this for IE11 - this won't work, but here is the fix: [Bootstrap 4 IE 11 Fix](https://stackoverflow.com/a/51249026/11700321) — EGC, Nov 05 '19 at 03:32

Vishal · Accepted Answer · 2019-11-05T05:20:14.957

Use Flexbox Layout to design flexible responsive layout structure:

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Responsive layout - makes a two column-layout (50%/50% split) */
@media screen and (min-width: 600px) {
  .row > .column {    
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes a four column-layout (25%/25% split) */
@media screen and (min-width: 991px) {
  .row > .column {    
    flex: 0 0 25%;
    max-width: 25%;
  }
}

<p>Resize this frame to see the responsive effect!</p>

<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
  <!-- Fourth Column -->
  <div class="column" style="background-color: #28a745;">
    <h2>Column 4</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
</div>

Reference: Create a Mixed Column Layout

Fluid grid layout

1 Answers1