Anzahl und Breite der Spalten in CSS-Grids

Wir beginnen unsere Einführung in die Arbeit mit Grids damit, die Anzahl und Breite der Spalten festzulegen, entlang derer die untergeordneten Elemente platziert werden. Zu diesem Zweck verwenden wir die Eigenschaft grid-template-columns, die im übergeordneten Element angegeben wird und die Anzahl und Breite der Spalten definiert, die die untergeordneten Elemente im Grid einnehmen. Im Wert der Eigenschaft geben wir die Breite der Spalten in Pixel an.

Beispiel

Lassen Sie uns zunächst ein übergeordnetes Element erstellen und es zu einem Grid-Container machen. Nehmen wir an, wir haben ein div, in dem sich vier untergeordnete Elemente befinden. Wir legen für es in der Eigenschaft display den Wert grid fest, und in der Eigenschaft grid-template-columns schreiben wir die Breite für zwei Spalten:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

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

Результат:

Beispiel

Lassen Sie uns nun ein Grid mit vier unterschiedlich großen Spalten 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>

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 250px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Praktische Aufgaben