Display a section with an article containing text and styling using HTML, CSS, and JavaScript.

by joepenzo

HTML

<section>
  <article>
    Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
    Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
  </article>
</section>

SCSS

* {
    box-sizing: border-box;
}

$grid-unit: 45px; // Dit moet exact de hoogte van je rode balk/rij zijn

section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  // Gebruik minmax zodat de rij minimaal de grid-unit is, maar kan groeien
  grid-auto-rows: minmax($grid-unit, auto); 
  background-image: linear-gradient(red 1px, transparent 1px);
  background-size: 100% $grid-unit;
}

article {
  grid-column: 2 / span 6;
  // Belangrijk: span 'auto' zodat hij niet vastzit aan 1 rij
  grid-row: auto; 
  
  background: #fff;
  border: 1px solid #000;
  
  // Reset de hoogte: forceer hem om naar de content te kijken
  height: auto; 
  min-height: $grid-unit;
  overflow: visible; // Zorg dat we zien wat er gebeurt

  // Padding en line-height MOETEN matchen met de grid-unit
  padding: $grid-unit; 
  margin: 0;
  
  // Tekst styling
  font-size: 16px;
  line-height: $grid-unit; 
  display: block; // Voorkom flex-box gedrag dat de hoogte kan forceren

  margin-top: $grid-unit / 2;
  margin-bottom: $grid-unit / 2;
}