• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Grid - Section als eigene Boxen

D

donluco

Neues Mitglied
Hallo!

Wie kann ich dafür sorgen, dass der Inhalt eines jeden section-tags als eigene Box dargestellt wird?
Komischerweise ist das bei <header> <nav> <article> und <footer> kein Problem.

So soll es am Ende ungefähr aussehen:

E6tNbzR.jpg

Hier ein Dummy, um das Problem besser zu zeigen:

Code: 
<body>
        <div id="container">
            <header>
                Header
            </header>
            <nav>
                Nav
            </nav>

            <article>
                <section>
                    thgt
                </section>
                <section>
                    thgt
                </section>
                <section>
                    thgt
                </section>
                <section>
                    thgt
                </section>
                <section>
                    thgt
                </section>
                <section>
                    thgt
                </section>
            </article>

            <footer>
                Footer
            </footer>
        </div>
    </body>

Code: 
#container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-gap: 4em;
    border: 1px solid;
    background-color: #ded;
}

header {
    grid-column: 1 / auto;
     grid-row: 1 / auto;
}

nav {
    grid-row: 1 / auto;
    grid-column: 2 / -1;
}

article {
    grid-row: 2 / auto;
    grid-column: 1 / -1;
    grid-gap: 2em;
}

section {
    background-color: #ede;
    padding: 0.2em;
}

footer {
    grid-column: 1 / -1;
}

Vielen Dank!
Konstantin
 
Hi Aaron,
ich hab keine Ahnung. Wie würde der Quelltext dazu aussehen, wenn ich die ganze Website mit einem Viererraster überziehen will und einzelne Bereiche wie <nav> oder <h1> 3 Spalten breit werden sollen?
 
Danke für das Beispiel!

Was ich meinte ist, dass bestimmte Bereiche wie das Menü mehrere Rasterfelder überspannen (so ala <span: 3>).

Allerdings ist das elegante an der (nicht ganz funktionierenden) Lösung oben, dass ich keine div-tags ineinander verschachteln muss. Daher die Frage: Gibt es eine praktikable Möglichkeit, das HTML-Dokument so zu lassen wie oben und nur den Stylesheet auf meine inhaltlichen Formatierungen wie <nav>, <article> und <section> reagieren lasse?
 
Danke nochmal. Aber wie gesagt bei der Lösung, die Du vorschlägst, wächst dein CSS-File mit jeder Box mit. Das ist nicht gerade flexibel.

Gibt es keine Lösung, dem CSS beizubringen, dass jedes section-Tag automatisch ein eigenes Rasterfeld bekommt?
 
Hallo

Für jedes Problem sollte die am besten passende CSS-Lösung gefunden werden.

Löse dich zunächst von dem Rasterfeld. Das ist eine Hilfskonstruktion für Frameworks wie Bootstrap.

Für die Anordnung der section-Elemente solltest du ein sogenannten Card-Layout mit Flexbox verwenden.

Gruss

MrMurphy
 
Hallo

Genau deinen Vorschlag mit Flexbox wollte ich unterstützen, da es für das gewünschte Layout die sinnvollste Lösung ist.

Aber natürlich nicht die einzige. Eine Lösung mit Grid läßt sich auch erstellen. Die ist aber aufwändiger und bietet meiner Meinung nach keine Vorteile.

Es gibt kein Ranking nach der Art: Grid ist besser als Flexbox, beide sind besser als Float, alle drei sind besser als Tabellenlayout und so weiter. Das sind einfach unterschiedliche Lösungen, welche für unterschiedliche Probleme gedacht sind.

Gruss

MrMurphy
 
MrMurphy schrieb:
Hallo
Für die Anordnung der section-Elemente solltest du ein sogenannten Card-Layout mit Flexbox verwenden.
Zum Vergrößern anklicken....

Danke für das Stichwort! Das verlockende am grid-System war/ist halt, dass ich dachte, die ganze Website einem einzigen großen Raster unterziehen zu können.

Mal ganz platt gefragt: Ist CSS mittlerweile soweit, dass man ein rein semantisches HTML-Dokument (nur mit <article> <section> usw.) mit Rastern layouten kann? Oder ist man immer noch gezwungen, die HTML-Datei mit lauter div-tags und Klassen zu durchziehen?

Mein 'Traum' wäre eine saubere Trennung zwischen HTML=Inhalt und CSS=Layout.

Und Sorry für das andauernde Nachhaken.. ; )
 
Ok, super, das schaut vielversprechend aus! Ich hab den Stylesheet noch ein bisschen weiter komprimiert und werd jetzt einfach mal gucken, ob ich damit als Grundgerüst meine ganze Seite aufziehen kann.
CMIE4PV.jpg

Code: 
.wrapper {
  max-width: 1280px;
  margin: 1em auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  grid-gap: 1em;
}

nav, header, main, section, footer {
  background-color: #eee;
  padding: 1em;
}

nav, main, footer {
  grid-column: 2 / 5;
}

Code: 
<! DOCTYPE html>
<html lang="en">
<html>
    <head>
        <title>Titel</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/style3.css">
    </head>

    <body>

        <div class="wrapper">
            <header>
                Titel
            </header>

            <nav>
                Navigation
            </nav>
        </div>

        <div class="wrapper">
            <main>
                Überschriften
            </main>
        </div>

        <article class="wrapper">
                <section>Hier</section>
                <section>können</section>
                <section>beliebig</section>
                <section>viele</section>
                <section>Boxen</section>
                <section>eingefügt</section>
                <section>werden</section>
                <section>!</section>
        </article>

        <div class="wrapper">
            <footer>
                Fußzeile
            </footer>
        </div>

    </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben