Hi zusammen,
ich habe mich gestern nach jahrelanger Verwendung von bootstrap nun mal dazu entschlossen, mich mit CSS grid zu beschäftigen.
Vorab gleich mal die Frage (weil ich nicht mehr auf dem aktuellen Stand bin...):
Ist es überhaupt empfehlenswert, auch für kommerzielle Projekte CSS Grid einzusetzen, oder ist zu erwarten, dass viele noch Browser im Einsatz haben, die damit nicht zurecht kommen?
Was ich in meinem Projekt möchte:
Mehrere "Kachelartig" angeordnete DIVs, die sich je nach Bildschirmbreite nebeneinander anordnen und immer gleich hoch sind.
Und hier mal konkret zu meinem Problem (das auf euch wahrscheinlich lächerlich wirkt, aber ich komm echt nicht drauf):
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>CSS-Grid Test</title>
<style>
*,::before,::after{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
main {
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(25em, 1fr));
color: black;
font: 1em/1.3 Cambria, serif;
}
main > section {
margin:0;
padding:0;
}
</style>
</head>
<body>
<main>
<section>
Test
</section>
<section>
Test 2
</section>
<section>
Test 3
</section>
<section>
Test 4
</section>
<section>
Test 5
</section>
<section>
Test 6
</section>
<section>
Test 8
</section>
</main>
</body>
</html>Das Problem ist, dass ich immer einen kurzen ´, horizontalen Scrollbalken hab, wenn ich die Seite auf meinem Handy Anzeige.
Und ich komm einfach nicht drauf, an welcher Schraube ich drehen muss, dass der Scrollbalken weg ist...
Könnt ihr mir eine kleine EInstiegshilfe geben?
LG und schönen Sonntag allen
Daniel