Registrer deg
Script • CSS3 layout og frontend

CSS3 responsiv mediablokk

Kombinerer bilde og tekst i et fleksibelt kort som faller pent på mobil.

Les gjennomFlere scripts
.media-card {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.media-card__image {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-ra
Weboracle
18.07.20260 visningerCSS3

Kombinerer bilde og tekst i et fleksibelt kort som faller pent på mobil.

CSS3 responsiv mediablokk er et praktisk script/eksempel for CSS3. Det er skrevet for å være kopierbart, men også forklart slik at leseren forstår bruksområde, krav og begrensninger.

Illustrasjon: CSS3 responsiv mediablokk
Bildet viser ressursens plass i arbeidsflyten: input, kontroll, resultat og publisering.

Når bør du bruke dette?

Bruk eksempelet når du trenger en liten, tydelig byggekloss som kan testes isolert før den kobles til et større nettsted. Det er særlig nyttig når samme oppgave gjentas, når innhold må kontrolleres før publisering, eller når layout og markup må tåle ukjent redaksjonelt innhold.

Krav og forutsetninger

Moderne nettleser med støtte for CSS Grid og aspect-ratio. Test alltid i en kopi før du legger løsningen inn i produksjon. Tilpass filstier, klassenavn, meldinger og sikkerhetsnivå til ditt eget miljø.

Slik tilpasser du scriptet

  1. Les gjennom beskrivelse og krav før du kopierer kode.
  2. Bytt navn, stier og selektorer til lokale verdier.
  3. Kjør et lite testsett med både gyldig og ugyldig input.
  4. Dokumenter hva scriptet gjør når noe feiler.

Sikkerhet og kvalitet

Ikke stol på klientdata alene. Data som skal lagres eller brukes i filsystem, database eller publisert HTML må kontrolleres på server eller i en tilsvarende trygg rutine. Feilmeldinger bør være tydelige uten å lekke sensitive detaljer.

Kontroll før publisering

  • Koden er syntaktisk kontrollert.
  • Eksempelet har et konkret bruksområde.
  • Det finnes kravfelt og forklaring.
  • Det er tydelig hva som må endres lokalt.
  • Illustrasjon og tekst støtter samme tema.

Kilder og videre lesning