Wo liegt der Fehler im Grid - system

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich erlerne gerade das CSS Grid – Sytem und verzweifel daran weil ich es einfach nicht kapiere…

Ich habe einen umfassenden Div – Container erstellt in dem sich 3 weitere Divs’s befinden mit den Klassennamen Eins, Zwei und Drei,

Div Eins soll ganz oben erscheinen und sich über die ganze Breite erstrecken. Darunter sollen Div Zwei und Div Drei platziert werden, wobei Div Zwei 1/3 der Breite einnehmen soll und Div Drei soll 2/3 einnehmen.

Aber beide nehmen jeweils die Hälfte ein.


Mein HTML sieht so aus:

    <body>
        <div class="container">
            <div class="eins">Div 1</div>
            <div class="zwei">Div 2</div>
            <div class="drei">Div 3</div>
        </div>
    </body>

Und hier CSS:

.container {
    display: grid;
}

.eins {
    background-color: #00FFFF;
    padding: 2rem;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.zwei {
    background-color: #008080;
    padding: 2rem;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.drei {
    background-color: #808000;
    padding: 2rem;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

Vielleicht kann mir jemand sagen wo der Fehler liegt. Zu dem Thema hatte ich auch schon ein Buch von Florence Maurtice gelesen. Aber die kann das leider überhaupt nicht verständlich erklären. Vielleicht kennt auch jemand ein Buch in dem das Grid - Sytem verständlich erklärt wird

Wo wir schon dabei sind:
Was ist der Unterschied von
vh: 100 und vw: 100
zu
html {heigt: 100%,} und z.B. div {width: 100%} ?

Oder besser gefragt: Von wo bis wo erstrecken sich diese Maße?

Vielen Dank für’s Lesen

#2

Hallo!

Diese a/b notation bedeutet, in welcher Zelle etwas anfängt,und in welcher es aufhört.

Dein erstes Element mit grid-column: 1 / 3 belegt die Spalten 1, 2 & 3.

Dein zweites Element mit grid-column: 1 / 2; belegt die Spalten 1 & 2

Dein drittes Element mit grid-column: 2 / 3; belegt die Spalten 2 & 3

Da die 2. Spalte doppelt belegt ist, knallt es. Das zweite Element müsste grid-column: 1 / 1; haben.

#3

Hallo sweber,

erstmal vielen Dank für deine Antwort.

Ich habe beim Div zwei grid-column: 1 / 1; eingetragen. Das brachte aber keinerlei Veränderung. Div zwei und Div drei nehmen jeweils 50% der Breite ein.

Beim rumexperimentieren habe ich nun folgendes eingegeben:

.container {
display: grid;

}

.eins {
background-color: #00FFFF;
padding: 2rem;
grid-column: 1 / **4**;
grid-row: 1 / 2;
}

.zwei {
background-color: #008080;
padding: 2rem;
grid-column: 1 / **2**;
grid-row: 2 / 3;
}

.drei {
background-color: #808000;
padding: 2rem;
grid-column: 2 / 3;
grid-row: 2 / 3;

}

Nachdem ich bei Div eins grid-column: 1 / 4; eingetragen habe und bei Div 2 grid-column: 1 / 2; dann funktioniert es. Allerdings verstehe ich das System dahinter nicht. Man soll sich ja beim Gridsystem das Ganze voher auf einem Blatt Papier aufzeichnen und dort die Rasterlinien eintragen. Da komme ich aber nur auf 3 Rasterlinien.

Weshalb muss ich dann bei Div eins den Wert 4 eingeben?

Ganz schön kompliziert.
Vielleicht sollte ich zum Gestalten doch lieber auf Tabellen zurück greifen. :smile:

#4

Nö, aber man kann wunderbar mit divs auch ohne grid arbeiten. Ich arbeite schon lange mit HTML/CSS, ich unterrichte das sogar auch, aber mit grid habe ich z. B. noch nichts gemacht. Auf Tabellen zur Layoutgestaltung habe ich allerdings schon lange verzichtet.

#5

Hallo,

das mit dem Gestalten durch Tabellen war natürlich nicht Ernst gemeint. Dafür benutze ich schon seit längerer Zeit flex.

Mir geht es darum, dass ich verstehe wie das Grid-Sytem funktioniert und angewendet wird. Wenn ich etwas lerne, dann möchte ich es komplett lernen. Und auf den Seiten im Internet, die über das Grid-System. schreiben, stellt sich bei mir einfach nicht der „AHA – Effekt“ ein. Das Gleiche bei Büchern (s. o. Maurice). Deshalb auch meine Frage nach einem guten Buch, dass das Grid-System verständlich erklärt.

#6

Du hast leider nicht geschrieben, welche Seiten du dir angeschaut hast. Diese hier
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
erklärt es ziemlich ausführlich
hier z. B. ist auch das mit grid-column gut erklärt, finde ich: https://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften/grid-column

#7

Da das quasi mein Fachgebiet ist hier mal ein Link zu einem wirklich guten Guide (https://css-tricks.com/snippets/css/complete-guide-grid/). Die Seite hat allgemein viele hilfreiche Guides zu allen möglichen Webdevelopment Themen.