Layout mit Grid

Spider67

Hallo,

wie muss ein Layout unter Verwendung des Grid Layout im CSS definiert werden, damit folgendes erreicht wird:

Auf jeder Seite sollen sich links und rechts je eine Navigation befinden, sowie ein Header und ein Footer, der Mainbereich soll auf jeder Seite anderen Inhalt bekommen.

Auf der Startseite sollen im Mainbereich ein horizontaler Bereich als Header und darunter zwei horizontale Bereiche als sections nebeneinander platziert werden, die jedoch auf den anderen Seiten natürlich nicht vorkommen.

Für Hilfe bin ich natürlich sehr dankbar.

LG aus Österreich.

Bandit

Was hast du denn bisher versucht? Das hört sich für mich irgendwie nach einer Hausaufgabe an.

Spider67

Guten Morgen,

derzeit wird das mit Frames realisiert, da die Seite schon lange besteht. Ich möchte das jedoch nach und nach modernisieren, wobei ich die Seite nur nebenbei als Autodidakt betreue. Ich denke aber, dass Grid bzw. Flexbox die modernen Varianten zur Gestaltung des Layouts sind.

Mit Flexbox habe ich auch schon Seiten gestaltet, das funktioniert auch super, mit Grid habe ich noch keinerlei Erfahrung, weiß jedoch ungefähr über den Aufbau Bescheid.

basti1012

Warum machst du es nicht mit Flexbox , wenn du das schon gemacht hast ?

Damit klappt das auch wunderbar und einfach

Spider67

Weil Flexbox doch eher für zweidimensionale Layouts gedacht ist, und die Möglichkeiten bezüglich der Positionierung doch eingeschränkt sind (Elemente erstrecken sich zB über mehrere Spalten oder Zeilen; Spalten oder Zeilen bleiben frei etc.)

Spider67

Hallo, hier habe ich noch ein Positionierungsproblem:

Nachfolgend das CSS:

#wrapper {

display: grid;

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

grid-template-columns: 250px 1fr 250px;

height: 100vh;

}

header {

background: #000066;

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

.flex {

display: flex;

justify-content: center;

align-items: center;

}

Und hier das html:

Wie muss ich jetzt das CSS ändern, damit die beiden "Bilder/logo_zander_animiert.gif" links und rechts am Rand stehen und nicht auch zentriert werden, wie das Logo und die beiden Zander, die sich hin und her bewegen?

Danke für Eure Hilfe.

MrMurphy

Es ist schwierig dir zu helfen, da deine HTML-/CSS-Kenntnisse veraltet, falsch und sinnfrei sind.

Ohne Zugriff auf die Bilder können wir deine Seite nicht mal ansatzweise nachbauen. Deshalb ein paar allgemeine Anmerkungen.

Zitat

Weil Flexbox doch eher für zweidimensionale Layouts gedacht ist,

Das wird zwar gerne behauptet, ist aber komplett falsch. Das haben Personen in die Welt gesetzt, die Flexbox und CSS-Grid nicht verstanden haben und dann wurde es unglücklicherweise von genau so unwissenden Usern weiter verbreitet.

Flexbox und CSS-Grid wurden parallel entwickelt, haben aber unterschiedliche Aufgaben und basieren deshalb auf vollkommen unterschiedlichen Herangehensweisen. Die angeblich wichtigen Dimensionen führen nur in die Irre.

Zitat

die Möglichkeiten bezüglich der Positionierung doch eingeschränkt sind (Elemente erstrecken sich zB über mehrere Spalten oder Zeilen; Spalten oder Zeilen bleiben frei etc.)

Genau so falsch. Flexbox und CSS-Grid bieten unterschiedliche Möglichkeiten. Entsprechend ist manchmal Flexbox und manchmal CSS-Grid von Vorteil. Flexbox bietet einige Möglichkeiten, die CSS-Grid nicht bietet und umgekehrt. Das hat nichts, aber auch rein gar nichts mit besser, schlechter, neu, aktuell, veraltet und ähnlichen Vergleichen zu tun. Ein PKW ist auch nicht besser oder schlechter als ein Reisebus und beide wiederum nicht besser oder schlechter als ein LKW und alle wiederum nicht besser oder schlechter als ein Radlader und .... Die sind schlicht für unterschiedliche Aufgaben erdacht worden. Gleiches gilt für Flexbox, CSS-Grid, Float und so weiter. Die haben alle unterschiedliche Aufgaben.

Code

<div id="wrapper">

Auch so ein Unsinn aus dunkelster Vergangenheit. Sogenannte Wrapper waren immer schon überflüssig und sind deshalb nach den aktuellen HTML-Regeln auch nicht mehr erlaubt. Also weglassen.

Code

role="banner"

Ist in deinem HTML genau so sinnfrei und überflüssig. Solche Angaben sind Hilfen zum Beispiel für Screenreader. Allerdings nützen die überhaupt nichts. wenn der Rest der Seite nicht auch barrierefrei ist. Und bei deinem restlichen HTML ist nichts barrierefrei.

Code

width="" height=""

Width- und heigt-Attribute haben bereits seit Jahren nichts mehr im HTML-Quelltext verloren.

Code

<div class="flex">
   <img src= ...

Das div-Element ist hier überflüssig und deshalb nach den HTML-Regeln nicht erlaubt.

Img-Elemente sollten in jeweils eigenen passenden Containern stehen, meist ist dafür das figure-Element geeignet. Außer es handelt sich um eine Bildergalerie, die ich deinen Bezeichnungen nach aber nicht erkenne. Zudem sind einige Bilder wohl auch eher Hintergrundbilder, die entsprechend über CSS eingebunden werden sollten.

Spider67

Danke für die ganzen Erklärungen, die mir als Laie und Autodidakt überhaupt nicht weiterhelfen. Keine einzige der angeführten Aussagen oder Behauptungen löst mein Problem, dass die beiden Bilder (Zander links und rechts außen) nicht zentriert sein sollen, sondern rechts und links am Rand des Headers positioniert sein sollen.

Nachfolgend noch ein paar Anmerkungen zu Deiner "Hilfe": Das div Element ist nicht überflüssig, da es dafür verantwortlich ist, alle imgs zu zentrieren (was ja auch bestens funktioniert). Weiters sind überhaupt keine Hintergrundbilder vorhanden. Zusammenfassend bleibt mir dann leider nur zu sagen, dass auch Dein Kommentar zwar nicht veraltet aber leider total sinnfrei ist. Aber trotzdem danke dafür, schade, dass Du meine Frage nicht beantwortet hast, obwohl Du ganz schön viel geschrieben hast.

LG aus Österreich.

MrMurphy

Zitat

Keine einzige der angeführten Aussagen oder Behauptungen löst mein Problem, dass die beiden Bilder (Zander links und rechts außen) nicht zentriert sein sollen, sondern rechts und links am Rand des Headers positioniert sein sollen.

Habe ich doch geschrieben: Ohne Zugriff auf die Bilder können wir deine Seite nicht mal ansatzweise nachbauen.

Wenn du uns Infos vorenthältst können wir dir schlicht nicht helfen.

Ob Grafiken Vorder- oder Hintergrundbilder sind ist auch nicht deine Entscheidung, sondern richtet sich nach dem Inhalt der gesamten Webseite und den HTML-Regeln. Wenn du gar nicht vorhast die zu lernen sehe ich ein weiteres Hindernis dir zu helfen.

Meine Antworten sind auch nicht ausschließlich für dich, sondern für alle Besucher, da es sich um ein öffentliches Forum handelt. Wenn du auf sachlich falsche Lösungen bestehst sollten Andere schon darüber informiert werden, damit sie sich für korrektes HTML entscheiden können.

Vielleicht hilft dir ja noch jemand in deinem Sinn.

Spider67

Hallo,

ich habe jetzt mal die ganzen "height" und "width" entfernt und einen Versuch mit zwei weiteren divs mit Display : flewx gestartet. Der blinkende Zander wird zwar links am Rand dargestellt, jedoch wird das zentrierte Logo und das zweite div aus dem Header nach unten hinausbefördert.

Nur wenn ich die beiden Zander links und rechts außen innerhalb des zentrierten divs eintrage, passt alles. Hier nochmals das html und das geänderte CSS sowie die Bilder als Dateianhang.

Danke für die mögliche Hilfe.

HTML

<div id="wrapper">
<header role="banner"><div class="zanderlinks"> <img src="../../bilder/logo_zander_animiert.gif" alt="blinkender Zander"/></div>
<div class="flex"><img src="../../bilder/animierter_zander_von_links_nach_rechts.gif" alt="Zander von links nach rechts"/><img src="../../banner-Dateien/image001.gif" alt="Logo Verein" /><img src="../../bilder/animierter_zander_von_rechts_nach_links.gif" alt="Zander von rechts nach links"/><div class="zanderrechts"> <img src="../../bilder/logo_zander_animiert.gif" alt="blinkender Zander"/></div></div></Header>

CSS

#wrapper {
display: grid;
grid-template-rows: 100px 1fr 100px;
grid-template-columns: 250px 1fr 250px;
height: 100vh;
}

header {
background: #000066;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}

.flex {
display: flex;
justify-content: center;
align-items: center;
}

.zanderlinks {
display: flex;
justify-content: flex-start;
align-items: center;
}

.zanderrechts {
display: flex;
justify-content: flex-end;
align-items: center;
}

Alles anzeigen

Spider67

Nochmal zur Erklärung: Mein Wunsch ist, dass sich im Kopfbereich zentriert in der Mitte das Logo flankiert von den beiden schwimmenden Zandern befindet.

Links und rechts am Rand des Kopfbereiches sollen die blinkenden Zander erscheinen. Ich schaffe es jedoch nur, alles gemeinsam zentriert anzuzeigen. Sonst rutscht immer das zentrierte Bild nach unten aus dem Kopfbereich heraus.

Es ist für mich auch kein Problem, wenn alles zentriert dargestellt wird, ich möchte nur den Grund verstehen, warum die andere Lösung nicht klappt.

MrMurphy

Da die Bezeichnungen meiner Testdateien der Übersichtlichkeit wegen einer bestimmten Systematik folgen, musst du die Pfad- und Dateinamen der Grafiken deiner Webseite anpassen und den Text in den alt-Attributen nach deinen Vorstellungen ausfüllen.

Die Darstellung ist einfach mit Flexbox zu erstellen.

Nach deiner Beschreibung sehe ich zu folgendem HTML

Code

<body>
   <header class="pageheader">
      <figure>
         <img src="2019_11_16_spider67_layout_mit_grid_01.gif" alt="Text"/>
      </figure>
      <figure>
         <img src="2019_11_16_spider67_layout_mit_grid_03.gif" alt="Text"/>
      </figure>
      <figure>
         <img src="2019_11_16_spider67_layout_mit_grid_04.gif" alt="Text"/>
      </figure>
      <figure>
         <img src="2019_11_16_spider67_layout_mit_grid_03.gif" alt="Text"/>
      </figure>
      <figure>
         <img src="2019_11_16_spider67_layout_mit_grid_02.gif" alt="Text"/>
      </figure>
   </header>
</body>

Alles anzeigen

das folgende CSS

Code

figure {
   min-width: 1px;
   max-width: 100%;
   min-height: 1px;
   margin: 0rem;
}
img {
   min-width: 1px;
   display: block;
   max-width: 100%;
   border: 0px;
}
body {
   min-height: 100vh;
   padding: 0;
   margin: 0;
}
.pageheader {
   background: #000066;
   display: flex;
   align-items: center;
}
.pageheader figure:nth-of-type(1) {
   margin-right: auto;
}
.pageheader figure:nth-of-type(5) {
   margin-left: auto;
}

Alles anzeigen

Bandit

Mal etwas Off-Topic: solche animierten Gif's will doch heutzutage niemand mehr sehen, das ist Old-School

Spider67

@Mr. Murphy.

Danke für Deine Mühe und Hilfe. Verstehe ich das richtig, dass Dein Coede mein Positionierungsproblem im Header löst, ich aber rotzdem den Rest der Seite mit dem Grid Layout weiter aufbauen bzw. den bereits erstellen Teil auch so lassen kann?

Danke vorab.

MrMurphy

Ja klar. Für den üblichen Grundaufbau einer Webseite (header, nav, main, aside, footer), also den Containern direkt im body-Bereich, ist so meist CSS-Grid sinnvoller.

CSS-Grid und Flexbox können beliebig oft unabhängig auf einer Webseite verwendet werden. Grundlage ist dabei fast immer ein korrekter und damit gleichzeitig übersichtlicher HTML-Quelltext.

Eine Erleichtung durch Flexbox und CSS-Grid ist grade, dass sie sich nicht vererben.

Spider67

Ok, danke vorerst für Deine Hilfe ich werde weiter an der Gestaltung der Startseite arbeiten. Vielleicht habe ich ja noch die eine oder andere Frage dazu.

Es wird sicher ein Projekt über mehrere Monate, da ich vorhabe nach und nach die komplette Website auf modernes Design umzustellen (derzeit ist noch alles über Tabellen und Frames dargestellt. Da ich das aber als Autodidakt und nebenberuflich als Hobby betreibe, wird es halt entsprechend dauern. Interessant ist es jedenfalls

Spider67

Schon ist eine Frage aufgetaucht: mit der Eigenschaft: grid-row-gap kann ich ja Abstände zwischen den Zeilen erzeugen. Besteht irgendeine Möglichkeit, diese Abstände auf einige Bereiche einzuschränken, sodass die Abstände zwischen den Bereichen nicht überall vorhanden sind? Anders gefragt, kann man es definieren, das z.B. zwischen 2 vertikalen Bereichen in Spalte 1 kein Abstand vorhanden ist in Spalte 2, 3 und 4 schon und in Spalte 5 nicht? Also wie ist es möglich, vertikale Elemente in einzelnen Spalten mit Abständen und in anderen Spalten ohne Abstände anzuzeigen? Ist dies mit den Eigenschaften: align-items oder align self möglich, oder geht das gar nicht?

Danke für die Hilfe.

MrMurphy

Nein, CSS-Grid ist dafür gedacht eine Tabellendarstellung mit gleichmäßigen Abständen zwischen den Elementen zu ermöglichen. Also überall gleiche Abstände.

Wie bereits geschrieben hängt das CSS vom HTML ab und das HTML wiederum vom Inhalt der Webseite. Ohne den Inhalt zu kennen hängt man bei einem Hilfeversuch ohne den Inhalt deshalb in der Luft.

So allgemein würde ich zu CSS-Grid mit gap zusätzlich mit padding und margin und vielleicht auch border arbeiten. Das kann aber eine üble Bastelei werden.

Mir scheint wieder mal Flexbox besser geeignet.

Spider67

Hallo Mr. Murphy,

wenn man sich jedoch das Tutorial unter diesem Link ansieht: "https://www.on-design.de/tutor/html5_cs…d.html#implicit"

gibt es unter dem Punkt "Definieren der Tracks/Spanning" ein Bespiel mit 3 Containern wo zwischen dem Container a und dem Container C eine Spalte von 20px ausgewiesen wird. Diese Spalte findet sich im Container B, der sich von Zeile 1 bis Zeile 3 erstreckt, nicht. Das wäre genau das Layout, das ich gemeint habe. Wie ist das zu bewerkstelligen, dass anscheinend diese Spalte im Container B nicht auftaucht?

MrMurphy

Deine Frage hatte ich anders verstanden.

Der Container B wurde in dem Beispiel positioniert. Wenn ein Container über mehrere Zellen positioniert wird gibt es innerhalb des Containers keine Lücke. Dafür sorgt CSS-Grid automatisch.

Weiterhin werden die Zellen zunächst mit den positionierten Containern gefüllt, die nicht positionierten Container füllen dann die danach noch freigebliebenen Zellen auf.

Vorgehen dafür:

1. Durch "display: grid;" einen Container zu einem Grid-Container machen

2. Die Anzahl der Zeilen und Spalten und damit der Zellen bestimmen

3. Den Abstand zwischen den Zellen bestimmen

Alles drei geschieht in dem Beispiel durch die Angaben:

Code

.raster {
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 200px 200px;
   grid-gap: 20px;
}

Danach wird der Container B positioniert. Dafür gibt es in CSS-Grid mehrere Möglichkeiten. In dem Beispiel wurden dafür die Gridlinien verwendet.

Mit Erstellung des Rasters werden automatisch die Gridlininen erstellt. Die erste Linie beginnt links (bzw. oberhalb) der Zellen. Die letzte endet rechts (bzw. unterhalb) der Zellen. Es gibt also immer in jede Richtung eine Linie mehr als Zellen. Die erste ist immer die linke (bzw. oberste).

Die Linien werden vom CSS automatisch von links nach rechts bzw. von oben nach unten durchnummeriert, beginnend mit 1.

In dem Beispiel wird der Container B zunächst durch "grid-column-start: 2;" in die zweite Spalte gerückt. Ohne End-Angabe ist der Container genau eine Spalte breit. Also auch wenn es noch mehr Spalten geben würde, würde der Container B nur eine Spalte breit werden, wenn keine end-Angabe gemacht wird.

Durch "grid-row-start: 1;" beginnt Container B in der der ersten (obersten) Zeile. Durch "grid-row-end: 3;" endet Container B in der zweiten Zeile, erstreckt sich also ohne Lücke über zwei Zeilen.

Insgesamt also, wenn der Container B die Klasse B (class="b") hat:

Code

.b {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}

Dabei darf man halt die Zählweise der Linien nicht aus den Augen verlieren, die kann bei größeren Rastern leicht unübersichtlich werden.

Layout mit Grid

Ähnliche Themen

Bilder mit text horinzontal Anordnen

Virus auf Website in Code eingebaut? Hilfe? :o

CSS -> Select breite

Benutzer online in diesem Thema