CSS Grid Anfänger

  • Moin Zusammen,


    ich habe mal endlich angefangen mich mit Responsive Webdesign auseinander zu setzen und weg von der Tabellen Struktur :D - Bin ich froh, dass ich die Möglichkeit von Grids gefunden habe, das macht es schon mal einfacher.


    Nun meine Fragen:


    Wenn ich ein Layout aufbaue gehe ich wie folgt für Header, Navi, Content und Footer vor:


    Und HTML baue ich dann so auf:

    Code
    1. <div class="container">
    2. <div class="header"><img src="images/logo.png"></div>
    3. <div class="navi">Navi</div>
    4. <div class="content">Content</div>
    5. <div class="footer">Footer</div>
    6. </div>


    Im Header habe ich ein Logo, dieses Logo bekomme ich aber nicht zentriert bzgl Höhe und Breite. Wie bekomme ich das hin?


    Den Content Bereich erstelle ich in der Regel immer dynamisch mit PHP und MySQL. Macht es Sinn hier ein 2. Grid innerhalb des Contents zu erzeugen, um den eigentlichen Content in dem Bereich zu positionieren?

  • Zitat

    Im Header habe ich ein Logo, dieses Logo bekomme ich aber nicht zentriert bzgl Höhe und Breite. Wie bekomme ich das hin?

    Horizontal zentrieren kannst Du mit text-align: center; Wenn es auch vertikal sein soll, mit Flex:

    Code
    1. display: flex;
    2. align-items: center;
    3. justify-content: center;

    Damit die vertikale Zentrierung greift, muss jedoch freier Raum vorhanden sein.

  • Vielen Dank für die Rückmeldung. Ich werde es mal ausprobieren mit flex.

    Zu der Anzahl der Spalten: Es ist für eine Intranetseite und es wird so vorgegeben, bei welcher Auflösung welche Anzahl von Spalten verwendet werden soll :(