Depot43-Unterlagen - Layout Elemente platzieren

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 Flex CSS - Layout Elemente platzieren</title>
  <style>
    body {background:#fff;margin:0;padding:0;}
    main.container { 
	      height:100vh; 
	      display: grid; 
	      grid-template-rows: 100px 1fr 50px; 
	      grid-template-columns: 25% 25% 25% 25%; 
    } 
    header { 
	      background:tomato; 
	      grid-column-start:1; 
	      grid-column-end:5; 
	      grid-row-start:1; 
	      grid-row-end:2; 
    } 
    article { 
	      background:grey; 
	      grid-column-start:1; 
	      grid-column-end:4; 
	      grid-row-start:2; 
	      grid-row-end:3; 
    } 
    aside { 
	      background:lightblue; 
	      grid-column-start:4; 
	      grid-column-end:5; 
	      grid-row-start:2; 
	      grid-row-end:3; 
    } 
    footer { 
	      background:tomato; 
	      grid-column-start:1; 
	      grid-column-end:5; 
	      grid-row-start:3; 
	      grid-row-end:4; 
    }
  </style>
</head>
<body>
	<main class="container"> 
		<header>header</header> 
		<article>article</article> 
		<aside>aside</aside> 
		<footer>footer</footer> 
	</main> 
</body>
</html>


 

            

Hinweis

Positionen "start" und "end"

Gezählt werden die Spaltenlinien nicht die Flächen.

Zeilen:

1-2 header
2-3 content/aside
3-4 footer

Spalten:

1-5 header
1-4 content
4-5 aside
1-5 footer