Make flex without row

Question

Objective: Create html/css inside a flex box in other div's.

The special thing about it, they should work like as there are no rows But this is how it looks

So there is my problem: I have rows and there is space between the posts. I will also leave my by now created html and css files.

.flex-container {
    display: flex;
    background-color: yellow;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: start;
    align-content: flex-start;
}

.item {
    background-color: green;
    flex-basis: 500px;
}

.post-grid {
    display: grid;
    background-color: green;
    flex-basis: 500px;
    grid-template-columns: repeat(10, 50px);
}

.post-col-1 {
    grid-template-columns: 1 / 2;
    border: solid 0.5px black;
}

.post-col-2 {
    display: grid;
    grid-column: span 2;
    grid-template-columns: 10% 10%;
    border: solid 0.5px black;
}

.post-col-2 p{
    width: 100px;
    word-break: break-all;
}

.post-col-2 a{
    width: 100px;
    word-break: break-all;
}

.post-col-3 {
    display: grid;
    grid-column: span 3;
    grid-template-columns: 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-3 p{
    width: 150px;
    word-break: break-all;
}

.post-col-3 a{
    width: 150px;
    word-break: break-all;
}

.post-col-4 {
    display: grid;
    grid-column: span 4;
    grid-template-columns: 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-4 p{
    width: 200px;
    word-break: break-all;
}

.post-col-4 a{
    width: 200px;
    word-break: break-all;
}

.post-col-5 {
    display: grid;
    grid-column: span 5;
    grid-template-columns: 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-5 p{
    width: 250px;
    word-break: break-all;
}

.post-col-5 a{
    width: 250px;
    word-break: break-all;
}

.post-col-6 {
    display: grid;
    grid-column: span 6;
    grid-template-columns: 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-6 p{
    width: 300px;
    word-break: break-all;
}

.post-col-6 a{
    width: 300px;
    word-break: break-all;
}

.post-col-7 {
    display: grid;
    grid-column: span 7;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-7 p{
    width: 350px;
    word-break: break-all;
}

.post-col-7 a{
    width: 350px;
    word-break: break-all;
}

.post-col-8 {
    display: grid;
    grid-column: span 8;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-8 p{
    width: 400px;
    word-break: break-all;
}

.post-col-8 a{
    width: 400px;
    word-break: break-all;
}

.post-col-9 {
    display: grid;
    grid-column: span 9;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-9 p{
    width: 450px;
    word-break: break-all;
}

.post-col-9 a{
    width: 450px;
    word-break: break-all;
}

.post-col-10 {
    display: grid;
    grid-column: span 10;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    border: solid 0.5px black;
}

.post-col-10 p{
    width: 500px;
    word-break: break-all;
}

.post-col-10 a{
    width: 500px;
    word-break: break-all;
}

img {
    display: block;
    width: 100%;
}

.post-header {
    height: 50px;
}

p {
    display: block;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Test-Preview</title>
</head>
<body>
    <div class="flex-container">

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <img src="../Pictures/PB-pic1.jpg">
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic1.png">
            </div>

            <div class="post-text post-col-10">
                <p>Texte die der Blogger unter dem Bild verfassen kann.</p>
            </div>

            <div class="post-tags post-col-10">
                <a href="index.html">Post-Tags</a>
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

        <!----->

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <p>hello</p>
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic2.jpg">
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

        <!---->

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <img src="../Pictures/PB-pic1.jpg">
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic1.png">
            </div>

            <div class="post-text post-col-10">
                <p>Texte die der Blogger unter dem Bild verfassen kann.</p>
            </div>

            <div class="post-tags post-col-10">
                <a href="index.html">Post-Tags</a>
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

        <!---->

        <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <img src="../Pictures/PB-pic1.jpg">
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic1.png">
            </div>

            <div class="post-text post-col-10">
                <p>Texte die der Blogger unter dem Bild verfassen kann.</p>
            </div>

            <div class="post-tags post-col-10">
                <a href="index.html">Post-Tags</a>
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

         <!----->

         <div class="post-grid">
            <div class="post-header post-col-10">
                <div class="post-profile-picture post-col-1">
                    <p>hello</p>
                </div>
                <div class="post-blogger-name post-col-7">
                    <a href="index.html">Blogger-Name</a>
                </div>
                <div class="post-col-2">
                    <p>Follow</p>
                </div>
            </div>

            <div class="post-content post-col-10">
                <img class="post-col-10" src="../Pictures/Content-pic2.jpg">
            </div>

            <div class="post-footer post-col-10">
                <div class="post-flag post-col-1">
                    <p>flag</p>
                </div>
                <div class="post-date post-col-5">
                    <p>00.00.0000</p>
                </div>
                <div class="post-share post-col-1">
                    <p>share</p>
                </div>
                <div class="post-comment post-col-1">
                    <p>comment</p>
                </div>
                <div class="post-like post-col-1">
                    <p>like</p>
                </div>
                <div class="post-save post-col-1">
                    <p>save</p>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

Can someone help me? Or is it even possible to do so, or maybe do you don't recommend it at all?

Thanks for helping ^^

score 0 · Accepted Answer · answered Jan 05 '20 at 23:22

0

For this layout, using a Javascript library might be better than trying to build it yourself as there are calculations that need to be made so that items can be placed in the right column.

There are plenty of JS libraries available out there for this. Here is one:

https://masonry.desandro.com/

Here is a good article that explains some of the options:

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

answered Jan 05 '20 at 23:22

Richard Lovell

848
10
18

ah ok, I googled for ways to do so, but did not know how to call it what I am searching for, so I didn't find those masonry and so on. Guess I must use JS Thanks a lot ^^ – 黒성배 Jan 06 '20 at 16:19
Great, could you mark it as accepted? Thanks! – Richard Lovell Jan 07 '20 at 00:13

Make flex without row

1 Answers1