/    Sign up×
Community /Pin to ProfileBookmark

Placing items in a row with wrap and spacing

Copy linkTweet thisAlerts:
Aug 02.2020

I’m retrieving items from a database and displaying them on a page. Therefore sometimes I’ll have 3 and other times, 7,8,9,10 and so on.

My main page container is a grid with 3 columns, first and third columns have a width of 100px the middle is auto.

Im placing my content in the middle column. Each item has a image and a title.

ive tried using ul and li and also flexbox with margins.

my issue is I need spacing between each item.

with margin I end up with spacing between the edge of my container and first item or on the right.

given I don’t know how many items will be on each row I can’t remove margins on nth item.

maybe a grid with grid gap is a option?

how can I create new automatic rows etc

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumAug 02.2020 — >sometimes I’ll have 3 and other times, 7,8,9,10 and so on.
>
Do you mean items in one row?

It would be best if you could post some sample HTML from the source view of you browser. I'm fairly shure that it can be fixed easily.
Copy linkTweet thisAlerts:
@kiwisauthorAug 02.2020 — Sorry I wrote that while on 4 hours sleep.

So the number of items being displayed will vary depending on what I have available.

If say I have 5 on one given day, on a desktop my center container will fit up to 7 but my laptop only 5.

Can with a grid.

  • - I make a row fit a variable number of columns? depending on the width of the container.

  • - Auto generate new rows
    • Copy linkTweet thisAlerts:
    @SempervivumAug 02.2020 — >Can with a grid.

    I make a row fit a variable number of columns? depending on the width of the container.

    Auto generate new rows

    Yes, you can. Check if this fits your needs:
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>Image Stack</title>

    <i> </i>&lt;style&gt;
    <i> </i> .container {
    <i> </i> display: grid;
    <i> </i> grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    <i> </i> grid-gap: 5px;
    <i> </i> }

    <i> </i> .cell {
    <i> </i> border: 2px solid lightblue;
    <i> </i> height: 100px;
    <i> </i> }
    <i> </i>&lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
    &lt;div class="container"&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;div class="cell"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;

    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @kiwisauthorAug 03.2020 — Cheers, I come back to close this as I worked the exact same thing out.
    ×

    Success!

    Help @kiwis spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.8,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...