CSS grid-column-start-Eigenschaft
Die Eigenschaft grid-column-start bestimmt die Startposition des Elements in der Spalte, indem sie eine Linie, eine Spanne oder nichts hinzufügt. Mit anderen Worten definiert sie die inline-start-Position seines Rasterbereichs.
| Anfangswert | auto |
|---|---|
| Gilt für | Rasterelemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Der Startpunkt ist animierbar. |
| Version | CSS Grid Layout Module Level 1 |
| DOM-Syntax | object.style.gridColumnStart = "6"; |
Syntax
CSS grid-column-start Syntax
grid-column-start: auto | span n | column-line | initial | inherit;Beispiel für die grid-column-start-Eigenschaft:
CSS grid-column-start Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-start: 6;
}
</style>
</head>
<body>
<h2>Grid-column-start property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Ergebnis
Hier haben wir festgelegt, ab welcher Spalte die Anzeige des Elements beginnen soll. Hinweis: Da die Raster-Vorlage nur 4 Spalten definiert, werden die Linien 5 und 6 implizit erstellt, um das Element aufzunehmen. Im folgenden Beispiel haben wir die Anzahl der Spalten angegeben, die das Element umspannen wird.
Beispiel für die grid-column-start-Eigenschaft mit dem Wert „span 2“:
CSS grid-column-start weiteres Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.span-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #888;
padding: 10px;
margin-top: 20px;
}
.span-container > div {
background-color: #fff;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.span-box1 {
grid-column-start: span 2;
}
</style>
</head>
<body>
<h2>Grid-column-start property example</h2>
<div class="span-container">
<div class="span-box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Beispiel für die grid-column-start-Eigenschaft mit dem Wert „auto“:
Beispiel für die grid-column-start-Eigenschaft mit dem Wert „auto“:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-start: auto;
}
</style>
</head>
<body>
<h2>Grid-column-start property example</h2>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</div>
</body>
</html>Beispiel für die grid-column-start-Eigenschaft mit dem Wert „column-line“:
Beispiel für die grid-column-start-Eigenschaft mit dem Wert „column-line“:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 12px;
background-color: red;
padding: 15px;
}
.grid-container>div {
background-color: #dcdcdc;
text-align: center;
padding: 20px 0;
font-size: 35px;
color: white;
}
.box1 {
grid-column-start: 4;
}
</style>
</head>
<body>
<h1> Grid-column-start Property </h1>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| auto | Es wird nur eine Spalte umspannt. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| span n | Gibt die Anzahl der Spalten an, die das Element umspannen soll. | Ausführen » |
| column-line | Gibt die Rasterlinie an, an der das Element beginnen soll. | Ausführen » |
Praxis
Was bewirkt die CSS-Eigenschaft grid-column-start?