Guri
Mitglied
Hallo Leut,
ich bastelle ein neues Design mit CSS Grid, gerade bin ich beim Navigation und komme nicht weiter,
durch googlen könnte ich weiter kommen aber nicht wie gewünscht,
wie mache ich dass die menu-items wagrecht schweben, und bei verkleinen sollen kleiner werden wie der Text,
wenn keine mehr freie Raum ist, sollen nach unter rutschen, sollen nicht ein feste breite haben, wie in mein Beispiel:
wie kann ich es lösen, ich bin dankbar für jede hilfe, vielen Dank im Voraus,
gruß Guri.
PS: Ein von möglichen lösungen per Flex ist:
Wie wurde gelöst mit Flex häte gerne auch mit Grid.
ich bastelle ein neues Design mit CSS Grid, gerade bin ich beim Navigation und komme nicht weiter,
durch googlen könnte ich weiter kommen aber nicht wie gewünscht,
wie mache ich dass die menu-items wagrecht schweben, und bei verkleinen sollen kleiner werden wie der Text,
wenn keine mehr freie Raum ist, sollen nach unter rutschen, sollen nicht ein feste breite haben, wie in mein Beispiel:
HTML:
<html>
<head>
<style>
.container {
background: red;
}
ul {
background: orange;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 5px 10px;
}
li {
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Content-Type</li>
<li>Description</li>
<li>Site Name</li>
<li>Copyright</li>
</ul>
</div>
</body>
</html>wie kann ich es lösen, ich bin dankbar für jede hilfe, vielen Dank im Voraus,
gruß Guri.
PS: Ein von möglichen lösungen per Flex ist:
HTML:
<html>
<head>
<style>
.container {
background: red;
}
ul {
background: orange;
display: flex;
flex-flow: row wrap;
}
li {
background: yellow;
flex: 0 1 auto;
margin: 5px 10px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Home</li>
<li>Content-Type</li>
<li>Description</li>
<li>Site Name</li>
<li>Copyright</li>
</ul>
</div>
</body>
</html>Wie wurde gelöst mit Flex häte gerne auch mit Grid.
Zuletzt bearbeitet:
