Warum ist das Layout meines CSS-Rasterbereichs falsch?

Fehlerbehebung bei Rasterbereichen im CSS Grid

Beim Arbeiten mit CSS Grid ist es entscheidend, sicherzustellen, dass die Rasterbereiche richtig angeordnet sind. Manchmal laufen die Dinge jedoch nicht ganz wie erwartet. Lassen Sie uns ein häufiges Problem untersuchen, bei dem Rasterbereiche falsch angezeigt werden.

Falsches Rasterbereichslayout

Bedenken Sie den folgenden Code:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

In diesem Beispiel möchten wir ein Raster mit zwei Spalten und zwei Zeilen erstellen. Der Bereich „Über uns“ wird jedoch nicht wie erwartet gerendert.

Lösung

Das Problem tritt auf, weil die Zeichenfolgenwerte in der Eigenschaft „grid-template-areas“ unbedingt erforderlich sind haben die gleiche Anzahl von Spalten wie das Raster selbst. In diesem Fall hat die zweite Zeile nur eine Spalte, während der erste und der zweite Bereich separaten Spalten zugeordnet sind.

Um dieses Problem zu beheben, können wir der zweiten Zeile eine weitere Spalte hinzufügen:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

Jetzt sind die Bereiche wie vorgesehen korrekt angeordnet. Denken Sie daran, dass bei Verwendung der Eigenschaft „grid-template-areas“ für ein ordnungsgemäßes Rasterlayout unbedingt darauf geachtet werden muss, dass die Zeichenfolgenwerte mit der Rasterkonfiguration übereinstimmen.

Das obige ist der detaillierte Inhalt vonWarum ist das Layout meines CSS-Rasterbereichs falsch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!