Warum werden meine CSS-Rasterbereiche nicht richtig angeordnet?

CSS-Raster: Rasterbereiche werden nicht richtig angeordnet

In CSS-Rastersystemen kann die Eigenschaft „grid-template-areas“ zum Definieren verwendet werden benannte Bereiche innerhalb eines Rasters. Bei der Verwendung dieser Eigenschaft können jedoch Probleme auftreten, die zu einer falschen Anordnung der Rasterbereiche führen.

Problem:

Beim Definieren von Rasterbereichen mithilfe der Eigenschaft „grid-template-areas“. , tritt ein unerwartetes Layout auf. Der folgende Code veranschaulicht das Problem:

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

Dieser Code definiert ein 2x2-Raster mit zwei Bereichen mit den Namen „Logo“ und „FAQ“ in der ersten Zeile und einem Bereich mit dem Namen „Über uns“ in der zweiten Reihe. Das Layout stimmt jedoch nicht mit der beabsichtigten Konfiguration überein.

Lösung:

Das Problem ist auf die falsche Anzahl von Spalten in der Eigenschaft „grid-template-areas“ zurückzuführen. Jede Zeichenfolge in der Eigenschaft sollte die gleiche Anzahl von Spalten haben, wie in „grid-template-columns“ definiert. In diesem Fall gibt die Eigenschaft nur eine Spalte an, während das Raster mit zwei Spalten definiert ist.

Um das Problem zu beheben, muss der Bereich „Über uns“ mithilfe einer zusätzlichen Zeichenfolge in zwei Spalten aufgeteilt werden:

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

Mit dieser Anpassung werden die Rasterbereiche richtig angeordnet und an der beabsichtigten Konfiguration ausgerichtet.

Das obige ist der detaillierte Inhalt vonWarum werden meine CSS-Rasterbereiche nicht richtig angeordnet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!