grid-column CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2017 browserübergreifend verfügbar.
Die grid-column CSS Shorthand Eigenschaft legt die Größe und Position eines Grid-Elements in einer Grid-Spalte fest, indem sie eine Linie, eine Spanne oder nichts (automatisch) zu dessen Grid-Platzierung beiträgt. So werden die Inline-Start- und Inline-End-Kante seines Grid-Bereichs festgelegt.
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;
}
Zusammengesetzte Eigenschaften
Diese Eigenschaft ist ein Shorthand 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. Der Longhand grid-column-start wird auf den Wert vor dem Schrägstrich gesetzt, und der Longhand grid-column-end wird auf den Wert nach dem Schrägstrich gesetzt.
Jeder <grid-line> Wert kann wie folgt angegeben werden:
- entweder als
autoSchlüsselwort - oder als
<custom-ident>Wert - oder als
<integer>Wert - oder beides
<custom-ident>und<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 und eine automatische Platzierung, eine automatische Spanne oder eine Standardschweife von
1indiziert. <custom-ident>-
Wenn eine benannte Linie mit dem Namen
<custom-ident>-start/<custom-ident>-endexistiert, trägt sie 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 dieses benannten Grid-Bereichs auswählt (sofern nicht eine andere Linie namensfoo-start/foo-endvorher explizit angegeben wurde).Andernfalls wird dies so behandelt, als wäre die ganze Zahl
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 Zahl angegeben wird, zählt sie stattdessen rückwärts ab der Endkante des expliziten Grids.
Wenn ein Name als
<custom-ident>angegeben wird, werden nur Linien mit diesem Namen gezählt. Falls nicht genügend Linien mit diesem Namen vorhanden sind, wird angenommen, dass alle impliziten Grid-Linien diesen Namen besitzen, um diese Position zu ermitteln.Ein
<integer>Wert von0ist ungültig. span && [ <integer> || <custom-ident> ]-
Trägt eine Grid-Spanne zur Platzierung des Grid-Elements bei, so dass 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 wird, werden nur Linien mit diesem Namen gezählt. Falls nicht genügend Linien mit diesem Namen vorhanden sind, wird angenommen, dass alle impliziten Grid-Linien auf der Seite des expliziten Grids, die der Suchrichtung entspricht, diesen Namen haben, um diese Spanne zu zählen.Wenn das
<integer>weggelassen wird, ist die Standardeinstellung1. Negative Zahlen oder0sind 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> ] ]
<integer> =
<number-token>
Beispiele
Festlegen der Grid-Spalten-Größe und -Position
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
| Spezifikation |
|---|
| CSS Grid Layout Module Level 2 # placement-shorthands |