Html Question posted in
Some basic documentation can be found here.

Html – How to implement flex layout by row/column with 3 elements for desktop/mobile

I need to implement different layouts for wide/mobile screens. Here is requirements:
Wide layout:

  • #1 element has stretch-width but 50% of #1+#2 (in a row with #2) (height may be lower or bigger than #2)
  • #2 element should be 50% width but max-width: 385px
  • #3 should be the same width as #1

For mobile it should be simple column in order 1-2-3 (100% width)

Here is wide layout sample:

Mobile layout:

It looks easy to implement wide layout by grouping #1 and #3 in one column and #2 in second using flex, but for mobile these 3 elements should be all separate for placing #3 below #2

I understand it’s possible to implement by rendering #2 element inside or outside #1, but is it possible to make it in other way? Using css/flex or by changing html structure from css?

Here is my flexbox try, the #3 element should have the same width as #1 (and #1 can be higher or lower than #2 btw)
https://jsfiddle.net/v16wxmg7/1/

<div class="wrapper">
  <div class="c1">
    <div class="e1">
      1
    </div>
  </div>
  <div class="c2">
    <div class="e2">
      2
    </div>
  </div>
  <div class="c3">
    <div class="e3">
      3
    </div>
  </div>
</div>

.wrapper {
  background-color: #eee;
  display: flex;
  flex-flow: row wrap;
  div {
    height: 40px;
    color: white;
  }
  @media screen and (max-width: 500px) {
    flex-direction: column;
  }
}
.c1 {
  background-color: #900;
  flex: 4 1 50%;
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
  }
}
.c2 {
  background-color: #090;
  flex: 4 1 50%;
  
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
  }
}
.c3 {
  background-color: #009;
  max-width: 180px;
  flex: 0 1 50%;
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
    max-width: none;
  }
}

.e1 {
  min-width: 200px;
}
.e2 {
  min-width: 150px;
}
.e3 {
  width: 300px;
}
Tags:

2

Answers


  1. 0 
    .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.e1 {
  background-color: #900;
  grid-column: 1 / 2;
  min-width: 200px;
}

.e2 {
  background-color: #090;
  max-width: 385px;
  grid-column: 2 / 3;
  min-width: 150px;
}

.e3 {
  background-color: #009;
  grid-column: 1 / 3;
  min-width: 200px;
}

@media screen and (max-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr;
  }

  .e1, .e2, .e3 {
    grid-column: 1 / 2;
    width: 100%;
  }
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
    <div class="e1">1</div>
    <div class="e2">2</div>
    <div class="e3">3</div>
  </div>
  <script src="script.js"></script>
</body>
</html>
    .wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.e1 {
  background-color: #900;
  flex: 1 1 calc(50% - 5px); /* 50% width minus half the gap */
  min-width: 200px;
}

.e2 {
  background-color: #090;
  flex: 1 1 calc(50% - 5px); /* 50% width minus half the gap */
  max-width: 385px;
  min-width: 150px;
}

.e3 {
  background-color: #009;
  flex: 1 1 100%; /* full width */
  min-width: 200px;
}

@media screen and (max-width: 500px) {
  .wrapper {
    flex-direction: column;
  }

  .e1, .e2, .e3 {
    flex: 1 1 100%; /* full width */
    max-width: none;
  }
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="wrapper">
    <div class="e1">1</div>
    <div class="e2">2</div>
    <div class="e3">3</div>
  </div>
  <script src="script.js"></script>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .wrapper {
      display: flex;
      flex-wrap: wrap;
      background-color: #eee;
    }

    .c1, .c2, .c3 {
      flex: 1 1 50%;
      background-color: #900;
      color: white;
      height: 40px;
      box-sizing: border-box;
    }

    .c2 {
      background-color: #090;
      max-width: 385px;
    }

    .c3 {
      background-color: #009;
    }

    @media screen and (max-width: 500px) {
      .wrapper {
        flex-direction: column;
      }

      .c1, .c2, .c3 {
        flex: 1 1 100%;
        max-width: none;
      }
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="c1">
      1
    </div>
    <div class="c2">
      2
    </div>
    <div class="c3">
      3
    </div>
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    I prefer grid for two-dimensional layouts.

    .wrapper {
  display: grid;
  grid-template-columns: auto;
  background-color: #eee;
  color: white;
}

.c1, .c2, .c3 {
  padding: 1em;
}

.c1 {
  background-color: #900;
}


.c2 {
  background-color: #090;
}

.c3 {
  background-color: #009;
}

@media screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: auto min(385px, 50%);
  }

  .c2 {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }
}
    <div class="wrapper">
  <div class="c1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
  </div>
  <div class="c2">
    Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>
  <div class="c3">
    Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.
  </div>
</div>

    After running this snippet, use the full page link to test the responsive behaviour.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search