grid-column
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 CSS Kurzschreibweise legt die Größe und Position eines Grid-Elements innerhalb einer Grid-Spalte fest, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu seiner Rasterplatzierung beiträgt und somit die Inline-Start- und Inline-Endkante seines Grid-Bereichs bestimmt.
Probieren Sie es aus
grid-column: 1; grid-column: 1 / 3; grid-column: 2 / -1; grid-column: 1 / 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; } Einzelkomponenten
Diese Eigenschaft ist eine Kurzschreibweise für die folgenden CSS-Eigenschaften:
Syntax
/* Keyword values */ grid-column: auto; grid-column: auto / auto; /* <custom-ident> values */ grid-column: some-grid-area; grid-column: some-grid-area / some-other-grid-area; /* <integer> + <custom-ident> values */ grid-column: some-grid-area 4; grid-column: 4 some-grid-area / 6; /* span + <integer> + <custom-ident> values */ grid-column: span 3; grid-column: span some-grid-area; grid-column: 5 some-grid-area span; grid-column: span 3 / 6; grid-column: span some-grid-area / span some-other-grid-area; grid-column: 5 some-grid-area span / 2 span; /* Global values */ grid-column: inherit; grid-column: initial; grid-column: revert; grid-column: revert-layer; grid-column: unset; Diese Eigenschaft wird als ein oder zwei <grid-line> Werte angegeben.
Wenn zwei <grid-line> Werte angegeben sind, werden sie durch / getrennt. Die Langform grid-column-start wird auf den Wert vor dem Schrägstrich gesetzt und die Langform grid-column-end auf den Wert nach dem Schrägstrich.
Jeder <grid-line> Wert kann wie folgt angegeben 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
spanzusammen mit entweder einem<custom-ident>oder einem<integer>oder beiden.
Werte
auto-
Ist ein Schlüsselwort, das anzeigt, dass die Eigenschaft nichts zur Platzierung des Grid-Elements beiträgt, was auf automatische Platzierung, eine automatische Spanne oder eine Standardswelle von
1hinweist. <custom-ident>-
Wenn es eine benannte Linie mit dem Namen
<custom-ident>-start/<custom-ident>-endgibt, trägt die erste solche Linie zur Platzierung des Grid-Elements bei.Hinweis: Benannte Grid-Bereiche erzeugen automatisch implizite benannte Linien dieser Form, sodass die Angabe von
grid-column: foo;die Start-/Endkante des benannten Grid-Bereichs auswählt (es sei denn, eine andere Linie mit dem Namenfoo-start/foo-endwurde zuvor explizit angegeben).Andernfalls wird dies behandelt, als wäre die Ganzzahl
1zusammen mit dem<custom-ident>angegeben worden. <integer> && <custom-ident>?-
Trägt die n-te Grid-Linie zur Platzierung des Grid-Elements bei. Wenn eine negative Ganzzahl angegeben ist, wird stattdessen von der Endkante des expliziten Rasters rückwärts gezählt.
Wenn ein Name als
<custom-ident>angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Grid-Linien diesen Namen zum Zweck der Bestimmung dieser Position haben.Ein
<integer>Wert von0ist ungültig. span && [ <integer> || <custom-ident> ]-
Trägt eine Rasterspanne zur Platzierung des Grid-Elements bei, sodass die entsprechende Kante des Grid-Bereichs des Grid-Elements n Linien von der gegenüberliegenden Kante entfernt ist.
Wenn ein Name als
<custom-ident>angegeben ist, werden nur Linien mit diesem Namen gezählt. Wenn nicht genügend Linien mit diesem Namen existieren, wird angenommen, dass alle impliziten Grid-Linien auf der Seite des expliziten Rasters, die der Suchrichtung entspricht, diesen Namen zum Zweck der Zählung dieser Spanne haben.Wenn die
<integer>weggelassen wird, ist der Standardwert1. Negative Ganzzahlen oder 0 sind ungültig.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | Gridelemente und absolut positionierte Boxen, deren beinhaltender Block ein Gridcontainer ist |
| Vererbt | Nein |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | diskret |
Formale Syntax
grid-column =
<grid-line> [ / <grid-line> ]?
<grid-line> =
auto |
<custom-ident> |
[ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ] |
[ span && [ <integer [1,∞]> || <custom-ident> ] ]
Beispiele
Einstellung der Größe und Position der Grid-Spalte
HTML
<div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> CSS
#grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; } Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Grid Layout Module Level 2 # placement-shorthands |