Aspectul grilei

CSS Grid Layout, pur și simplu cunoscut sub numele de Grid, este o schemă de aspect care este cea mai nouă și cea mai puternică din CSS. Este acceptat de toate browserele majore și oferă o modalitate de a poziționa elemente pe pagină și de a le deplasa.

Poate atribui automat elemente zone, dimensionați-le și redimensionați-le, aveți grijă să creați coloane și rânduri pe baza unui model pe care îl definiți și să efectuați toate calculele folosind noua introducere fr unitate.

De ce Grid?

  • Puteți avea cu ușurință o grilă cu 12 coloane cu o singură linie de CSS. grid-template-columns: repeat(12, 1fr)
  • Grila vă permite să mutați lucrurile în orice direcție. Spre deosebire de Flex, unde puteți muta articole fie pe orizontală (flex-direction: row) sau vertical (flex-direction: column) – nu ambele în același timp, Grid vă permite să mutați orice element de grilă la orice predefinit zona grilei pe pagina. Elementele pe care le mutați nu trebuie să fie adiacente.
  • Cu CSS Grid, puteți modificați ordinea elementelor HTML folosind numai CSS. Mutați ceva de sus în dreapta, mutați elementele aflate în subsol în bara laterală etc. În loc să mutați <div> din <footer> la <aside> în HTML, puteți schimba destinația de plasare cu grid-area în foaia de stil CSS.

Grilă vs. Flex

  • Flex este unidimensional – orizontal sau vertical, în timp ce Grid este bidimensional, ceea ce înseamnă că puteți muta elemente atât în ​​plan orizontal cât și vertical.
  • În Grid, aplicăm stiluri de aspect containerului părinte și nu articolelor. Pe de altă parte, Flex vizează elementul flex pentru a seta proprietăți precum flex-basis, flex-grow, și flex-shrink
  • Grid și Flex nu se exclud reciproc. Puteți utiliza ambele pe același proiect.

Verificarea compatibilității browserului cu @supports

În mod ideal, atunci când creați un site, îl veți proiecta cu Grid și veți folosi Flex ca rezervă. Puteți afla dacă browserul dvs. acceptă grila cu @support Regula CSS (interogare de caracteristică). Iată un exemplu:

.container {
  display: grid; /* display grid by default */
}

@supports not (display: grid) { /* if grid is not supported by the browser */
  .container {
    display: flex; /* display flex instead of grid */
  }
}

Noțiuni de bază

Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

Pentru a transforma orice element într-o grilă, trebuie să îi atribuiți display proprietate pentru grid, ca astfel:

.conatiner {
  display: grid;
}

Si asta e. Tocmai ai făcut-o .container o grilă. Fiecare element din interiorul .container devine automat un element de grilă.

Definirea șabloanelor

Rânduri și coloane

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;

Zone

grid-template-areas: 
  "a a a a"
  "b c d e"
  "b c d e"
  "f f f f";

sau

grid-template-areas:
  "header header header header"
  "nav main main sidebar";

Zonele de rețea

Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

Iată câteva exemple de cod despre cum să definiți și să atribuiți zone de grilă

.site {
  display: grid;
  grid-template-areas: /* applied to grid container */
    "head head" /* you're assigning cells to areas by giving the cells an area name */
    "nav  main" /* how many values kind of depends on how many cells you have in the grid */
    "nav  foot";
}

.site > header {
  grid-area: head;
}

.site > nav {
  grid-area: nav;
}

.site > main {
    grid-area: main;
}

.site > footer {
    grid-area: foot;
}

fr unitate

Grid introduce un nou fr unitate, care înseamnă fracțiune. Lucrul bun despre utilizarea fr Unitatea este că se ocupă de calcule pentru dvs. Folosind fr evită problemele de marjă și umplere. Cu % și em etc. devine o ecuație matematică atunci când se calculează grid-gap. Dacă ai folosit fr unitate, va calcula automat atât dimensiunile coloanei, cât și ale jgheaburilor și va ajusta dimensiunea coloanelor în consecință, plus că nici la sfârșit nu vor exista goluri de sângerare.

Exemple

Modificarea ordinii elementelor în funcție de dimensiunea ecranului

Să presupunem că doriți să mutați subsolul pe ecranele mici și spre dreapta pe ecranele mai mari și există o grămadă de alte elemente HTML între cele două.

Soluția simplă este schimbarea grid-template-areas pe baza dimensiunii ecranului. Poti de asemenea modificați numărul de coloane și rânduri în funcție de dimensiunea ecranului, de asemenea. Aceasta este o alternativă mult mai curată și mai simplă la sistemul Grid al Bootstrap (col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "main header"
    "main sidebar"
}

@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
  .site {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "title title title"
      "main header header"
      "main sidebar footer"
  }
}

Vezi stiloul CSS Grid prin exemplu – 2 (zone de grilă + grilă) de Aamnah Akram (@aamnah) pe CodePen.