CSS Verschiedene Abstände zwischen grid items

[Hendoul]

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...

 

[GroMag]

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.

 

[Hendoul]

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?

 

[GroMag]

Margin habe ich ausprobiert, das ging nicht.

Margin geht definitiv, hab es extra probiert vorm antworten.

<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>

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).

 

[Hendoul]

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.

 

[Hendoul]

...

 

[GroMag]

...

Heißt das, es funktioniert nun?^^