Aspect Grid în CSS

Modulul CSS Grid Layout

Rândurile și coloanele stau la baza sistemului de layout pe grilă oferit de modulul CSS Grid Layout.

Cu el, layout-urile web complexe devin ușor de construit.

Sunt posibile și layout-uri responsive, care nu au nevoie nici de float, nici de position.

Grid vs. Flexbox: Cele două diferă prin dimensiuni. Flexbox aranjează lucrurile într-una singură, rânduri SAU coloane, în timp ce CSS Grid le aranjează în două, rânduri ȘI coloane.

Layout Grid cu zone numite

Aici, CSS Grid și zonele grid numite construiesc un layout complet de pagină, format dintr-un header, un meniu, o zonă de conținut principal, o secțiune din dreapta și un footer.

Prompt
Creează un layout de pagină folosind CSS Grid cu zone grid numite: un header care se întinde pe toată lățimea, un meniu în stânga, o zonă de conținut principal și o secțiune din dreapta, plus un footer care se întinde pe toată lățimea. Folosește grid-template-areas pentru a defini layout-ul. Umple fiecare zonă cu text de exemplu.
Output: complete HTML page

Componentele CSS Grid

Orice grilă are două părți:

  • Un Container Grid - Elementul părinte, a cărui proprietate display are valoarea grid sau inline-grid.
  • Unul sau mai multe Elemente Grid - Orice copil direct al containerului devine automat un element grid.

Un Container Grid cu Cinci Elemente Grid

În exemplul de mai jos, zona albastră este containerul grid, care conține cinci elemente grid.

Notă: Capitolele următoare explorează mai în profunzime containerele grid și elementele grid.

Exemplu

Cinci elemente grid umplu trei coloane într-un container grid.

Prompt
Creează un container grid cu cinci elemente copil numerotate de la 1 la 5. Setează containerul să se afișeze ca grid cu trei coloane egale folosind grid-template-columns. Adaugă un spațiu (gap) între elemente și dă containerului și elementelor culori de fundal vizibile și padding.
Output: complete HTML page

Toate proprietățile CSS Grid

Toate proprietățile CSS Grid apar în tabelul de mai jos.

Referință proprietăți CSS Grid

index.html 
<table>
  <tr>
    <th>Property</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>align-content</td>
    <td>Vertically aligns the whole grid inside the container (when total grid size is smaller than container)</td>
  </tr>
  <tr>
    <td>align-items</td>
    <td>Specifies the default alignment for items inside a flexbox or grid container</td>
  </tr>
  <tr>
    <td>align-self</td>
    <td>Aligns the content for a specific grid item along the column axis</td>
  </tr>
  <tr>
    <td>display</td>
    <td>Specifies the display behavior (the type of rendering box) of an element</td>
  </tr>
  <tr>
    <td>column-gap</td>
    <td>Specifies the gap between the columns</td>
  </tr>
  <tr>
    <td>gap</td>
    <td>A shorthand property for the row-gap and the column-gap properties</td>
  </tr>
  <tr>
    <td>grid</td>
    <td>A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties</td>
  </tr>
  <tr>
    <td>grid-area</td>
    <td>Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties</td>
  </tr>
  <tr>
    <td>grid-auto-columns</td>
    <td>Specifies a default column size</td>
  </tr>
  <tr>
    <td>grid-auto-flow</td>
    <td>Specifies how auto-placed items are inserted in the grid</td>
  </tr>
  <tr>
    <td>grid-auto-rows</td>
    <td>Specifies a default row size</td>
  </tr>
  <tr>
    <td>grid-column</td>
    <td>A shorthand property for the grid-column-start and the grid-column-end properties</td>
  </tr>
  <tr>
    <td>grid-column-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-column-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>grid-row</td>
    <td>A shorthand property for the grid-row-start and the grid-row-end properties</td>
  </tr>
  <tr>
    <td>grid-row-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-row-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>grid-template</td>
    <td>A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties</td>
  </tr>
  <tr>
    <td>grid-template-areas</td>
    <td>Specifies how to display columns and rows, using named grid items</td>
  </tr>
  <tr>
    <td>grid-template-columns</td>
    <td>Specifies the size of the columns, and how many columns in a grid layout</td>
  </tr>
  <tr>
    <td>grid-template-rows</td>
    <td>Specifies the size of the rows in a grid layout</td>
  </tr>
  <tr>
    <td>justify-content</td>
    <td>Horizontally aligns the whole grid inside the container (when total grid size is smaller than container)</td>
  </tr>
  <tr>
    <td>justify-self</td>
    <td>Aligns the content for a specific grid item along the row axis</td>
  </tr>
  <tr>
    <td>place-self</td>
    <td>A shorthand property for the align-self and the justify-self properties</td>
  </tr>
  <tr>
    <td>place-content</td>
    <td>A shorthand property for the align-content and the justify-content properties</td>
  </tr>
  <tr>
    <td>row-gap</td>
    <td>Specifies the gap between the grid rows</td>
  </tr>
</table>