CSS grid-column-start mit span und line name

[Hendoul]

Hi

Ich versuche ein grid-item über eine gewisse Anzahl Grid-Zellen zu spannen.
https://stackblitz.com/edit/web-platform-epsyfp?file=styles.css

Mittels:
.footer { background-color: teal; display: grid; align-items: center; justify-items: center; grid-column-start: span huba; }

Aber irgendwie funktioniert das nicht.
Was aber geht ist:
grid-column-start: 1; grid-column-end: span huba;

Aber es müsste doch auch nur mit grid-column-start: span huba funktionieren?

Ich sehe hier in der Doku nichts, das dagegen sprechen würde?
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start

span && [ <integer> || <custom-ident> ]
Contributes a grid span to the grid item's placement, such that the column start edge of the grid item's grid area is n lines from the end edge.

If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

 

[M4ttX]

Mit Integers geht es jedenfalls.

 

[Hendoul]

Ja aber ich wollte es ja extra mit den line names ausprobieren.

 

[Boa-P]

Hi @Hendoul ,

im letzten Abschnitt bei mdn wirds genannt, was du versuchst ist nicht möglich:

The <custom-ident> cannot take the span value.

Wenn du das ganze als Einzeiler haben willst, gehts hiermit:

.footer {
    background-color: teal;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-column: 1 / huba;
}

Damit sagst, starte bei 1 und geh bis "huba".
persönlich mag ich die Short-Hand Definitions, auch lieber Damit geht meistens alles was man braucht.

 

[Hendoul]

Ah, vielen Dank
Ich habe schon Mühe mir all die properties so zu merken, da lasse ich es mal noch sein mit den Shorthands

 

[netzgestaltung]

Ich würde immer in der "erstdefinition" shorthands nehmen und beim "überschreiben" die einzenlen properties nutzen. So wird nur der entsprechende Wert überschrieben.

 

[Boa-P]

Ah, vielen Dank
Ich habe schon Mühe mir all die properties so zu merken, da lasse ich es mal noch sein mit den Shorthands

Hi @Hendoul ,
wie @netzgestaltung bereits geschrieben hat, sich von Anfang an die Shorthands zu merken und nutzen ist nicht verkehrt. In den Dev-Tools siehst du ja auch immer sehr leicht, was von den Shorthands, dem entsprechenden explizieten Attribut zugeordnet ist:

so lernst du die indirekt sowieso mit