CSS Grid Layout

Flexbox vs CSS Grid:

• Flexbox jest jednowymiarowy (zarządza wierszem ALBO kolumną).
• CSS Grid jest dwuwymiarowy (zarządza wierszami I kolumnami jednocześnie).

.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 równe kolumny */
    grid-gap: 20px;
}

.wyrozniony-kafelek {
    grid-column: span 2; /* Rozciągnięcie na 2 kolumny */
    grid-row: span 2;    /* Rozciągnięcie na 2 wiersze */
}

Jednostka fr (Fractional Unit):

Jednostka fr reprezentuje ułamek wolnej przestrzeni w kontenerze siatki. Np. 1fr 2fr oznacza, że druga kolumna będzie dwukrotnie szersza od pierwszej.