Modulul 05 din 06

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

Layout-ul web s-a schimbat radical odată cu CSS3. Am trecut de la soluții improvizate cu float, clear și inline-block la sisteme native puternice precum Flexbox, CSS Grid, subgrid, gap, aspect-ratio, place-items, justify-content, align-items, position: sticky, container queries și layout responsive modern. Acest tutorial HTML/CSS este ideal pentru începători și dezvoltatori care caută un ghid complet de CSS layout, flexbox, grid CSS, responsive design și web design profesional.

Layout CSS nu este doar despre plasarea elementelor pe pagină — este despre claritate, experiență de utilizare și performanță. Flexbox, CSS Grid și subgrid îți permit să construiești structuri complexe, responsive și accesibile, fără să te bazezi pe trucuri fragede. Află cum să creezi grile profesionale, carduri echilibrate, meniuri reactivate, infinit easier vertical centres și componente mobile-friendly prin CSS modern, cu un cod ușor de întreținut și optimizat pentru web design SEO.

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

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

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

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

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

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

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

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