Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/css-broken-grid-demo.markdown

Created September 27, 2024 21:28
Show Gist options
  • Save jensgro/96a7f14865de7b1a8209c5641bdfa9b3 to your computer and use it in GitHub Desktop.
Save jensgro/96a7f14865de7b1a8209c5641bdfa9b3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jensgro created this gist Sep 27, 2024.
    7 changes: 7 additions & 0 deletions css-broken-grid-demo.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    CSS Broken Grid Demo
    --------------------


    A [Pen](https://codepen.io/jensgro/pen/Exqjdda) by [Jens Grochtdreis](https://codepen.io/jensgro) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/Exqjdda).
    12 changes: 12 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    <main class="grid">
    <figure class="element-1">
    <img src="https://lucascranach.org/imageserver-2022/MX_JAPS_10633_FR-none/01_Overall/MX_JAPS_10633_FR-none_Overall-m.jpg" alt="Heiliger Hieronymous in einer Landschaft">
    </figure>

    <header class="element-2">
    <h1>Heiliger Hieronymous in einer Landschaft</h1>
    <h2>Malerei auf Holz, um 1515</h2>
    </header>

    <p class="element-3">Der büßende Hieronymus sitzt schreibend in der Wildnis an einem provisorischen Tisch. Neben dem aufgeschlagenen Buch findet sich das Kruzifix auf dem Tisch. Auch wenn das Kardinalsgewand den Status des Heiligen noch verrät, bleibt der Oberkörper frei, der graue Bart hängt in langen Bahnen hinab. In der weiten Landschaft im Hintergrund erreicht ein Zug mit Packtieren ein Gebäude.</p>
    </main>
    63 changes: 63 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 20px;
    color: #333;
    font-size: 1rem;
    }
    figure{
    margin: 0;
    img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    }

    h1 {
    font-size: 1.4rem;
    background-color: #fff;
    }

    h2 {
    font-size: 1.2rem;
    background-color: #000;
    color: #fff;
    }

    h1, h2{
    padding: 0.2em 0.5em;
    margin: 0;
    display: inline-block;
    }

    /* ab hier wird gespielt
    ############################################################ */

    .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1rem;
    }

    .element-1 {
    grid-column: 1/4;
    grid-row: 1/3;
    }
    .element-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    background: rgba(0,0,0,0.75);
    position: relative;
    }
    h2 {
    position: absolute;
    bottom: 0;
    right: 0;
    }
    .element-3 {
    grid-row: 3 / 4;
    grid-column: 1 / 4;
    }