Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to fill gaps using CSS GRID, on image uploading from PHP,

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #283810
    Rad
    Participant

    Hi i would like to know if there is some kind of code that will automatically fill up the gap especially the height of every post I made from php code. here is the code i use to grid all the images that i upload.

    .ImageHolder{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    /* grid-template-rows: repeat(1,minmax(10%,10%)); */
    grid-gap: 1px 1px;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    }

    .ImageHolder img{
    width: 95%;
    height: auto;
    background-size: 100%;
    background-position: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    #283811
    Rad
    Participant

    this is the code where the images get post,.

    <

    div class=”ImageHolder”>
    <?php
    $db = mysqli_connect('localhost',"root","","raddesignsdb");
    $sql = "SELECT * FROM mga_litrato";
    $result = mysqli_query($db, $sql);
    while ($row = mysqli_fetch_array($result)){
    //Image
    echo "

    “;
    echo “
    “;
    /*echo “

    “.$row[‘image_text’].”

    “;*/
    echo “

    “;
    }
    ?>

    #283812
    Paulie_D
    Member

    It’s not clear what the problem is.

    Can you demonstrate it?

    It sounds as though you are trying to acheive a “masonry” layout and not even CSS-Grid can do that although it can get you a long way.

    https://stackoverflow.com/questions/44377343/css-only-masonry-layout

    #283881
    Rad
    Participant

    yes, some kind of masonry grid whenever i post using php, i tried to look remedies like max height but it seems it won’t work in my case, i think.

    here is the like where i upload the images and text form of my php/html and the css grid code i used.
    https://drive.google.com/open?id=1z5GXqOiwdH7bmlLdcJp9BFCZWUzH-ks1

    Thank you very much

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.