Lektion1.deDas Template

➋ Grid

Das Gridsystem bereitet die HTML Elemente für die spätere Anordnung per CSS Anweisungen vor.

Die Datei grid.css

@media (min-width:600px) {

	.top {background: orangered}

	body {
		padding: 0 1em;
		display: grid;
		grid-gap: 1em;
		grid-template-areas:
		"logo"
		"nav"
		"main"
		"aside"
		"feedback"
		"footer"
	}
	
	#logo {grid-area:logo}
	nav {grid-area:nav}
	main {grid-area:main}
	aside {grid-area:aside}
	#feedback {grid-area:feedback}
	#footer {
		grid-area:footer;
		display:grid;
		grid-template-columns:repeat(2,1fr);
		grid-gap:1em
	}

}

@media (min-width:900px) {

	.top {background: limegreen}
	body {
		padding: 1em 2em;
		grid-gap: 2em
	}
	#footer {grid-template-columns: repeat(3,1fr)}
	
}

@media (min-width:1200px) {
	
	.top {background: dodgerblue}
	main, aside {padding: 1em}
	#feedback {
		display:grid;
		grid-template-columns: 1fr 25em
	}
	#footer {
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-gap: 2em
	}
	#footer a.tip {display: block;}
}

@media (min-width:1500px) {
	
	.top {background: orangered}
	
}

@media (min-width:1800px) {
	
	.top {background: limegreen}
	#footer {grid-template-columns:repeat(5,1fr)}

}

Hintergrundbild

Image by William Iven from Pixabay

Kommentare

Noch keine Kommentare vorhanden!