Responsive grid box with image automatically resize

Question

assume I try to get almost similar kind of result.

So i write this code to get this this kind of box . But the code is not complete Please see my code ,

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

     <style>
      .row{
        width:90%;
        margin-left:5%;
        margin-right:5%;
     }

    .hig-co{
     width:66.6677% !important;
     max-width:66.667% !important;
     min-width:66.667% !important;
    }
     .sm-co{
       width:33.333% !important;
       max-width:33.333% !important;
       min-width:33.333% !important;
     }
     .hig-all{
       width:95%;

    }
     </style>


    <div class="container">
      <div class="row">

       <div class="all">

          <div class="hig-co">
            <div class="hig-all">
             <img src="#" />
            </div>

             <div class="hig-all">
                <div class="col-md-4 col-sm-4">
                 <img src="#">
                </div>
                <div class="sm-co">
                 <img src="#">
                </div>
            </div>

          </div>

          <div class="col-md-3 col-sm-12 sm-co">

            <div class="col-md-12 col-sm-12"><img src="#"></div>
            <div class="col-md-12 col-sm-12"><img src="#"></div>
            <div class="col-md-12 col-sm-12"><img src="#"></div>

          </div>
      </div>
     </div>
    </div>

    </body>
    </html>

Please help to complete this .

Here I have to make almost same kind of result. So Please help to make this kind of structure using css . Please not i will display this layout only if screen size min width is 766px. If the screen size less than 766px i will hide this layout using media query . After making this layout i will insert images to this layout . So images need automatically fit in this layout .

One easy way to accomplish this is to use background-size: cover; developer.mozilla.org/en-US/docs/Web/CSS/… — CMartins
– CMartins, Commented Apr 5, 2018 at 11:59
Your question is not very clear. Are you trying to show and hide some items based on screen width? — Twisty
– Twisty, Commented Apr 8, 2018 at 6:51
only i have to make html box like that image using div . And inside this div i will place image . Actually my question is how to make the html structure like that image — Abilash Erikson
– Abilash Erikson, Commented Apr 8, 2018 at 6:57

Temani Afif · Accepted Answer · 2018-04-08 08:18:08Z

2

+50

Here is a simple solution using Flexbox where you can easily adjust the different sizes:

body {
  margin: 0;
}
* {
 box-sizing:border-box;
}
div {
  border:1px solid #fff;
}

.container {
  display: flex;
  height: 100vh;
}

.left {
  flex: 3;
  display:flex;
  flex-wrap:wrap;
}
.left > div:nth-child(1) {
  width:100%;
  height:40%;
  background:red;
}
.left > div:nth-child(2) {
  width:33%;
  height:60%;
  background:red;
}
.left > div:nth-child(3) {
  flex:1;
  background:blue;
}

.right {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.right > div:nth-child(1),.right > div:nth-child(3) {
  height:25%;
  background:red;
}
.right > div:nth-child(2) {
  flex:1;
  background:blue;
}

<div class="container">
  <div class="left">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="right">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

answered Apr 8, 2018 at 8:18

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abilash Erikson Over a year ago

could you please make an jsfiddle example with real div's and images .

Temani Afif Over a year ago

@abilasher here is : jsfiddle.net/0fa5kj1p/3 also better rely on background image like i did so it's easy to handle

Abilash Erikson Over a year ago

than you friend .

Christiaan Fourie · Accepted Answer · 2018-04-05 16:22:21Z

I have a great solution with CSS Grids..

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>CSS Grid Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="stylesheet.css">

    </head>
    <body>

        <div class="container">

            <section>
                <header>
                    <img src="demo.jpg" alt="">
                </header>
                <div class="left-left">
                    <img src="demo.jpeg" alt="">
                </div>
                <div class="left-right">
                    <img src="demo.jpg" alt="">
                </div>
            </section>
            <aside>
                <div class="right-top">
                    <img src="demo.jpeg" alt="">
                </div>
                <div class="right-middle">
                    <img src="demo.jpeg" alt="">
                </div>
                <div class="right-bottom">
                    <img src="demo.jpeg" alt="">
                </div>
            </aside>
        </div>
    </body>
</html>

CSS:

 .container {
    display: grid;
    grid-template-columns: 66.667% 33.333%;
    grid-template-areas:
      "section aside";
  }
  section {
      grid-area: section;
      display: grid;
      grid-template-columns: 42% 58%;
      grid-template-rows: 281px 501px;
      grid-template-areas:
        "header header"
        "left-left left-right"
  }
      header {
          grid-area: header;
      }
      .left-left {
          grid-area: left-left;
      }
      .left-right {
          grid-area: left-right;
      }

  aside {
      grid-area: aside;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 150px 480px 1fr;
      grid-template-areas:
        "right-top"
        "right-middle"
        "right-bottom";
  }
      .right-top {
          grid-area: right-top;
      }
      .right-middle {
          grid-area: right-middle;
      }
      .right-bottom {
          grid-area: right-bottom;
      }
  img {
    width: 100%;
    height: 100%;
  }

I'm not entirely sure what you meant with "And the thin if our screen size less than this 756 then we will hide this and the maximum width of the container is 1180 px." but a simple media query would definitely do the trick here.

Collectives™ on Stack Overflow

Responsive grid box with image automatically resize

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related