CODEWITHSUNDEEP
htmlcssresponsive-designmultiple-columns
Maestro Vladimir
Maestro Vladimir

Reputation: 1196

How to create a 3-column responsive layout?

I have a 3 column layout. When access it from desktop, it shows like this:

-------------------------------------------
| columnleft | columncenter | columnright |
-------------------------------------------

I want it to be like this when view it from mobile / tablet / resize browser: 

----------------
| columnleft   |
----------------
| columncenter |
----------------
| columnright  |
----------------

My sample below, and here is the JSFiddle.

<style>
    .column-left{ float: left; width: 33%; }
    .column-right{ float: right; width: 33%; }
    .column-center{ display: inline-block; width: 33%; }
</style>
<div class="container">
    <div class="column-left">Column left</div>
    <div class="column-center">Column center</div>
    <div class="column-right">Column right</div>
</div>

Upvotes: 15

Views: 49967

Answers (2)

Stickers
Stickers

Reputation: 78686

There are many ways to do it. First, you need to make the divs to display as columns for large screens, then use media queries to change them to rows for medium/small screens.

HTML for all:

<div class="container">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
</div>

1. Flexbox:

JSFiddle

.container {
  display: flex;
}

.section {
  flex: 1; /*grow*/
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    flex-direction: column;
  }
}

2. Float:

JSFiddle

.container:after { /*clear float*/
  content: "";
  display: table;
  clear: both;
}

.section {
  float: left;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    float: none;
    width: auto;
  }
}

3. Inline block:

JSFiddle

.container {
  font-size: 0; /*remove white space*/
}

.section {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: top;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
    width: auto;
  }
}

4. CSS table:

JSFiddle

.container {
  display: table;
  table-layout: fixed; /*euqal column width*/
  width: 100%;
}

.section {
  display: table-cell;
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
  }
}

5. CSS grid:

JSFiddle

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*fraction*/
}

.section {
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    grid-template-columns: none;
  }
}

Upvotes: 38

Ashot Khanamiryan
Ashot Khanamiryan

Reputation: 1134

It will work for you.

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

@media screen and (max-width: 960px) {
    .column-left{ float: none; width: 100%; }
    .column-right{ float: none; width: 100%; }
    .column-center{ display: block; width: 100%; }
}

Upvotes: 5

Related Questions