hi
bin gerade ein wenig am testen und üben - und versuche mich gerade an :nth.
Leider scheint da noch ein ? zu sein welches ich mir noch nicht erklären kann (macht googlen auch schwer).
Was aktuell funktioniert ist für ein Grid Layout:
Wenn ich jetzt module1-3 nicht einzeln als Klasse deklarieren möchte sondern via :nth bekomme ich es nicht hin und er knallt mir alles in eine row (alle module).
Meine Idee war die module in ein div mit der Klasse test und dann die einzelnen module via .test:nth-child(1) usw auszuwählen.
Leider landet dann alles in main2 Grid
bin gerade ein wenig am testen und üben - und versuche mich gerade an :nth.
Leider scheint da noch ein ? zu sein welches ich mir noch nicht erklären kann (macht googlen auch schwer).
Was aktuell funktioniert ist für ein Grid Layout:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test4.css">
<title>Test 4</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<a href="#"><img src="src/img/webdesign-logo.png" alt="Logo der Firma Webdesign"></a>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</nav>
</div>
<div class="module1"><h2>Test1!</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias excepturi, dolore quidem cum similique, repellat unde ducimus vel soluta placeat dolores esse consequuntur architecto ratione earum error inventore, aliquid omnis.</p></div>
<div class="module2"><h2>Test2</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias excepturi, dolore quidem cum similique, repellat unde ducimus vel soluta placeat dolores esse consequuntur architecto ratione earum error inventore, aliquid omnis.</p></div>
<div class="module3"><h2>Test3</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias excepturi, dolore quidem cum similique, repellat unde ducimus vel soluta placeat dolores esse consequuntur architecto ratione earum error inventore, aliquid omnis.</p></div>
<footer>
<div class="footer"><ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul></div>
</footer>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.module1 {
grid-area: main1;
}
.module2 {
grid-area: main2;
}
.module3 {
grid-area: main3;
}
.wrapper {
display: grid;
grid-template-areas:
"header header header"
"main1 main2 main3"
"footer footer footer";
max-width: 1100px;
margin: 0 auto;
}
.header {
grid-area: header;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: blueviolet;
}
.header > a > img {
height: 60px;
width: auto;
}
.navbar > ul > li {
display: inline-block;
}
footer {
grid-area: footer;
justify-self: self-end;
}
.header > a > img {
height: 40px;
width: auto;
}Wenn ich jetzt module1-3 nicht einzeln als Klasse deklarieren möchte sondern via :nth bekomme ich es nicht hin und er knallt mir alles in eine row (alle module).
Meine Idee war die module in ein div mit der Klasse test und dann die einzelnen module via .test:nth-child(1) usw auszuwählen.
Leider landet dann alles in main2 Grid
Code:
<div class="test">
<div class="module"><h2>Test1!</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias excepturi, dolore quidem cum similique, repellat unde ducimus vel soluta placeat dolores esse consequuntur architecto ratione earum error inventore, aliquid omnis.</p></div>
<div class="module"><h2>Test2</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias excepturi, dolore quidem cum similique, repellat unde ducimus vel soluta placeat dolores esse consequuntur architecto ratione earum error inventore, aliquid omnis.</p></div>
<div class="module"><h2>Test3</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias excepturi, dolore quidem cum similique, repellat unde ducimus vel soluta placeat dolores esse consequuntur architecto ratione earum error inventore, aliquid omnis.</p></div>
</div>
.test:nth-child(1) {
grid-area: main1;
}
.test:nth-child(2) {
grid-area: main2;
}
.test:nth-child(3) {
grid-area: main3;
}
Zuletzt bearbeitet:
