CSS-layout

CSS-layout handler om å plassere elementer på en nettside. Med flexbox bygger du endimensjonale layouter som navigasjonsmenyer og kortrekker. Med CSS grid bygger du todimensjonale layouter med rader og kolonner. Og med posisjonering plasserer du elementer uavhengig av dokumentflyten.

Her lærer du flexbox fra grunnleggende containere til justify-content, align-items, flex-grow og flex-wrap. Du lærer CSS grid med kolonner, rader, plassering og grid-template-areas. Og du lærer posisjonering med relative, absolute, fixed og sticky.

Artikler

Kom i gang med CSS flexbox

Lær grunnleggende flexbox i CSS: flex container, flex items og hovedaksen. Gratis video som viser deg hvordan flexbox fungerer.

Justify-content og align-items i flexbox

Lær å plassere elementer med justify-content og align-items i CSS flexbox. Gratis video med visuell forklaring og eksempler.

Flex-grow, flex-shrink og flex-basis i CSS

Lær å kontrollere hvordan flex-elementer fyller og krymper i CSS. Flex-grow, flex-shrink og flex-basis forklart med gratis video.

Flex-wrap i CSS forklart

Lær å bryte flex-elementer over flere linjer med flex-wrap i CSS. Gratis video med eksempler på responsive flexbox-layouts.

Kom i gang med CSS grid

Lær grunnleggende CSS grid: grid container, rader, kolonner og fr-enheten. Gratis video som viser deg hvordan grid fungerer.

Grid-plassering i CSS forklart

Lær å plassere elementer i CSS grid med grid-column, grid-row og grid-area. Gratis video med visuell forklaring og eksempler.

Slik bygger du en layout med CSS grid

Lær å bygge komplette sidelayouter med CSS grid. Header, sidebar, main og footer plassert med grid-template-areas.

Position relative og absolute i CSS

Lær forskjellen mellom relative, absolute, fixed og sticky i CSS. Forstå posisjonering og z-index med gratis video og eksempler.

Få tilgang til alt

Få tilgang til alle nettkurs

Ubegrenset kurstilgang. Fra 599,-/mnd.