Math og layout

Math-funktioner i layout

Math-funktioner beskriver relationer mellem størrelser direkte i CSS. Brug calc() til en mellemregning, min() til at vælge den mindste værdi og max() til at vælge den største. På den måde kan layoutet tilpasse sig pladsen uden et breakpoint for hver ændring.

calc() og nestede radier

calc() kan kombinere tal og kompatible enheder, fx calc(100px * 2) eller calc(100% - 1rem). Det er især nyttigt, når en størrelse afhænger af en anden.

En indre flade skal typisk have en mindre radius end den ydre flade, hvis der er padding imellem dem:

.card {
  --card-radius: 2.75rem;
  --card-padding: 1rem;
  padding: var(--card-padding);
  border-radius: var(--card-radius);

  .inner {
    border-radius: calc(var(--card-radius) - var(--card-padding));
  }
}

Her trækker vi afstanden mellem fladerne fra den ydre radius. Prøv først samme radius på begge flader, og brug derefter beregningen. Ændr padding, og se, hvordan de to kurver passer sammen.

min() til bredde og padding

min() vælger den mindste af de beregnede værdier. width: min(100%, 200px) fylder derfor den tilgængelige bredde, men bliver højst 200px.

Et praktisk mønster til en centreret indholdscontainer er:

.container {
  box-sizing: border-box;
  padding: min(3rem, 5%);
  width: min(65ch, 100% - 2rem);
  margin-inline: auto;
}

Bredden bliver højst 65ch, men efterlader mindst 1rem i hver side. Padding følger pladsen og bliver højst 3rem. Beregningen 100% - 2rem kan stå direkte inde i min() uden en ekstra calc().

Sammenlign med en løsning, hvor margin og padding ændres ved et breakpoint. Gør previewet gradvist smallere: hvilke værdier ændrer sig løbende, og hvilke rammer en grænse?

min() i Grid

Et automatisk grid kan stadig give overflow, når en kolonne har et fast minimum, som er større end containeren:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}

Lad minimum være den mindste af den ønskede kortbredde og hele containerens bredde:

.grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(min(275px, 100%), 1fr));
}

På brede containere bruges den ønskede minimumsbredde. På smalle containere kan kolonnen krympe til 100%. Indhold inde i kortene skal stadig kunne ombrydes.

I øvelsen er minimum gemt i --min. Gør først previewet så smalt, at gridet flyder over. Erstat derefter minimum i minmax() med min(var(--min), 100%), og undersøg forskellen.

Fælles indholdskant med max()

max() vælger den største værdi. Det kan give et banner en dynamisk indrykning, som aldrig bliver mindre end en fast kantafstand.

I øvelsen definerer main sidens indholdskolonne med --content-width. De almindelige sektioner ligger i content-sporet, mens bannerets baggrund spænder over hele gridet. Banneret har ingen indre wrapper; teksten skal indrykkes med padding.

.banner {
  padding-inline:
    max(var(--gutter), 50% - var(--content-width) / 2);
}

50% - var(--content-width) / 2 beregner afstanden fra kanten af bannerets overordnede container ind til den centrerede indholdsbredde. På brede skærme får teksten derfor samme indholdskant som de øvrige sektioner. På smalle skærme vælger max() i stedet minimumsafstanden --gutter, som i øvelsen er 1rem.

Øvelse: Få bannerets tekst til at flugte

Bannerets tekst skal flugte med de øvrige sektioners tekst på brede skærme og bevare mindst 1rem luft til kanten på smalle skærme. Baggrunden skal fortsat fylde hele bredden.

Løs opgaven med padding-inline og max() uden en ekstra indre wrapper eller media queries.

1. Prøv først kun var(--gutter). Hvorfor flugter teksten ikke på brede skærme?
2. Prøv derefter kun calc(50% - var(--content-width) / 2). Hvad sker der med kantafstanden på smalle skærme?
3. Kombinér værdierne med max(), og test både et smalt og et bredt preview.
4. Ændr --content-width, og kontrollér, at bannerets tekst stadig følger de øvrige sektioner.

Senere: Samme indrykning i en scroller

Den samme beregning kan lade det første kort i en horisontal scroller flugte med sidens indhold. Vi vender tilbage til selve scroll-teknikkerne senere; her viser demoen, hvor bannerøvelsens indrykning også kan bruges.