Beispiel:CSS-grid-ausrichtung-7.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid mit Text unten rechts</title>
</head>
<style>
body {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: min-content auto auto auto auto;
	gap: 1em;  
	min-height: 90vh;
}

#impressum {
	grid-column: -3 / -1;
	grid-row: -3 / -1;  
	place-self: end end; 	
	background: #c82f04; 
	color: white;
	padding: 1em;
}

body > * {
	background-color: #fdfcf3;
	border: thin solid; 
}

h1 {
	grid-column: 1 / -1;
	height: min-content;
}
</style>

<body>
<h1>Grid mit Text unten rechts</h1>

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

<div></div>
<div></div>
<div></div>
<div></div>

<p id="impressum">  
	&copy; Impressum by me, 2020
</p> 

</body>
</html>