CSS grid-auto-columns-Eigenschaft
Die grid-auto-columns-Eigenschaft legt die Größe der Spalten in einem Grid-Container fest. Hinweis: Diese Eigenschaft wirkt sich nur auf implizit erstellte Spalten aus, nicht auf explizit definierte.
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Grid-Container. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Größe der Spalten ist animierbar. |
| Version | CSS Grid Layout Module Level 1 |
| DOM-Syntax | object.style.gridAutoColumns = "100px"; |
Syntax
Syntax der CSS grid-auto-columns-Eigenschaft
css
grid-auto-columns: auto | max-content | min-content | length | % | minmax(min, max);Beispiel für grid-auto-columns:
Beispiel für die CSS grid-auto-columns-Eigenschaft mit auto- und Längenwerten
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-auto-columns: 50px;
gap: 10px;
background-color: #555;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.black-container {
display: grid;
grid-auto-columns: 100px;
gap: 10px;
background-color: #000;
padding: 10px;
}
.black-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.auto-container {
display: grid;
grid-auto-columns: auto;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.auto-container > div {
background-color: #999;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-auto-columns property example</h2>
<h3>50 pixels</h3>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h3>100 pixels</h3>
<div class="black-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h3>auto</h3>
<div class="auto-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Ergebnis
Im folgenden Beispiel wird die Eigenschaft grid-auto-columns verwendet, um eine Standardgröße (Breite) für alle Spalten festzulegen.
Beispiel für grid-auto-columns mit allen Werten:
Beispiel für die CSS grid-auto-columns-Eigenschaft mit max-content-, min-content-, auto- und Längenwerten
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-auto-columns: 50px;
gap: 10px;
background-color: #555;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.black-container {
display: grid;
grid-auto-columns: 100px;
gap: 10px;
background-color: #000;
padding: 10px;
}
.black-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.grey-container {
display: grid;
grid-auto-columns: max-content;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grey-container > div {
background-color: #555;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.white-container {
display: grid;
grid-auto-columns: min-content;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.white-container > div {
background-color: #fff;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.auto-container {
display: grid;
grid-auto-columns: auto;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.auto-container > div {
background-color: #999;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.minmax-container {
display: grid;
grid-auto-columns: minmax(50px, 1fr);
gap: 10px;
background-color: #eee;
padding: 10px;
}
.minmax-container > div {
background-color: #777;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-auto-columns property example</h2>
<p>Use the grid-auto-columns property to set a default size (width) for all columns.</p>
<h3>50 pixels</h3>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h3>100 pixels</h3>
<div class="black-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h3>max-content</h3>
<div class="grey-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h3>min-content</h3>
<div class="white-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h3>auto</h3>
<div class="auto-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h3>minmax(50px, 1fr)</h3>
<div class="minmax-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| auto | Die Größe der Spalten wird durch den Inhalt oder den verfügbaren Platz bestimmt. Dies ist der Standardwert der Eigenschaft. |
| max-content | Die Größe jeder Spalte wird durch den größten min-content-Beitrag ihrer Elemente bestimmt. |
| min-content | Die Größe jeder Spalte wird durch den kleinsten min-content-Beitrag ihrer Elemente bestimmt. |
| minmax(min, max) | Der Größenbereich ist größer oder gleich „min“ und kleiner oder gleich „max“. |
| length | Die Größe der Spalten wird durch einen Längenwert angegeben. |
| % | Die Größe der Spalten wird in Prozent angegeben. |
Praxis
Was macht die 'grid-auto-columns'-Eigenschaft in CSS?