Frontend Academy · leksjon

Display: grunnleggende block, inline, flex og grid

Bytt mellom display-verdier, og se hvordan block, inline, flex og grid plasserer innhold på ulike måter.

Leksjon 3 av 413 trinn

Display: grunnleggende block, inline, flex og grid er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Egenskapen display

Egenskapen display er den viktigste CSS-egenskapen for layout. Den styrer hvordan et element deltar i layoutflyten, og hvordan de underordnede elementene ordnes. De mest brukte verdiene er: block, inline, inline-block, flex, grid og none.

display: block

Blokkelementer opptar hele bredden til beholderen og starter på en ny linje. Eksempler: <div>, <p> og <h1>. Du kan angi bredde, høyde, marg og utfylling for blokkelementer.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Inline-elementer flyter i teksten — de starter ikke på en ny linje. Eksempler: <span>, <a> og <strong>. Bredde, høyde og vertikale marger har ingen effekt på inline-elementer.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block kombinerer begge deler: elementet flyter inline (som tekst), men godtar bredde, høyde og vertikale marger (som en blokk). Det er nyttig for knapper og merker som skal stå på samme linje som tekst.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none fjerner elementet fullstendig fra layouten — det opptar ingen plass. Bruk visibility: hidden for å skjule elementet samtidig som plassen det opptok, beholdes.

Flexbox — endimensjonal layout

display: flex gjør et element til en flex-beholder. De direkte underordnede elementene blir flex-elementer som ordnes langs en rad (standard) eller kolonne. Flex er svært godt egnet til å fordele plass og justere elementer.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Viktige Flexbox-egenskaper

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — todimensjonal layout

display: grid gjør et element til en Grid-beholder. Du definerer rader og kolonner med grid-template-columns og grid-template-rows. Grid egner seg godt til sidelayout og rutenett med kort.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

fr-enheten

fr-enheten (fraction) fordeler tilgjengelig plass. grid-template-columns: 1fr 2fr 1fr oppretter tre kolonner der den midterste får dobbelt så mye plass som de andre.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Velge mellom Flex og Grid

Bruk Flexbox for endimensjonale layouter (en rad med knapper eller en stabel med kort). Bruk Grid for todimensjonale layouter (en sidestruktur eller et bildegalleri med eksplisitte rader og kolonner). Begge kan brukes på samme side.

display: none vs visibility: hidden

display: none: fjerner elementet fra layouten og gjør det utilgjengelig for skjermlesere. visibility: hidden: gjør elementet usynlig, men det opptar fortsatt plass og finnes fortsatt i tilgjengelighetstreet. opacity: 0: gjør elementet usynlig, men det opptar fortsatt plass og er tilgjengelig.

Hurtigsjekk

Du skal lage et responsivt rutenett med kort, med flere rader og kolonner. Hvilken display-verdi er det beste utgangspunktet?

Besvar den i den interaktive leksjonen

Oppsummering: display-verdier

block opptar hele bredden. inline flyter sammen med teksten. inline-block kombinerer begge deler. flex ordner underordnede elementer i én dimensjon. grid ordner underordnede elementer i to dimensjoner. none fjerner elementet fra layouten. Når du behersker disse, har du kontroll over all layout på nettet.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Display: grunnleggende block, inline, flex og grid» gratis?

Ja – hele teksten i «Display: grunnleggende block, inline, flex og grid» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Display: grunnleggende block, inline, flex og grid»?

Bytt mellom display-verdier, og se hvordan block, inline, flex og grid plasserer innhold på ulike måter. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Display: grunnleggende block, inline, flex og grid»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Selektorer og kaskaden
Farger, typografi og boksmodellen
Display: grunnleggende block, inline, flex og grid
Plassering: relative, absolute, fixed og sticky

← Tilbake til Frontend Academy