CSS Grid-Layout

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8">
	<title>Beispiel CSS Grid</title>
 
	<link rel="stylesheet" href="beispiel-style.css">
 
</head>
 
<body>
    <div class="wrapper">
 
        <div>
            adipisicing an praesentibus coniunctione quae voluptatibus singulis nam de 
            summis sed voluptatibus duis doctrina offendit appellat transferrem noster legam 
            comprehenderit appellat adipisicing id ita praesentibus iudicem relinqueret 
            tamen sint anim   
            adipisicing an praesentibus coniunctione quae voluptatibus singulis nam de 
            summis sed voluptatibus duis doctrina offendit appellat transferrem noster legam 
            comprehenderit appellat adipisicing id ita praesentibus iudicem relinqueret 
            tamen sint anim
        </div>
        <div>irure ab tractavissent appellat esse incididunt expetendis despicationes 
            adipisicing esse doctrina praesentibus consequat iudicem an coniunctione malis 
            varias vidisse veniam
        </div>
        <div>irure ab tractavissent appellat esse incididunt expetendis despicationes 
            adipisicing esse doctrina praesentibus consequat iudicem an coniunctione malis 
            varias vidisse veniam
        </div>
        <div>
            adipisicing an praesentibus coniunctione quae voluptatibus singulis nam de 
            summis sed voluptatibus duis doctrina offendit appellat transferrem noster legam 
            comprehenderit appellat adipisicing id ita praesentibus iudicem relinqueret 
            tamen sint anim            
        </div>
        <div>
            adipisicing an praesentibus coniunctione quae voluptatibus singulis nam de 
            summis sed voluptatibus duis doctrina offendit appellat transferrem noster legam 
            comprehenderit appellat adipisicing id ita praesentibus iudicem relinqueret 
            tamen sint anim            
        </div>
        <div>irure ab tractavissent appellat esse incididunt expetendis despicationes 
            adipisicing esse doctrina praesentibus consequat iudicem an coniunctione malis 
            varias vidisse veniam
        </div>
        <div>irure ab tractavissent appellat esse incididunt expetendis despicationes 
            adipisicing esse doctrina praesentibus consequat iudicem an coniunctione malis 
            varias vidisse veniam
        </div>
        <div>
            adipisicing an praesentibus coniunctione quae voluptatibus singulis nam de 
            summis sed voluptatibus duis doctrina offendit appellat transferrem noster legam 
            comprehenderit appellat adipisicing id ita praesentibus iudicem relinqueret 
            tamen sint anim            
        </div>
 
 
 
    </div>
 
</body>
 
</html>

<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8">
	<title>Example Title</title>
 
	<link rel="stylesheet" href="mywebpage-style.css">
 
</head>
 
<body>
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>
        <div>main1 </div>
        <div>main2 </div>
        <div>main3 </div>
        <div>main4 </div>
        <div>main5 </div>
        <div>main6 </div>
        <div>main7 </div>
        <div>main8 </div>
    </main>
    <footer>footer</footer>
</body>
 
</html>

CSS Grid-Layout

Grundlagen

Webseite strukturieren