Creating Pinterest layout CSS flex

Question

I am trying to make a blog with a Pinterest like layout. Width and height should, therefore, be able to vary and the posts under should come not that far under. Currently, mine are all the same height if they are next to each other.

(I am using PHP to generate several articles)

Also: I have made a grid where I have a row for header, nav, main part and footer. On the other pages, I use the footer part for the footer, just on this page, I want to put the footer together with the main part so that it isn't fixed at the bottom and visible all the time (only when you scroll to the bottom), but I get a white area at the bottom on all pages

body{
    display: grid;
    grid-template-rows: auto auto auto auto;
    font-size: small;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

main{
    grid-row: 3/4;
    display: flex;
    justify-content: center;
    align-content: center;
    justify-self: center;
    height: 500px;
    overflow: auto;
    width: 100%;
}

/*FOOTER*/
footer{
    grid-row: 4/5;
    margin: 0;
    width: 100%;
}
.pfoot{
    padding-left: 10px;
}

/* INDEX */
#main_feed{
    display: flex;
    overflow: auto;
    flex-direction: column;
    grid-row:3/5;
    padding: 0;
    width: 100%;
}

#section_feed{
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 100%;
    grid-row: 3/5;
}


/* ARTICLES */
article{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    margin: 50px;
    padding: 10px;
    max-height: 500px;
    max-width: 40%;
    overflow: auto;
}

.h1_feed{
    grid-row: 1/2;
    grid-column: 1/3;
    font-size: 20px;
}

.article_left{
    grid-column: 1/2;
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
}

.article_right{
    grid-column: 2/3;
    grid-row: 2/3;
    display: flex;
    margin-left: 20px;
    overflow: auto;
    
}
.img_feed{
    max-width: 250px;
    max-height: 500px;
    width: auto;
    height: auto;
    justify-self: center;
}
.video_feed{
    max-width: 300px;
    height: auto;
    justify-self: center;
}



/* if there isnt an image/video/audio, ignore*/
.article_no_media{
    grid-column: 1/3;
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
}

<head>
        <title> Home page </title>
    </head>

<body> 
    <header>
    <h1>Header</h1>
    </header>

    <nav>
        <ul>
            <li>Home</li>
            <li>Log in</li>
            <li>Register</li>
        </ul>
    </nav>

    <main id="main_feed">
        
        <section id="section_feed">
            <article>;
                    <h1 class="h1_feed"> Title </h1>
                    
                    <section class="article_left">
                        <img class="img_feed" src="$media">
                        <!--<video controls class="video_feed" >
                                <source  src="$media" type="video/$type">
                            </video>
          
                        <audio controls>
                            <source src="$media" type="audio/$type">
                        </audio>"-->

                        <p class="img_text">Posted $datetime by $username</p>
                    </section>

                    <section class="art_right">
                        <p> $text </p>
                    </section>

            </article>

            <section id="section_footer">
                <footer>
                    <p class="pfoot">text</p>
                </footer>
            </section>

        </section>
    </main>     
</body>

Creating Pinterest layout CSS flex

0 Answers0