Introducere în Web Development

Înainte de a începe să scriem proprietăți CSS pentru Grid Layout, e bine să ne facem o schiță a ceea ce vrem să realizăm. Putem să o facem mintal, dar nu e rău nici să o avem undeva vizual, ori pe o hârtie, ori digital într-o aplicație precum Figma, Photoshop, sau chiar Paint.

Pentru exemplu, vom încerca să construim următorul design.

Vedem că avem două coloane, și două rânduri (imaginea se întinde pe amândouă).

HTML-ul pentru acest caz poate fi:

                    <article>
  <h2>
    Programare pentru începători cu Miorița
  </h2>
  <p>
    Învață programare de la 0 cu ajutorul unei miorițe simpatice. Miorița este o oiță care poate fi controlată prin cod. O introducere drăguță în lumea programării.
  </p>
  <img 
    src="image.png" 
    alt="Picture of Miorița, a sheep that can be controlled by writing code."
  />
</article>
                

Primul lucru pe care trebuie să îl facem e să setăm display: grid pe elementul părinte. În cazul nostru, articolul.

Dacă încerci asta, va părea că nu funcționează. Toate elementele sunt puse în continuare unul sub altul.

Mai trebuie să spunem și cum să se deseneze gridul, cum vom vedea în secțiunile următoare.

Mai putem folosi display: inline-grid atunci când vrem să folosim gridul pe un element inline.