oliverlindberg

/* Standard-Stile für Desktop-Layout */ 
.container { 
	max-width: 960px;  
	margin: 0 auto;  
	padding: 1.5em;  
} 
 
/* Media Query für Tablet-Geräte mit einer maximalen Breite von 767px */ 
@media only screen and (max-width: 767px) { 
	.container { 

oliverlindberg

@media only screen and (min-width: 48em) {  
	.container { 
    	max-width: 50rem;  
	} 

oliverlindberg

<div class="container"> 
	<div class="card"> 
    	… 
	</div> 
</div> 

oliverlindberg

/* Definiere den Container-Typ für die Klasse .container */ 
.container { 
   container-type: inline-size;  
} 
 
/* Definiere Standard-Stile für die Klasse .card */ 
.card { 
  background: blue;  
} 
 

oliverlindberg

body { 
	font-size: clamp(1rem, 2vi, 1.5rem); /* Schriftgröße skaliert zwischen 1rem und 1.5rem basierend auf der Viewport-Breite */ 

oliverlindberg

<button class="button">Klick mich</button> 
 
  <p class="large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet libero nisi.</p> 

oliverlindberg

/*  
   Definiere globale CSS-Variablen im :root-Selektor, um die Basis-Schriftgröße und Größen des 8-Punkt-Rasters festzulegen.  
   Diese Variablen können dann in verschiedenen Teilen des Stylesheets wiederverwendet werden. 
*/ 
:root { 
  /* Definiere die Basis-Schriftgröße */ 
  --base-font-size: 1em; 
   
  /* Definiere die Größen des 8-Punkt-Rasters in em */ 
  --spacing-0: 0rem; 

oliverlindberg

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Automatische Anpassung der Spaltenanzahl */ 
  gap: 1.5rem; /* Abstand zwischen den Grid-Elementen */ 
} 

oliverlindberg

.element { 
  width: min-content; /* Das Element wird nicht schmaler als sein Inhalt */ 
} 

oliverlindberg

.teaser:has(img) { 
  /* Wenn ein Bild im Teaser vorhanden ist, ändere das Layout auf zweispaltig */ 
  grid-template-columns: 1fr 1fr; 
}