de Deepika Gunda

Cum se folosește puțină magie CSS Grid pentru a proiecta o aplicație de calculator

Acest articol este o introducere rapidă în CSS Grid. Vom face un calculator folosindu-l.

Acest articol este bun pentru dezvoltatorii care au o înțelegere de bază a CSS și pentru cei care doresc să învețe noile instrumente pe care CSS le oferă paginilor de stil.

Mi-au plăcut de la bun început șabloanele de zonă CSS Grid! Exemplele de pe web pot părea complicate, dar credeți-mă, o încercare de a le folosi și le veți iubi și le veți folosi în multe dintre proiectele dvs.

Acest gând a început după ce a vrut să facă ceva similar cu imaginea de mai jos.

ad-banner
Cum se foloseste putina magie CSS Grid pentru a proiecta
Calculator

Rețineți că butoanele =, 0 și AC au dimensiunea de două ori a butoanelor obișnuite. La început m-am gândit să folosesc elementul HTML al tabelului și colspan și rowpan pentru a face acest lucru. Dar apoi m-am întrebat dacă o putem face folosind CSS Flexbox. După ce nu a reușit să plaseze = și 0 și. în același rând, am început să realizez nevoia de CSS Grid.

Codul complet pentru aceasta este disponibil aici: CSS-Grid-Calculator.

Ce este grila CSS?

CSS Grid Layout Module oferă un sistem de layout bazat pe grilă, cu rânduri și coloane, ceea ce face mai ușoară proiectarea paginilor web fără a fi nevoie să utilizați flotante și poziționare. – din fav-ul meu w3schools.com

Așadar, aș presupune că aspectul principal și conținutul în formă de tabel arată ca grile, astfel încât să putem folosi CSS Grid pentru a le stiliza.

Primul lucru pentru a face o rețea

Trebuie să folosim afișajul: grilă pe orice container care trebuie să fie o grilă. În cazul în care este întreaga pagină principală a site-ului web, o putem face astfel:

<html>
<style> #main{       display:grid;     }
</style>
<body><div id="main"></div>
</body></html>

Ce urmeaza?

Să presupunem că doriți să creați un site web care să aibă o navbar, o bară laterală dreaptă, o bară laterală stângă și o porțiune din mijloc pentru conținut. De obicei, ați dori ca bara de navigație și barele laterale să aibă lățime și înălțime fixe în ceea ce privește procentele din fereastra de vizualizare și porțiunea de conținut să se extindă în orice spațiu rămas.

Deci, cum facem asta?

Cum se foloseste putina magie CSS Grid pentru a proiecta
Aspectul unui site web tipic.
<style>#main{ display:grid; grid-template-columns: 20vw auto 20vw; grid-template-rows: 15vh auto; grid-template-areas:"header header header"                     "leftSB content rightSB";
}#header{ grid-area:header;}#leftSB{  grid-area:leftSB;}#rightSB{  grid-area:rightSB;}#content{grid-area:content;}
</style><body> <div id="main">   <div id="header>header</div>   <div id="rightSB">right sidebar</div>   <div id="leftSB">left sidebar</div>   <div id="content">content</div> </div>
</body>

Iată ce realizează aspectul de care aveam nevoie.

Explicatie detaliata

În imaginea de mai sus, puteți vedea că a trebuit doar să creăm divs simple care să dețină antetul, barele laterale și conținutul nostru și să îl adăugăm la rădăcină.

În secțiunea de stil, am adăugat „display: grid” pentru containerul principal.

Apoi, putem vedea că, în general, avem nevoie de 2 rânduri și 3 coloane. De aceea am adăugat linia

grid-template-columns: 20vw auto 20vw;

Îi spunem că avem nevoie de 3 coloane și că prima coloană ar trebui să ocupe 20% din lățimea vizualizării, că următoarea coloană este automată (adică tot spațiul disponibil pentru această coloană) și că ultima coloană este din nou 20% din lățimea vizualizării.

grid-template-rows: 15vh auto;

Vorbim aici că avem nevoie de două rânduri per total. Primul rând va fi folosit pentru un antet și va avea 15% din înălțimea ferestrei, iar spațiul rămas este necesar pentru al doilea rând.

Acum vine grila-șablon-zone. Aici definim în nume simple ceea ce va ocupa grila. Să presupunem că vrem ca antetul să ia întregul prim rând și să nu existe diviziuni. Apoi folosim următoarele:

grid-template-areas:"header header header"

Deoarece avem 3 coloane, trebuie să menționăm antetul de 3 ori. Folosind același nume, rezultatul va fi o regiune de antet unificată.

grid-template-areas:"header header header"                     "leftSB content rightSB";

Aceasta este grila completă-șablon-zone, care folosește nume simple pentru a defini fiecare porțiune a grilei noastre 2 * 3.

Acum că am definit șablonul de grilă, vom atribui divs-urile acestor zone. Deci, am folosit ID-urile divului și am atribuit numele zonei șablonului folosind grila-zonă.

#header{ grid-area:header;}#leftSB{  grid-area:leftSB;}

Asta e, am definit acum modul în care aceste divs ar trebui să fie poziționate pe toate dimensiunile ferestrei fără a utiliza flotante sau lățimi pe elemente individuale și, de asemenea, fără a utiliza bootstrap etc.

Nu este uluitor? Vedeți ce am creat în aceste câteva rânduri în acțiune aici.

Ce urmeaza?

Acum putem lucra la divs-urile noastre pentru a adăuga bare laterale, bare de navă etc. Voi lăsa acest exemplu aici și acum voi continua să văd un design de calculator puțin complicat folosind CSS Grid.

Definirea componentelor

Avem o secțiune de afișare a formulelor, secțiunea de afișare curentă din partea de sus. Restul sunt butoanele 0-9, butonul AC (clar) și butoanele operatorului + – * / și =.

Deci, să creăm butoane și divs pentru toate componentele și să le păstrăm într-un container.

<body> <div id="root">  <label id="display"> 0</label>  <label id="cdisplay" >0</label>  <button id="clear">AC </button>  <button id="divide">/</button>  <button id="multiply">*</button>  <button id="seven">7</button>  <button id="eight">8</button>  <button id="nine">9</button>  <button id="minus">-</button>  <button id="four">4</button>  <button id="five">5</button>  <button id="six">6</button>  <button id="plus">+</button>  <button id="one">1</button>  <button id="two">2</button>  <button id="three">3</button>  <button id="zero">0</button>  <button id="dot">.</button>  <button id="equal">=</button>   </div> </body>
1611541506 404 Cum se foloseste putina magie CSS Grid pentru a proiecta
Calculatorul nostru final

Să ne uităm la imaginea calculatorului. Puteți vedea că avem 4 coloane și 7 rânduri. Deci, să ne definim grila:

#root{ padding:5px; background-color:black; width:240px; height:280px;
   display:grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;   grid-gap:0.1px;
   grid-template-areas:    "display display display display"   "cdisplay cdisplay cdisplay cdisplay"   "clear clear divide multiply"   "seven eight nine minus"   "four five six plus"   "one two three equal"   "zero zero dot equal"; }

Descompunem asta …

display:grid;   grid-template-columns: 1fr 1fr 1fr 1fr;   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

Aici am spus că avem 4 coloane și 7 rânduri și că fiecare parte a grilei are aceeași dimensiune. Rețineți că șirurile și coloanele șablonului folosesc 1fr. Fr este o unitate fracționată și 1fr este pentru o parte din spațiul disponibil.

Am dat rădăcinii div o lățime de 240 px și o înălțime de 280 px. Deci, 1 fr are o lățime de aproximativ 60 px * 40 px înălțime.

grid-template-areas:    "display display display display"   "cdisplay cdisplay cdisplay cdisplay"   "clear clear divide multiply"   "seven eight nine minus"   "four five six plus"   "one two three equal"   "zero zero dot equal"; }

Aici am definit zonele șablonului de grilă.

Zonele șablonului de grilă sunt un set de șiruri de coloane cu rânduri *. Trebuie să adăugați atâtea șiruri de câte rânduri există în grila dvs. În fiecare șir de rânduri trebuie să menționați ce va conține fiecare coloană. Numărul de articole din fiecare șir trebuie să se potrivească cu numărul de coloane.

Rețineți cum afișajul ocupă întregul rând. Deci, se adaugă de 4 ori în primul șir de rând.

cdisplay, care este afișajul curent, ocupă al doilea rând și este definit similar cu afișajul.

Urmează butoanele. Butonul de ștergere se află pe al treilea rând și prima și a doua coloană puse împreună. Prin urmare, este menționat de două ori pe rândul 3.

Și continuă …

Acum că lucrările majore s-au încheiat, trebuie să atribuim aceste zone grile divs-urilor.

#display{   grid-area:display; }#cdisplay{   grid-area:cdisplay; }#clear {   grid-area:clear; }#divide {   grid-area:divide; } #multiply {   grid-area:multiply; }

Am arătat cum sunt atribuite zonele grilei pentru 4 div-uri.

Exemplul complet poate fi găsit aici unde am adăugat ceva mai mult stil.

Înfășurându-se

După cum sa menționat mai devreme, aceasta este doar o introducere în CSS Grid și mai specific în zonele șablonului CSS Grid. Sper că acest exemplu vă va face să vă gândiți la CSS Grid atunci când vă uitați la site-uri web de acum înainte și sper că le veți folosi în viitor.

Dacă ți-a plăcut articolul meu, te rog bate din palme. Este destul de încurajator pentru mine.

Dacă ați face aceeași sarcină, cum ați aborda acest lucru? Anunță-mă în comentarii.