Introducere în Web Development

Scriam în lecțiile trecute că e bine să ne facem o schiță a ceea ce vrem să realizăm cu Grid Layout. Putem să realizăm acea schiță chiar în codul nostru CSS, folosind proprietatea grid-template-areas:

                    grid-template-areas:
        '.     Image'
        'Title Image'
        'Label Image'
        '.     Image';
                

Fiecare string (text delimitat de "ghilimele") reprezintă o linie din grid.

Fiecare nume pe care îl folosim în acest template, va fi un nume de zonă (Engleză: area) pe care o putem accesa din proprietățile copiilor prin:

                    grid-area: Image;
                

Atunci când nu ne interesează să dăm un nume unei zone, vom pune punct.

În continuare, vom avea nevoie să setăm grid-template-rows și grid-template-columns pentru a dimensiona fiecare rând sau coloană.
Sau putem să folosim proprietatea grid-template, care le combină pe toate 3:

                    grid-template:
      'Title Image' 1fr
      'Label Image' 2fr /
      2fr 1fr;