CSS Verschiedene Abstände zwischen grid items

Hendoul

Lt. Commander
Dabei seit
Apr. 2008
Beiträge
2.036
Hi :)

Ich kenne mich noch nicht gut aus mit grids. Ich habe 3 Spalten in meinem Grid und nun möchte ich, dass zwischen Spalte 1 und 2 ein anderer Abstand gilt als zwischen Spalte 2 und 3.

Mit grid-column-gap definiert man ja gleich die Abstände für alle Spalten...
 
Das geht nicht direkt über die grid-Definition (was so auch korrekt ist).
Geb der Spalte 1 ein margin-right (oder Spalte 2 margin-left). Alternativ könnte man auch eine "Leer"-Spalte einfügen zwischen 1 und 2.
 
Zuletzt bearbeitet:
Margin habe ich ausprobiert, das ging nicht.
Und mit leerer Spalte meinst du einfach ein z.B. <div></div> zwischen 1 und 2 einfügen?
 
Zitat von Hendoul:
Margin habe ich ausprobiert, das ging nicht.
Margin geht definitiv, hab es extra probiert vorm antworten.
HTML:
<style>
    #grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 10px;
        width: 50vw;
        height: 50vh;
    }
    #grid > div{
        border: 1px solid black
    }
    #grid > div:first-child{
        margin-right: 30px
    }
</style>
<div id="grid">
    <div>a</div>
    <div>b</div>
    <div>c</div>
</div>


Zitat von Hendoul:
Und mit leerer Spalte meinst du einfach ein z.B. <div></div> zwischen 1 und 2 einfügen?
Ja, aber die muss in den grid-template-columns mit definiert werden (also hier zB: 1fr 20px 1fr 1fr).
 
Ok, werde es am Montag nochmals mit margin probieren, vielleicht hat da was anderes mitrein gespielt und das verhindert.

Leeres div oder dergleichen möchte ich nicht, das finde ich ziemlich unschön und eher ein Hack.
 
...
 
Zuletzt bearbeitet:
Zurück
Top