GridLayout will nicht funktionieren

Zamjin · 12.07.2022

Hallo Leute!
Ich bin neu hier, deshalb erstmal ein herzliches Hallo an euch alle und schon mal vielen Dank im Voraus für die Hilfe !

Ich habe folgendes Problem/Situatuion:

Ich bin momentan dabei mir html und css beizubringen (mithilfe einer Videotutorial-Reihe "codewithmosh" -> soll keine Werbung sein, tut eigentlich auch nichts zur Sache).
Bisher bin ich mit dem "Online Kurs" sehr zufrieden, allerdings im Kapital "Grid", bin ich jetzt langsam an dem Punkt angekommen, wo ich anfange an mir selbst zu zweifeln

Ich habe wirklich SCHRITT-FÜR-SCHRITT alles genau so (mehrmals) "nachgebaut" wie in besagtem Video, wenn ich jedoch das Developer Tool von Chrome hernehme,
wird angezeigt, dass es hier kein "grid-element" gibt --> siehe Screenshot.

hier l die index.html:

HTML:

!DOCTYPE html>

<html lang="de">

 <body>

    <div class="container"></div>

 </body>

</html>

und die sytles.css:

CSS:

.container {

    display: grid;

    grid-template-rows: 100px 100px 100px;

    grid-template-columns: 100px 100px;

    border: 3px solid lightgray;

}

Also nochmal meine Frage: WARUM erscheint bei meiner index.html kein Grid element via Chrome Developer Tool ?
Oder liegt das womöglich an meinem "System" und bei euch erscheint dort das Grid element ?

Ich hoffe ich hab mich verständlich ausgedrückt...
Verzeiht mir bitte... ich bin noch ein "Noob"

Vielen vielen Dank nochmal an all jene, die versuchen mir zu helfen !

scatello · 12.07.2022

Wo wird denn die style.css eingebunden, sehe ich nicht.

Zamjin · 12.07.2022

ah entschuldige. Ich poste mal den gesamten code... ist sowieso nicht wirklich viel ^^

html:

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <body></body>
    <title>Buergerverein Owingen</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
</html>

<body>
  <div class="container"></div>
</body>

css:

Code:

.container {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px;
    border: 3px solid lightgray;
}

edit: andere dinge in "styles.css" funktionieren.... wie font-size; font-type.... etc....nur eben grid nicht und ich verstehe nicht wieso

edit2: ich werd blöd.... jetzt tut's auf einmal.... ??????????????? und ganz ohne quatsch, <link rel="stylesheet" href="css/styles.css" /> war vorhin auch schon drin... ich habe jetzt bewusst nichts verändert.... da würd ich mich ja selbst veräppeln.

Sempervivum · 12.07.2022

Möglicher Weise hatte der Browser die CSS-Datei im Cache. Immer mit Strg+F5 neu laden wenn CSS oder Javascript ausgelagert ist.

Zamjin · 12.07.2022

ok vielen Dank !