CSS Broken Grid Demo

css-broken-grid-demo.markdown

CSS Broken Grid Demo

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<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>

style.css

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;
}