Startseite Skripte für das Wintersemester 2018/19 Webdesign DOM und Desktop-Layouts Artikel eindrittel / zweidrittel


Artikel eindrittel / zweidrittel

eine klassische Aufteilung…

<section class="content"> wird über CSS angesprochen und damit über zwei Raster-Elemente „gestreckt“

HTML

<article class="raster">

    <section class="intro">
        <h2>Überschrift</h2>
        <p>intro-Text…</p>
    </section>

    <section class="content">
        <h2>Überschrift</h2>
        <p>content-Text…</p>
    </section>

</article>

CSS

.raster {

    /* Blocksatz */
    text-align: justify;

    /* Silbentrennung */
    hyphens: auto;

    display: grid;

    /* 3spaltiges Raster */
    grid-template-columns: repeat(3, 1fr);

    grid-gap: 1.5em;
}

.content {
    /* fängt bei Raster-Linie 2 an und überspannt 2 Rasterzellen */
    grid-column: 2 / span 2;
}

Demo

Artikel mit Eindrittel/Zweidrittel-AufteilungÄndert die Größe des Browser-Fensters und seht, was geschieht!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit in Brackets experimentieren…