images aligning in Responsive layout

Question

This is my layout and I want to link each boxes to different link. I want this to be responsive page, so I sliced images to 4 different size images and created code like this:

<div style="width: 100%; clear: both; display: block; margin:0; padding: 0; border:0;">
  <div style="float: left; width:56%;">
    <img src="https://live.staticflickr.com/65535/51141286236_0353adecc9_h.jpg" style="width:100%" id="box1">
  </div>
  <div style="float: left; width:44%;">
    <img src="https://live.staticflickr.com/65535/51141496398_0e30d03c0f_h.jpg" style="width:100%" id="box2">
  </div>
</div>
<div style="width: 100%; clear: both; display: block; margin:0; padding: 0; border:0;">
  <div style="float: left; width:44%;">
    <img src="https://live.staticflickr.com/65535/51142387005_2d8153f7c9_h.jpg" style="width:100%" id="box3">
  </div>
  <div style="float: left; width:56%;">
    <img src="https://live.staticflickr.com/65535/51140609347_77e3ca38da_h.jpg" style="width:100%" id="box4">
  </div>
</div>

But when I run the page the line between box1 & 3 not matching depend on window size like screenshot I attached here. How can I fix this?

Answer 1

You can create the same layout you have using a grid layout. The middle div that would be the one with the light grey border would be the first div in your HTML and place it in the background, sort of like z-index would. Then place the other four divs on top, expanding their width and height in their grid-area rules.

You could create a 6 column grid by a 4 row grid. The middle two columns would be the offset to your layouts width. The first and last row/column would be the outer area beyond the grey outlined div. Then you fraction each column/row out according to your layout.

grid-template-columns: 1fr 3fr 1fr 1fr 3fr 1fr;
grid-template-rows: 0.6fr 2.4fr 2.4fr 0.6fr;

Then for say sec5, the middle section, you give it a grid-area: 2 / 2 / 4 / 6 = grid-row-start / grid-column-start / grid-row-end / grid-column-end

By placing the middle section first in the HTML, again it will sit behind the other four divs which would hold your images. For each of the sections 1 - 4 that hold the images, you make them position: relative; so you can place your images, with a class for styling relative to their parents, position: absolute. Then in your css you add rules for each section 1 - 4, ex. .sec1 .img left: X%, bottom X% depending on how you want it laid out.

So by adding a view port increment of say 95vw and 95vh to your parent elements grid-container each of the sections or fractions 1fr, 3fr etc... will dynamically spread over the page taking up their fraction of the page. So a 6 column layout with 1fr 3fr 1fr 1fr 3fr 1fr has 10 equal sections where each column will take up a percentage of the width of the 95vw. So 1fr 3fr 1fr 1fr 3fr 1fr basically is 10%, 30%, 10%, 10%, 30%, 10% this equals 100% of the grid-containers 95vw's width.

When you resize the page, it will keep the same layout no matter the size of the view ports width/height, making it dynamically scalable. No issues with borders mismatching or not lining up.

Example:

* {
  margin: 0;
  padding: 0;
}

#main {
  display: flex;
  justify-content: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1fr 1fr 1.8fr 1.2fr;
  grid-template-rows: 0.6fr 2.4fr 2.4fr 0.6fr;
  gap: 0px 0px;
  width: 95vw;
  height: 95vw;
  display: relative;
}

.sec5 {
  grid-area: 2 / 2 / 4 / 6;
  border: solid 1px #ccc;
  position: relative;
  z-index;
  -1;
}

.sec1 {
  grid-area: 1 / 1 / 3 / 5;
  border: purple 2px solid;
  position: relative;
}

.sec2 {
  grid-area: 1 / 5 / 3 / 7;
  border: purple 2px solid;
  position: relative;
}

.sec4 {
  grid-area: 3 / 3 / 5 / 7;
  border: purple 2px solid;
  position: relative;
}

.sec3 {
  grid-area: 3 / 1 / 5 / 3;
  border: purple 2px solid;
  position: relative;
}

.sec1 .img {
  position: absolute;
  width: 78%;
  height: 60%;
  right: 3%;
  bottom: 3%;
}

.sec2 .img {
  background: black;
  position: absolute;
  width: 65%;
  height: 60%;
  top: 15%;
  left: 2%;
}

.sec3 .img {
  background: black;
  position: absolute;
  width: 65%;
  height: 60%;
  bottom: 15%;
  right: 3%;
}

.sec4 .img {
  position: absolute;
  width: 78%;
  height: 60%;
  top: 3%;
  left: 2%;
}

<div id="main">
  <div class="grid-container">
    <div class="sec5">
    </div>
    <div class="sec1">
      <img class="img" src="https://www.bensound.com/bensound-img/deepblue.jpg" />
    </div>
    <div class="sec2">
      <img class="img" src="https://i.pinimg.com/originals/41/c8/df/41c8df73c7bf3429ad9931fda3ebe3b5.jpg" />
    </div>
    <div class="sec3">
      <img class="img" src="https://40.media.tumblr.com/10f182acdaf8bcf669fb6d2bf4e87f63/tumblr_nt72vk7d031txi013o5_250.jpg" />
    </div>
    <div class="sec4">
      <img class="img" src="http://www.clker.com/cliparts/1/8/3/8/1357863457910989673bigstock-best-internet-concept-of-globa-15990878[3]-md.png" />
    </div>
  </div>
</div>