All geek questions in one place

Adaptive image grid automatically resizes

Suppose I'm trying to get an almost similar result.

enter image description here

So, I am writing this code to get this kind of box. But the code is not complete. Check out 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 do this.

Here I have to do almost the same result. So please help create such a structure using css. Please, I will not display this layout only if the screen size is minimal - 766 pixels. If the screen size is less than 766 pixels, I will hide this layout using a media query. After creating this layout, I insert the images into this layout. Therefore, images should automatically fit into this layout.

+1
source share
2 answers

Flexbox, :

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>
Hide result
+1

CSS.

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%;
  }

, : " , , 756, , 1180 ". - .

+1

Source: https://habr.com/ru/post/1695053/

More articles:


All Articles