CSS3 - layout-uri moderne (Flexbox și Grid)

CSS3 a revoluționat modul în care construim layout-uri web. Flexbox și CSS Grid sunt cele două sisteme moderne de layout care au înlocuit float-urile și pozițional absolut ca metode principale de aranjare a elementelor.

Flexbox este ideal pentru aranjarea elementelor pe o singură axă (orizontal sau vertical). Este perfect pentru componente UI: navigare, carduri, formulare.

/* Container flex de bază */
.navbar {
display: flex;
justify-content: space-between;  /* Distribuire pe axa principală */
align-items: center;             /* Aliniere pe axa secundară */
gap: 16px;                       /* Spațiu între elemente */
flex-wrap: wrap;                 /* Permite trecerea pe rândul următor */
}

/* Elementul flex - cum crește/se micșorează */
.nav-item {
flex: 0 0 auto;    /* Nu crește, nu se micșorează, dimensiune auto */
}

.main-content {
flex: 1 1 0;       /* Crește, se micșorează, baza 0 - ocupă tot spațiul */
}

/* Centrare perfectă cu Flexbox */
.center-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

CSS Grid controlează simultan rânduri și coloane. Este ideal pentru layout-urile de pagină, galerii și orice structură bidimensională.

/* Layout de pagină clasic cu Grid */
.page-layout {
display: grid;
grid-template-columns: 250px 1fr 300px;   /* Sidebar | Main | Aside */
grid-template-rows: auto 1fr auto;         /* Header | Content | Footer */
grid-template-areas:
"header  header  header"
"sidebar main   aside"
"footer  footer  footer";
gap: 20px;
min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Galerie responsivă cu auto-fit */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}