Responsive grid box with image automatically resize

前端未结

关注

 2  999

面向向阳花

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 ,

相关标签:

2条回答

天命终不由人

2021-01-25 00:49

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.

0 讨论(0)

离开以前

2021-01-25 00:56

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>

0 讨论(0)