grid-column-start

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Oktober 2017⁩.

Die grid-column-start CSS Eigenschaft legt die Startposition eines Grid-Elements innerhalb der Grid-Spalte fest, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu seinem Grid-Platz beiträgt. Diese Startposition definiert die Block-Startkante des Grid-Bereichs.

Probieren Sie es aus

grid-column-start: auto;

grid-column-start: 2;

grid-column-start: -1;

grid-column-start: span 2;

<section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element">One</div> <div>Two</div> <div>Three</div> </div> </section>

.example-container { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: repeat(3, minmax(40px, auto)); grid-gap: 10px; width: 200px; } .example-container > div { background-color: rgb(0 0 255 / 0.2); border: 3px solid blue; } #example-element { background-color: rgb(255 0 200 / 0.2); border: 3px solid rebeccapurple; }

Syntax

css

/* Keyword value */ grid-column-start: auto; /* <custom-ident> value */ grid-column-start: some-grid-area; /* <integer> + <custom-ident> values */ grid-column-start: 2; grid-column-start: some-grid-area 4; /* span + <integer> + <custom-ident> values */ grid-column-start: span 3; grid-column-start: span some-grid-area; grid-column-start: span some-grid-area 5; /* Global values */ grid-column-start: inherit; grid-column-start: initial; grid-column-start: revert; grid-column-start: revert-layer; grid-column-start: unset;

Diese Eigenschaft wird als einzelner <grid-line> Wert angegeben. Ein <grid-line> Wert kann wie folgt spezifiziert werden:

entweder das Schlüsselwort auto
oder ein <custom-ident> Wert
oder ein <integer> Wert
oder sowohl <custom-ident> als auch <integer>, getrennt durch ein Leerzeichen
oder das Schlüsselwort span zusammen mit entweder einem <custom-ident> oder einem <integer> oder beidem.

Werte

auto

Ein Schlüsselwort, das angibt, dass die Eigenschaft nichts zur Platzierung des Grid-Elements beiträgt, was eine automatische Platzierung, eine automatische Spanne oder eine Standardspanne von 1 bedeutet.

<custom-ident>

Wenn es eine benannte Linie mit dem Namen <custom-ident>-start gibt, trägt sie die erste solche Linie zur Platzierung des Grid-Elements bei.

Hinweis: Benannte Grid-Bereiche generieren automatisch implizit benannte Linien dieser Form, sodass die Angabe grid-column-start: foo; die Startkante dieses benannten Grid-Bereichs wählt (es sei denn, eine andere Linie mit dem Namen foo-start wurde vorher ausdrücklich spezifiziert).

Andernfalls wird dies behandelt, als ob die Zahl 1 zusammen mit dem <custom-ident> angegeben wurde.

<integer> && <custom-ident>?

Trägt die n-te Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative Zahl angegeben wird, wird rückwärts gezählt, beginnend von der Endkante des expliziten Grids.

Wenn als <custom-ident> ein Name angegeben wird, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Gitterlinien diesen Namen haben, um diese Position zu finden.

Ein <integer> Wert von 0 ist ungültig.

span && [ <integer> || <custom-ident> ]

Trägt eine Grid-Spanne zur Platzierung des Grid-Elements bei, sodass die Startkante der Spalte des Grid-Bereichs des Grid-Elements n Linien von der Endkante entfernt ist.

Wenn das <integer> weggelassen wird, beträgt der Standardwert 1. Negative Ganzzahlen und 0 sind ungültig.

<custom-ident> kann die Werte span und auto nicht annehmen.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	Gridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

grid-column-start = 
 <grid-line> 

<grid-line> = 
 auto |
 <custom-ident> |
 [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
 [ span && [ <integer [1,∞]> || <custom-ident> ] ]

Beispiele

Festlegen des Spaltenstarts für ein Grid-Element

HTML

html

<div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div>

CSS

css

.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; }

* { box-sizing: border-box; } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; }

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2 # line-placement

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden