I am trying to create grid like image given below

Question

How can i add patch to image in grid. and how can I change size of grid images. I am making it mobile friendly. It should be mobile responsive.

   <!DOCTYPE html>
    <html>
    <style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }

    .header {
        text-align: center;
        padding: 32px;
    }

    .row {
        display: -ms-flexbox; /* IE 10 */
        display: flex;
        -ms-flex-wrap: wrap; /* IE 10 */
        flex-wrap: wrap;
        padding: 0 4px;
    }

    /* Create two equal columns that sits next to each other */
    .column {
        -ms-flex: 50%; /* IE 10 */
        flex: 50%;
        padding: 0 8px;
    }

    .column img {
        margin-top: 7px;
        vertical-align: middle;
        border-radius: 5%;
    }

    </style>
    <body>

    <!-- Header -->
    <div class="header" id="myHeader">
      <h1>Image Grid</h1>
      <p>Click on the buttons to change the grid view.</p>
    </div>

    <!-- Photo Grid -->
    <div class="row"> 
      <div class="column">
        <img src="character.jpg" style="width:100%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:100%">
        <img src="character.jpg" style="width:100%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:100%">
      </div>
      <div class="column">
        <img src="lover_name.jpg" style="width:100%">
        <img src="character.jpg" style="width:100%">
        <img src="http://www.quickmeme.com/img/66/66e01f5ecd44767a19bb8e9a0f3e97da92a660048860eef482c6c2b66871f4a1.jpg" style="width:100%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:100%">
      </div>  
    </div>

    <script>
    // Get the elements with class="column"
    var elements = document.getElementsByClassName("column");

    // Declare a loop variable
    var i;

    // Add active class to the current button (highlight it)
    var header = document.getElementById("myHeader");
    var btns = header.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace(" active", "");
        this.className += " active";
      });
    }
    </script>

    </body>
    </html>

I am trying to create grid like image given below. I am also trying to add patch to given image. How can i change size of each image in grid view. It should be mobile responsive to make it work with any screen.

I think it’s easier to use a Grid system like the one in Bootstrap, or any one you like, it should let you add the images in rows, and it’ll take care of the resizing upon screen change. — Ahmed Hammad, Dec 07 '18 at 12:44
What should the image sizes be? and what do you mean by patch? — Jose Guerra, Dec 07 '18 at 12:53
size just little increased. patch means trending like in image. — user1863472, Dec 07 '18 at 12:55
You can use boostrap, here is the ref. for your goal - https://getbootstrap.com/docs/4.1/content/images/ — Tushar Walzade, Dec 07 '18 at 14:19
Refer answers to this similar question - https://stackoverflow.com/questions/15458650/make-an-image-responsive-simplest-way — Tushar Walzade, Dec 07 '18 at 14:26

score 0 · Answer 1 · answered Dec 07 '18 at 13:01

Try this instead:

<!-- Photo Grid -->
    <div class="row" style=“width:100%”> 
      <div class="column" style="width:50%">
        <img src="character.jpg" style="width:25%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:25%">
        <img src="character.jpg" style="width:25%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:25%">
      </div>
      <div class="column" style="width:50%">
        <img src="lover_name.jpg" style="width:25%">
        <img src="character.jpg" style="width:25%">
        <img src="http://www.quickmeme.com/img/66/66e01f5ecd44767a19bb8e9a0f3e97da92a660048860eef482c6c2b66871f4a1.jpg" style="width:25%">
        <img src="https://d2pu2bk1b66iw6.cloudfront.net/photos/2014/08/01/6-74677-mm_babymeme3-1406927575.jpg" style="width:25%">
      </div>  
    </div>

Consider editing those percentages a little if you are willing to add margins or padding.

I am trying to create grid like image given below

1 Answers1