einsiedler: Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

Beitrag lesen

Schau mal bitte:

body {
	display grid;
    height: calc(100vh - 16px);
	grid:   [main-navigation-start] "main-head   main-head                        main-head"           1fr  [main-navigation-end]
								/       1fr          1fr      [main-navigation-start] auto [main-navigation-end]
								
            [to-top-button-start]   "articlebox  articlebox                       articlebox"          1fr
								/       1fr          1fr           1fr
									
                                    "articlebox  articlebox                       articlebox"          1fr  [to-top-button-end]  
			                    /       1fr          1fr      [to-top-button-start]   1fr  [to-top-button-end]
			
			                        "mainfooter   mainfooter   mainfooter"   auto
								/       1fr          1fr           1fr;
}

.main-head {
	grid-area: main-head;
}
.articlebox {
	grid-area: articlebox;		
}
.footerbox {
	grid-area: mainfooter;		
}
#navigations {
	grid-area: main-navigation;
}

#to-top-button {
	grid-area: to-top-button;

Gruß T.