Grid og min-max bredde i CSS

Flexible layout

At kombinere display: grid med minmax() er virkelig en game changer for responsivt layout i CSS! Med minmax sikrer du, at hver kolonne altid er mindst 200 pixels bred, men stadig kan udvide sig for at fylde den plads, der er til rådighed (1fr). Det er så cool, fordi det gør layout og design langt mere fleksibelt – præcis det, som alle designere og udviklere drømmer om.

Her er et eksempel:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.child {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}