Responsive placement of Grid on a photo

user_5518857 0
Viewed 31

I have designed like the photo below in mobile mode, but because I want it to be responsive, I used grid and flex-box, but according to the sample photo, I could not place the components. enter image description here

1- By placing a photo, the layout of the page is ruined. enter image description here

2- I tried putting the grid on the whole picture but failed.
3- I also made the colored boxes with flex.
4- Once, I put the photo in the CSS file using the background: URL() command, which improved its layout, but the problem was that I wanted the button and these colored boxes to be placed a little lower than the photo, but all the changes were only It was done in the background photo range and I could not change their location with the position. enter image description here

  • Tell me what method should I use to implement this example so that it becomes responsive much more easily.
<style>
    .grid--1×2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .pos--relative {
      position: relative;
    }

    .pos--absolute {
      position: absolute;
    }

    .side__box-time {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .box {
      border: 1px solid black;
    }

    .box--green {
      background: green;
    }

    .box--blue {
      background: blue;
    }

    .box--yellow {
      background: yellow;
    }

    .container-flex {
      display: flex;
      flex-direction: column;
    }

    .btn {
      border: 1px solid black;
      background: black;
      color: white;
      padding: 6px;
      bottom: 0;
    }

   .img {
        width: 100%;
   }
  </style>
</head>

<body>
  <div class="grid--1×2 pos--relative">
    <img src="images/sandwich.jpg" class="img" alt="" />

    <!--Empty cell-->
    <div class="pos--reletive"></div>

    <div class="container-flex">
      <div class="box box--green">First Box</div>
      <div class="box box--yellow">Second Box</div>
      <div class="box box--blue">third Box</div>
    </div>

    <a class="btn pos--absolute" href="#">FULL RECIPE</a>
  </div>
</body>
flexbox responsive grid css html
1 Answers

enter image description here

:root {
  /* change this values to make it more custum */
  --height: 500px;
  --width-childs: 40%;
  --outside-value: 1rem;
  --image-url: url("https://picsum.photos/1000")
}

.body-full {
  height: 100vh;
  margin: 0;
}

.centered {
  display: grid;
  place-items: center;
}

.pos--relative {
  position: relative;
}

.pos--absolute {
  position: absolute;
}

.container {
  height: var(--height);
  width: var(--height);
}

.bg-image {
  background-image: var(--image-url);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.right-childs {
  display: grid;
  height: calc(100% + var(--outside-value));
  width: var(--width-childs);
  right: 0;
}

.outside-position {
  --negative-outside-position: calc(var(--outside-value) * -1);
  position: absolute;
  bottom: var(--negative-outside-position);
  left: var(--negative-outside-position);
}

.box--green {
  background: green;
}

.box--blue {
  background: blue;
}

.box--yellow {
  background: yellow;
}

.btn {
  border: 1px solid black;
  background: black;
  color: white;
  padding: 6px;
}
<body class="body-full centered">
  <div class="container pos--relative bg-image">

    <div class="right-childs pos--absolute">
      <div class="box box--green centered">First Box</div>
      <div class="box box--blue centered">Second Box</div>
      <div class="box box--yellow centered">third Box</div>
    </div>

    <a class="btn outside-position" href="#">FULL RECIPE</a>
  </div>
</body>

user_177168370
Related