Responzivní CSS grid

min(), max() and clamp()

• Funkce pro omezení rozsahu.
• Můžou sloužit jako doplněk při tvorbě responzivního webu.
• Vhodné kombinovat například s 1vw.
• MDN min(), max(), clamp()
• Vzhůru dolů

Responzivní mřížka

• repeat(4, 1fr) MDN, Vzhůru dolů
  • 4 => počet opakování
  • 1fr => opakující se hodnota
• minmax(300px, 1fr) MDN, Vzhůru dolů
  • 300px => nejmenší možná šířka sloupce
  • 1fr => sloupce budou stejně široké

Úkol na teď

Postupuj podle zadání na github.com/…/Cviceni-CSS-grid-minmax. Výchozí kód ze zadání si k sobě zkopíruj pomocí funkce Fork.

Dobrovolné čtení na doma

• Pojmenované oblasti mřížky pomocí vlastnosti grid-template-areas. CSS-Tricks