Wie kann ich bestimmte Zeilen und Spalten im CSS-Raster selektiv formatieren?

Targeting auf bestimmte Spalten oder Zeilen im CSS-Raster

In einem CSS-Rasterlayout die Grid-Template-Rows und Grid-Template-Columns Eigenschaften definieren die Anzahl der Zeilen bzw. Spalten. Manchmal müssen wir jedoch bestimmte Teile eines Rasters formatieren.

Targeting-Zeilen

Um eine beliebige Zeile zu formatieren, können wir ein Wrapper-Element verwenden, dessen Anzeige auf eingestellt ist Inhalt. Dadurch können wir die gesamte Zeile als eine einzelne Einheit formatieren, auch wenn sie mehrere Zellen enthält.

Betrachten Sie beispielsweise den folgenden Code:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2px;
}

.grid-item {
  border: 1px solid black;
  padding: 5px;
}

.grid-row-wrapper {
  display: contents;
}

.grid-row-wrapper > .grid-item {
  background: skyblue;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

In diesem Beispiel Die Klasse .grid-row-wrapper wird auf das Wrapper-Element angewendet, das die zweite Zeile von Rasterelementen enthält. Die Hintergrundfarbe dieser Elemente wird mit dem Befehl .grid-row-wrapper > auf Himmelblau eingestellt. .grid-item selector.

Targeting auf Spalten

Das Targeting auf bestimmte Spalten ist etwas schwieriger. CSS Grid bietet keine direkte Möglichkeit, Spalten auszuwählen, aber wir können eine Kombination anderer Eigenschaften verwenden, um den gewünschten Effekt zu erzielen.

Ein Ansatz besteht darin, mehrere Rastercontainer zu verwenden, jeder mit seiner eigenen Rastervorlage. Dadurch können wir das Layout jeder Spalte unabhängig steuern.

Ein anderer Ansatz besteht darin, den nth-child()-Selektor zu verwenden, um bestimmte Zellen im Raster anzusprechen. Dies kann jedoch schwierig aufrechtzuerhalten sein, insbesondere wenn sich das Raster dynamisch ändert.

Wenn Sie regelmäßig auf bestimmte Spalten oder Zeilen abzielen müssen, ist es oft besser, einen Präprozessor oder eine Bibliothek zu verwenden, die zusätzliche Selektoren und Funktionen für bereitstellt CSS-Raster.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Zeilen und Spalten im CSS-Raster selektiv formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!