CSS -Gitterhöhe, bestimmt durch die Größe eines weiteren Netzes auf der Seite ⇐ CSS

[Anonymous]

Das Layout meiner Website hängt von Gittern ab. Ich habe ein Hauptgitter, das meine gesamte Seite in drei Spalten unterteilt. Die Spalten entsprechen der linken Seitenleiste, dem Hauptinhalt und der rechten Seitenleiste. Da ich weiterhin Abschnitte hinzufügen möchte, wird die Anzahl der Zeilen nicht explizit ermittelt. Ich bin ein totaler Anfänger, wenn es um Netze geht. Ich würde mich freuen, wenn mir jemand erklären könnte, warum dies geschieht und eine Lösung anbieten könnte. Ich möchte unabhängig von den anderen Inhalten zu jeder Spalte inhaltlich hinzufügen können. < /P>
Hier ist der Code. Beachten Sie, dass dieses Problem nur auftritt, wenn das Ansichtsfenster breit genug ist.

Code: Select all

/*Main grid*/

.container {

margin: 0 auto;
display: grid;
grid-template-columns: 0.8fr 1.5fr 0.8fr;
grid-template-rows: auto auto auto;
grid-gap: 1.5em 2em;
grid-template-areas: "header header header"
"aside_left main aside_right"
"footer footer footer";
width: 90%;

}

/*Left sidebar*/

.aside_left {

grid-area: aside_left;

/*its own grid*/
display: grid;
grid-template-columns: 100%;
grid-auto-rows: min-content;

grid-gap: 1em;
}

.aside_left > section {

background-color: cadetblue;

}

/*Main content*/

main {

grid-area: main;

/*Its own grid*/
display: grid;
grid-template-columns: 100%;
grid-auto-rows: auto;
grid-gap: 1em 0.5em;

}

main > section {

background-color: hotpink;

}

/*Right sidebar*/

.aside_right {

grid-area: aside_right;

/*its own grid*/
display: grid;
grid-template-columns: 100%;
grid-auto-rows: max-content;
grid-gap: 1em;
}

.aside_right > section {

background-color: violet;

}

.aside_left > section, main > section, .aside_right > section {

border: 2px solid black;
}< /code>



Lorem ipsum
[list]
[*]Pikachu
[*]Squirtle
[*]Charmander
[*]Bulbasaur
[/list]


Lorem ipsum
[list]
[*]Pikachu
[*]Squirtle
[*]Charmander
[*]Bulbasaur
[/list]

Lorem ipsum
[list]
[*]Pikachu
[*]Squirtle
[*]Charmander
[*]Bulbasaur
[*]Lugia
[*]Mew
[*]Ponyta
[*]Mewtwo
[*]Litten
[*]Rowlett
[*]Oshawott
[*]Pikachu
[*]Squirtle
[*]Charmander
[*]Bulbasaur
[*]Lugia
[*]Mew
[*]Ponyta
[*]Mewtwo
[*]Litten
[*]Rowlett
[*]Oshawott
[/list]




Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla
lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel
class aptent taciti sociosqu.  Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla
lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel
class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.


Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla
lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel
class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla
lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel
class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.




Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi quas quam, nisi omnis laudantium saepe veritatis
quasi dicta illo. Deserunt error fuga commodi perferendis ducimus temporibus nihil assumenda repudiandae nulla.