Acasă / Layout & Afișare CSS3
Modulul 05 din 06

Layout & Afișare în CSS3: Ghid Tehnic și Design Responsive

Arhitectura layout-ului web s-a eliberat definitiv de vechile trucuri cu float, clear sau tabele HTML. CSS3 a inaugurat era sistemelor bidimensionale și unidimensionale native: Flexible Box (Flexbox) și CSS Grid Layout, completate de subgrid, proprietatea universală gap, poziționarea position: sticky și revoluționarele Container Queries.

Acest ghid detaliază comportamentul containerelor părinte și al elementelor copil, algoritmii de distribuire a spațiului liber, alinierea pe ambele axe și bunele practici pentru crearea structurilor responsive fără clase utilitare în exces.

Flexbox bazic

Aliniere flexibilă pe o singură axă (orizontală sau verticală)

Declararea display: flex transformă elementul părinte într-un container flexibil. Copiii direcți devin itemi flexibili care se pot extinde, contracta și alinia ușor folosind justify-content (pentru axa principală) și align-items (pentru axa secundară).

cod CSS3

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

rezultat vizual

Logo Link 1 Link 2
CSS Grid bazic

Grile bidimensionale profesionale cu coloane și rânduri

display: grid este primul sistem bidimensional adevărat din CSS. Prin combinarea funcției repeat() cu auto-fit și minmax() (ex: repeat(auto-fit, minmax(200px, 1fr))), puteți crea grile de carduri 100% responsive fără nicio media query!

cod CSS3

.grila-carduri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

rezultat vizual

Coloană 1fr
Coloană 1fr
Coloană 1fr
gap

Spațiere curată între elemente în Flexbox și Grid

Proprietatea gap (împreună cu row-gap și column-gap) adaugă spațiere exactă DOAR între elementele vecine dintr-un container flex sau grid, eliminând hack-urile vechi cu margini negative.

cod CSS3

.container-flex {
  display: flex;
  gap: 16px;
}

rezultat vizual

Cutie 1
Cutie 2
flex-grow / shrink / basis

Dimensionarea avansată a itemilor flexibili

flex-grow determină cât de mult se extinde un item pentru a umple spațiul gol, flex-shrink cât de mult se micșorează, iar flex-basis definește dimensiunea sa inițială înainte de distribuție.

cod CSS3

.sidebar { flex: 0 0 100px; }
.main-content { flex: 1 1 auto; }

rezultat vizual

Fix 100px
Flexibil (umple spațiul)
grid-template-areas

Design vizual de pagină prin denumirea zonelor

Construiți layout-ul întregii pagini descriind vizual zonele într-un string ASCII (ex: "head head" "nav main"), atribuind apoi elementele HTML direct prin grid-area: head.

cod CSS3

.layout-pagina {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main";
}

rezultat vizual

Header
Navigatie
Conținut Principal
aspect-ratio

Raporturi de aspect fixe pentru imagini și carduri

Proprietatea aspect-ratio menține automat raportul dintre lățime și înălțime (ex: 16 / 9 sau 1 / 1) fără hack-uri de padding-top procentual, prevenind dereglarea layout-ului la încărcare.

cod CSS3

.video-responsive {
  width: 100%;
  aspect-ratio: 16 / 9;
}

rezultat vizual

16 : 9
CSS Grid Subgrid

Alinierea elementelor din sub-grile cu grila părinte

Valoarea grid-template-columns: subgrid sau grid-template-rows: subgrid permite copiilor dintr-un element grid să se alinieze direct la liniile de grilă ale părintelui lor suprem.

cod CSS3

.card-child {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

rezultat vizual

Părinte: 3 coloane
A
B
C
place-items & place-content

Centrare rapidă pe ambele axe într-o singură linie

Proprietatea place-items: center combină align-items și justify-items, permițând centrarea absolută a oricărui element pe ambele axe (orizontal și vertical) într-o singură linie de cod.

cod CSS3

.centrat-perfect {
  display: grid;
  place-items: center;
  min-height: 100px;
}

rezultat vizual

Centrare 1-Line
Container Queries

Componente responsive independente de dimensiunea ecranului

Spre deosebire de Media Queries (care verifică lățimea ferestrei browserului), @container permite unei componente să se adapteze în funcție de lățimea propriului container părinte.

cod CSS3

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card { display: flex; }
}

rezultat vizual

@container (min-width: 250px) — Componentă responsive modulară.
Multi-column Layout

Text împărțit automat pe coloane ca în ziare

Proprietățile column-count și column-gap împart un bloc lung de text în mai multe coloane verticale fluide, la fel ca în jurnalele sau revistele tipărite.

cod CSS3

.text-ziar {
  column-count: 2;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

rezultat vizual

Textul curge automat din prima coloană direct în cea de-a doua coloană pe măsură ce spațiul se umple.
position: sticky

Elemente adezive fixate automat la derulare

Un element cu position: sticky; top: 0; funcționează ca poziționat relativ până când atinge marginea specificată la scroll, moment în care rămâne lipit pe ecran.

cod CSS3

.header-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

rezultat vizual

Header Sticky (Lipicios la scroll)
Rând conținut 1
Rând conținut 2
Rând conținut 3
grid-auto-flow

Controlul cursului elementelor într-o grilă CSS

grid-auto-flow: dense sau row vă ajută să decideți modul în care elementele se aliniază și completează rândurile dintr-un grid complex.

cod CSS3

.grid {
  display: grid;
  grid-auto-flow: dense;
}

rezultat vizual

A
B
C
D
align-self

Alinierea individuală a elementelor din Flexbox

align-self permite un singur element dintr-un flex container să se alinieze diferit de restul, de la start la end sau stretch.

cod CSS3

.item {
  align-self: center;
}

rezultat vizual

A
B
justify-self

Alinierea individuală a elementelor din Grid

La fel ca align-self, justify-self permite un element să se alinieze în mod individual pe axa orizontală a grid-ului, fără a afecta restul elementelor.

cod CSS3

.item {
  justify-self: end;
}

rezultat vizual

A
B
order

Reordonarea elementelor fără a schimba markup-ul

Proprietatea order este extrem de utilă în machete responsiv, când un element trebuie să apară în altă ordine pe mobil decât pe desktop.

cod CSS3

.item-first { order: 2; }
.item-second { order: 1; }

rezultat vizual

First
Second
gap

Spațiere uniformă între elementele din Flex și Grid

gap simplifică distanțarea elementelor din layout-uri complexe, eliminând marginile inutile și scurtând codul CSS.

cod CSS3

.cards {
  display: grid;
  gap: 16px;
}

rezultat vizual

1
2
3
position: sticky

Elemente lipicioase în layout-uri complexe

position: sticky este deosebit de eficient pentru sidebars, meniuri de navigare și blocuri de filtre, fără a forța JavaScript.

cod CSS3

.sidebar {
  position: sticky;
  top: 20px;
}

rezultat vizual

Continut
Sidebar sticky
object-fit în layout

Imagini într-o grilă fără deformare

Pentru galerii și carduri de produs, object-fit menține proporția imaginilor în contururi fixe, fără linii deformate sau aspecturi ciudate.

cod CSS3

img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

rezultat vizual

Imagine
Imagine
safe-area-inset

Respectarea spațiilor din dispozitive mobile

Proprietățile safe-area-inset previn suprapunerea conținutului cu butoanele de navigare, camera sau notch-ul dispozitivului, un punct crucial pentru design mobile.

cod CSS3

.content {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

rezultat vizual

padding respectând safe area în mobil.
place-self

Alinierea fină pe ambele axe

place-self este un shorthand util pentru align-self și justify-self, accesibil atunci când ai nevoie să centrezi rapid un item într-o grilă fără a rescrie reguli.

cod CSS3

.card {
  place-self: center;
}

rezultat vizual

item 1
item 2
auto-fit + minmax()

Grile responsiv fără media queries

Combinarea repeat(auto-fit, minmax(...)) creează grile flexibile care se adaptează automat la dimensiunea ecranului și la numărul de elemente.

cod CSS3

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

rezultat vizual

Card 1
Card 2
Card 3