Kurzschreibweise für Zeilen und Spalten in CSS Grids

Es gibt Situationen, in denen es praktisch ist, die Größen der Zeilen und Spalten in Kurzform anzugeben. Dafür verwenden wir die Eigenschaft grid-template, die im Elternelement angegeben wird und eine verkürzte Schreibweise der beiden Eigenschaften grid-template-rows und grid-template-columns darstellt.

Zeilen und Spalten für den Grid-Container werden durch einen Schrägstrich getrennt, ihre Größen werden in Maßeinheiten definiert.

Beispiel

Lass uns mit der Eigenschaft grid-template eine Tabelle erstellen:

html<div id="parent">
  <div>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>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Beispiel

Lass uns nun der zweiten und dritten Zeile die gleiche Höhe geben, und jeder Spalte - eine unterschiedliche Breite:

html<div id="parent">
  <div>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>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Beispiel

Lass uns nun in der Tabelle aus dem vorherigen Beispiel die obere Zeile zwei Fraction-Einheiten hoch machen, und die erste Spalte - eine halbe Fraction-Einheit breit:

html<div id="parent">
  <div>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>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат: