Depot43-Unterlagen - Layout Media-Query

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>HTML5 Flex CSS - Layout Media-Query</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%; 
		grid-template-areas:  
		"header header header header" 
		"content content content sidebar" 
		"footer footer footer footer"; 
	 } 
		header { 
		grid-area: header; 
		background:tomato;
	} 
	article { 
		grid-area: content;
		background:grey;
	} 
	aside { 
		grid-area: sidebar; 
		background:lightblue;
	} 
	footer { 
		grid-area: footer;
		background:tomato;
	}
	  
	/* -----------media queries --------------------------- */
	@media screen and (max-width: 640px) {
		body {background:#ccc;}
		main.container { 
			height:100vh; 
			display: grid; 
			grid-template-rows: 100px 50px 1fr 50px; 
			grid-template-columns: 25% 25% 25% 25%; 
			grid-template-areas:  
			"header header header header"
			"sidebar sidebar sidebar sidebar"
			"content content content content" 
			"footer footer footer footer"; 
		}   
	}
  </style>
</head>
<body>
	<main class="container"> 
		<header>header</header>  
		<article>article</article>  
		<aside>aside</aside>  
		<footer>footer</footer>  
	</main>
</body>
</html>


 

            

Hinweis

Breakpoint ist bei 640px, die Media-Query wird dabei aktiv. das Grid wird dadurch verändert.

Desktop - über 640px Breite (3 Rows, sidebar ist rechts vom content):

    main.container { 
        height:100vh; 
        display: grid; 
        grid-template-rows: 100px 1fr 50px; 
        grid-template-columns: 25% 25% 25% 25%; 
        grid-template-areas:  
        "header header header header" 
        "content content content sidebar" 
        "footer footer footer footer"; 
     }

Smart - unter 640px Breite (4 Rows, sidebar ist zwischen header und content):

        main.container { 
            height:100vh; 
            display: grid; 
            grid-template-rows: 100px 50px 1fr 50px; 
            grid-template-columns: 25% 25% 25% 25%; 
            grid-template-areas:  
            "header header header header"
            "sidebar sidebar sidebar sidebar"
            "content content content content" 
            "footer footer footer footer"; 
        }