Naučite CSS Grid rekreiranjem poznatih izgleda: Airbnb, Youtube i još mnogo toga

Učim najbolje primjerom i pretpostavljam da ste stigli ovdje i vi. Otkrio sam puno lakše učenje značajki CSS Grid-a ponovnim kreiranjem izgleda proizvoda i web lokacija s kojima sam upoznat.

Za svaki izgled koristio sam jedan glavni prikaz kao osnovu za razumijevanje kako će biti konstruiran pomoću CSS Grid-a.

Kao napomenu: izostavio sam većinu zamršenih detalja o načinu rukovanja rasporedom (animacije, podaci itd.) Tako da je žarište na istraživanju izgleda i funkcioniranju mrežnih značajki. Dakle, imajte na umu da se izgled možda neće ponašati točno onako kako se službeno radi.

Moj je cilj da ovaj članak služi kao referentna točka i vodič za pokretanje sličnih izgleda s relativno malo koda (zbog čega je CSS Grid dobar u onome što radi).

Planiram dodati dodatne rasporede u ovaj post prekovremeno.

Ažurirano: 11. prosinca 2017

Trenutačni izgled:

  1. Airbnb početna stranica
  2. Početna stranica YouTubea
  3. Pinterest prikaz kuće

Slijedi:

  • SoundCloud
  • Bloomberg
  • Huffington Post

CSS mreže

Što je CSS Grid?

CSS Grid Layout izvrsno dijeli stranicu na glavne regije ili definira odnos u odnosu na veličinu, položaj i sloj između dijelova kontrole izgrađene od HTML primitiva.
Kao i tablice, izgled rešetke omogućuje autoru da poravna elemente u stupcima i redovima. Međutim, mnogo je više izgleda moguće ili lakše pomoću CSS Grid-a nego u tablicama. Na primjer, nadređeni elementi spremnika rešetke mogu se pozicionirati tako da se zapravo preklapaju i sloju, slično CSS pozicioniranim elementima. - MDN

Ukratko, CSS Grid pruža skup kontrola izgleda i alata koji postojeće implementacije izgleda temeljenih na stupcima i retcima stvorene korištenjem svojstava širina i floata.

CSS Grid je također više od ovoga. Može dinamički ažurirati svojstva na temelju pravila koja definirate (poput: "kada je preglednik ove širine, to učinite"). Dakle, vjerujem da je to budućnost front-end izgleda pristupa.

Za one nove u pojmu same mreže: mreža je skup linija (mislite na to kao staru radnu knjigu iz matematike) gdje ima vodoravne i okomite linije koje omogućuju definiranje postavljanja elemenata.

Mrežna terminologija:

Kontejner rešetke

Spremnik rešetke je nadređeni koji će sadržavati sve stavke postavljene na mreži. Određuje početno stanje vodova mreže (okomite i vodoravne).

Da biste stvorili CSS Grid, jednostavno dodate display: grid; u omot ili spremnik s kojim radite u svom dokumentu.

Mrežni predmet

Sva djeca rešetkastih spremnika označavaju se kao rešetke.

Grid Line

Crte rešetke predstavljaju vertikalne stupce (linije rešetke stupaca) i vodoravne (linije redova mreže).

Postoje dva svojstva grid-template-stupci i grid-template-rowst koja se koriste za definiranje linija rešetke izgleda.

grid-template-stupci definira položaj stupaca, a grid-template-row definira položaj redaka.

Grid Cell

Ovo je najmanje područje unutar rasporeda rešetke koje je prostor definiran sa četiri mreže rešetki.

Rešetkasto područje

Područje rešetke određeno je imenovano područje spremnika koje sadrži ćelije rešetke definirane linijama rešetke.

Učenje CSS Grid-a primjerom

1. Airbnb

Izgled dokumenta:

  
Airbnb
       <članak klasa = "sadržaj">        
      Ime kuće                              

Glavna mreža:

.omot {
  marža: 0 auto;
  prikaz: rešetka;
  rešetke-predložak-stupci: 65% 35%;
  razmak mreže: 16px;
}

Klasa omota definira spremnik rešetke, onaj koji sadrži jezgre blokova dokumenata (članak koji je područje u kojem se nalaze kućne stavke, osim što je karta bočne trake).

Nakon što je postavljeno svojstvo display: grid, izgled je zapravo definiran kao mreža gdje možemo koristiti grid-template-stupce za deklariranje veličine zapisa stupaca koristeći postotke.

Veličina zapisa može biti duljina, postotak ili dio slobodnog prostora u mreži (pomoću fr jedinice).

.content {
  padding: 8px;
  prikaz: rešetka;
  marža: 0 auto;
  grid-template-stupci: ponovite (auto-fill, minmax (230px, 1fr));
  grid-auto-redovi: minmax (264px, auto);
  razmak mreže: 16px;
}

Glavna rešetka sadrži sekundarni spremnik (podmreža) s nazivom klase .content. Ovo predstavlja područje elementa artikla u kojem se nalaze svi kućni predmeti.

Pod-rešetka je definirana s oba stupca, kao i retcima, tako da se sve stavke mogu prilagoditi veličini.

Ovdje se koristi nekoliko novih stvari, pa razvrstimo svaku od njih.

Pri definiranju stupaca koristili smo ponavljanje (auto-fill, minmax (300px, 1fr)); kao:

Ponovite () izbjegava ponavljanje deklariranja veličine zapisa za svaki stupac, ali postaje zanimljivije kada se koristi zajedno sa automatskim ispunjavanjem.

Kad je automatsko popunjavanje dato kao broj ponavljanja, ako spremnik rešetke ima određenu veličinu ili maks. Veličinu u odgovarajućoj osi, tada je broj ponavljanja najveći mogući pozitivni cijeli broj koji ne uzrokuje da mreža preplavi spremnik mreže.

Upotrebom automatskog ispunjavanja s ponavljanjem () rekli smo Gridu da shvati koliko predmeta može automatski stati u veličinu spremnika, a da ne moramo dodatno izračunavati.

minmax definira raspon veličine veći od ili jednak min i manji od ili jednak max.

Ako je max

Fr jedinica omogućuje vam da postavite veličinu zapisa kao djelić slobodnog prostora spremnika na mreži.

Na primjer, sljedeće će postaviti svaku stavku na jednu trećinu širine spremnika:

minmax nam dopušta da odredimo širinu koja tijekom ponovnog dimenzioniranja mora ostati fiksirana.

S deklariranim stupcima prelazimo na retke grid-auto-retke: minmax (275px, auto);

Ovdje smo ponovo upotrijebiliminmax kako bismo odredili maksimalnu visinu svake stavke koja se postavlja na podmrežu, u ovom slučaju svaki dom će biti 275px.

Kao maksimalan, identičan je max-sadržaju. Kao minimum, predstavlja najveću najmanju veličinu (kako je određeno min-širinom / min-visinom) elemenata rešetke koji zauzimaju mrežnu stazu.

koristi se auto umjesto 1fr u deklaraciji stupca jer želimo da se širina stavke automatski promijeni na temelju širine stupca.

@media (max. širina: 1100px) {
  .omot {
    grid-template-stupci: 1fr;
  }
  
  .sidebar {
    prikaz: nijedan;
  }
  
  .content {
    širina: 100%;
    grid-template-stupci: ponovite (auto-fill, minmax (360px, 1fr));
    grid-auto-redovi: minmax (300 px, auto);
  }
}

Izvrsna stvar CSS rešetki u ovom primjeru je da je za izgled potreban samo jedan medijski upit za stvaranje jednostavnog prilagodljivog izgleda.

Prije nego što sam se smjestio na tu jednu prijelomnu točku, postavio sam pojedinačne tablete za tablet, mobilne uređaje i tako dalje, ali otkrio sam da je stvorio veliku promjenu veličine kućnih predmeta prilikom ponovnog određivanja veličine na pregledniku, pa sam se zaglavio s onom koja je osigurala mekše iskustvo.

Ključna razlika u rasporedu unutar medijskog upita je da glavna rešetka koja je u početku sadržavala dva stupca definirana postotcima ima jedan stupac definiran veličinom zapisa 1fr (također sam sakrio bočnu traku prema ponašanju u proizvodnji) ,

Zatim se za svaku stavku koriste ista svojstva i metode, ali ključna je razlika u tome što sam povećao visinu i širinu stavki (360px, 300px).

To je to za stranicu Airbnb domova, pogledajte gornji primjer CodePen da biste vidjeli kako funkcionira.

2. YouTube

Izgled dokumenta:

  
Youtube
             <članak klasa = "sadržaj">           
              Naslov videozapisa        pregled        346.112 prikaza                              

Glavna mreža:

.omot {
  marža: 0 auto;
  prikaz: rešetka;
  rešetke-predložak-stupci: 15% 85%;
  razmak mreže: 16px;
}

Klasa omota se ponovo koristi za definiranje glavne rešetke. U glavnoj se mreži nalaze dva stupca koja su povezana s oznakama

i