Grila CSS este ideală pentru aspectul receptiv. Introducere în CSS Grid Layout. Introducere în CSS Grid

Am scris odată despre un serviciu neobișnuit, care este un AI pentru crearea unui site web. Judecând după rezultatele actuale, s-au dovedit „așa așa”, mai ales având în vedere prețul declarat. în acest sens vor fi mai eficiente.

Astăzi vreau să vorbesc despre o „tehnologie” care este similară ca nume, dar complet diferită în esență - Grilă CSS! Postul este format din mai multe părți:

Această abordare a construirii machetelor facilitează crearea de grile de site-uri web destul de flexibile folosind CSS. În viitor, probabil va fi folosit peste tot. Dacă am înțeles bine, este perfect pentru aceleași sarcini ca Flexbox, dar spre deosebire de acesta, poate funcționa simultan în dimensiuni bidimensionale (coloane și rânduri). Mai jos ofer o traducere a articolului, care este un fel de introducere in subiect si contine exemple educative simple. Atenţie! Autorul notei desfășoară un curs gratuit(!) pe CSS Grid în decembrie, dacă doriți, trimiteți o solicitare pe e-mailul său.

Am găsit și un videoclip util pe această temă pe internet. Poate că este mai ușor pentru cineva să perceapă informații ca aceasta:

Introducere în CSS Grid

Anul acesta, această tehnologie a primit suport încorporat în Chrome, FF, Safari, așa că este probabil să devină un instrument popular în viitorul apropiat. Dar pentru moment, trebuie să vă amintiți să aveți grijă de browserele web învechite și întârziate.

Cea mai simplă plasă

Există 2 obiecte principale aici:

• parent / wrapper (înfășurarea tuturor blocurilor interne care îl alcătuiesc);
• copii/articole (elementele în sine).

Iată cel mai simplu design:

Wrapper (afișare: grilă; )

Cu toate acestea, imediat după aceasta, nu se va schimba mare lucru, deoarece formatul de afișare nu este definit. Veți vedea 6 DIV-uri urmându-se.

Coloane și rânduri

Pentru a vă face grila bidimensională, trebuie să specificați parametrii rândurilor și coloanelor - utilizați opțiunile grilă-şablon-rândȘi grilă-șablon-coloană respectiv:

.wrapper ( afișare : grilă; grid-template-columns : 100px 100px 100px ; grid-template-rows : 50px 50px ; )

Wrapper (afișare: grilă; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; )

Deoarece există trei valori pentru coloane, se va genera același număr dintre ele, prin urmare, există doar 2 rânduri.Numerele în pixeli stabilesc lățimea elementelor în primul caz (100px fiecare) și înălțimea (50px) în al doilea.

Iată un alt exemplu pentru a vă ajuta să înțelegeți mai bine cum funcționează:

.wrapper ( afișare : grilă; grid-template-columns : 200px 50px 100px ; grid-template-rows : 100px 30px ; )

Wrapper ( afișare: grilă; grid-template-coloane: 200px 50px 100px; grid-template-rows: 100px 30px; )

Va fi afișată următoarea imagine:

Locație și dimensiuni

Cu această caracteristică veți obține capabilități foarte puternice pentru a crea grile de site. Să presupunem că avem o dimensiune de 3x3:

.wrapper ( afișare: grilă; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px ; )

Wrapper (afișare: grilă; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; )

Dacă codul HTML, ca în exemplul nostru, are 6 elemente DIV (vezi chiar la început), atunci în în acest caz, Pe site vor fi afișate doar 2 rânduri, al treilea nu va fi temporar completat. Cu toate acestea, când începem să folosim parametri diferiți pentru poziții și dimensiuni de bloc - grilă-coloană grilă-rând, situația se va schimba.

Atribuim stiluri unuia dintre obiecte:

.item1 (grid-coloană-start: 1; grid-coloană-sfârșit: 4; )

Item1 ( grid-coloană-start: 1; grid-coloană-sfârșit: 4; )

Aceasta înseamnă că DIV cu clasa item1 începe de la prima linie a coloanei din grilă și se termină pe a 4-a, adică umple întregul rând.

De fapt, acum unele obiecte s-au mutat în ultima linie, pe care le notăm dinainte (3x3). Există o opțiune mai simplă:

.item1 ( coloană-grilă : 1 / 4 ; )

Item1 (grilă-coloană: 1 / 4; )

.item1 ( grid-coloană-start : 1 ; grid-coloană-sfârșit: 3 ; ) .item3 ( grid-row-start : 2 ; grid-row-end : 4 ; ) .item4 ( grid-coloană-start : 2 ; grilă-coloană-sfârșit : 4 ; )

Item1 ( grid-coloană-start: 1; grid-column-end: 3; ) .item3 ( grid-row-start: 2; grid-row-end: 4; ) .item4 ( grid-coloană-start: 2; grid-coloană-sfârșit: 4; )

Ne oferă următoarea imagine:

Ai reușit să-ți dai seama? În principiu, nu este dificil, dar trebuie să înțelegeți că aceasta este doar partea de bază a nuanțelor CSS Grid.

Prototiparea și amenajarea zonelor cu grilă CSS

Codul de marcare este după cum urmează (HTML):

Container ( afișare: grilă; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; )

Dacă totul este clar în principiu cu privire la rânduri, atunci coloanele trebuie clarificate. Aici în sensul grilă-șablon-coloane se creează o grilă care constă din 12 coloane identice (lățimea fiecăreia = 1/12 din total) + margini de 5px între ele (grid-gap).

Adăugați zone de șablon de grilă

Opțiunea oferă și mai multă flexibilitate și caracteristici uimitoare. Poate sintaxa și formatarea parametrului zone-șablon-grilă pare puțin neobișnuit, dar mai departe vei înțelege de ce totul este exact așa:

.container ( display: grid; grid-gap: 5px ; grid-template-columns : repetare (12 , 1fr) ; grid-template-rows : 50px 350px 50px ; grid-template-zone : "h h h h h h h h h h h h" "m m c f c f c f c f c f c f " ; )

Container ( display: grid; grid-gap: 5px; grid-template-colons: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-zone: "h h h h h h h h h h h h" "m m c c c c c f" f f f c f c f f f" ;)

Este un fel reprezentare vizuala grila site-ului dvs. în CSS. Toate personajele din acest parametru formează 3 rânduri și 12 coloane, definite de linia de mai sus. Fiecare literă corespunde unei celule. Numele din exemplu corespund blocurilor de cod HTML: antet (h), meniu (m), conținut (c) și subsol (f), dar puteți utiliza orice alte opțiuni.

Atribuirea de șabloane și experimente de zone

Pe urmatorul pas„legați logic” simboluri container și elemente DIV:

.header ( grid-area : h; ) .meniu ( grid-area : m; ) .conținut ( grid-area : c; ) .footer ( grid-area : f; )

Antet ( grid-area: h; ) .meniu ( grid-area: m; ) .content ( grid-area: c; ) .footer ( grid-area: f; )

Site-ul va afișa un aspect ca acesta:

Și acum începe magia. Să schimbăm câteva litere din parametru zone-șablon-grilă, de exemplu, „c” și „m” în locuri:

grid-template-zone : „h h h h h h h h h h h h” „c c c c c c c c c c m m” „f f f f f f f f f f f f” ;

zone-șablon-grilă: „h h h h h h h h h h h h h” „c c c c c c c c c c m m” „f f f f f f f f f f f f”;

Grila va arăta diferit:

Adăugarea de adaptabilitate la acest design arată în general uimitor. Nu ai putea face asta numai cu HTML, dar în CSS totul este posibil: „. h h h h h h h h h h ”. "c c c c c c c c c m m" ". f f f f f f f f f f ." ;

grid-template-zone: ". h h h h h h h h h h ." "c c c c c c c c c m m" ". f f f f f f f f f f .";

Site-ul web arată astfel:

Fără scripturi sau HTML - doar magia CSS Grid!

Exemple suplimentare de grilă și flexibilitate

Ulterior pe CSS Tricks am găsit un alt articol pe această temă, unele opțiuni din acesta vă pot fi utile. Urmați linkurile către (logo în blocul de cod din dreapta sus) pentru a vedea exemplul în acțiune pe ecranul mare.

Aspect clasic de site

Avem un antet și un subsol întins pe toată lățimea, iar între ele există un bloc de conținut cu două bare laterale. În primul caz, când ecranul este redus, toate obiectele vor rămâne în aceleași poziții ca înainte.

Dacă aveți nevoie ca blocurile să fie amplasate unul sub celălalt, atunci:

Grilă de blog cu 2 coloane

Să spunem în centrul nostru bloc mare conținut și bara laterală. Codul de mai jos menține toate obiectele pe loc atunci când dimensiunea paginii este redusă.

A doua tehnică este să le aranjezi una după alta.

Distribuția pe lățime a elementelor

Din punct de vedere vizual, exemplul seamănă cu o galerie, când toate imaginile sunt una lângă alta în mai multe coloane. Pe măsură ce micșorați dimensiunea, pe fiecare linie vor apărea din ce în ce mai puține.

Poza din interiorul articolului

Aici conținutul este împărțit în 2 părți, iar între ele există un bloc pe ecran complet.

Total.În general, am descoperit conceptul de CSS Grid, care, sincer să fiu, m-a impresionat plăcut – mai ales cadrele în care erau luate în considerare zone de layout cu diferite litere. Desigur, toate acestea sunt doar elementele de bază ale „tehnologiei”, plus că nu am descris fiecare parametru de cod în detaliu. Exemplele din ultima secțiune a articolului sunt mai complexe și ar trebui revizuite cu atenție. Combină atât Flex, cât și Grid. Dacă acest subiect este interesant, abonați-vă la cursurile primului autor - Trimiteți prin e-mail în prima sau a doua notă originală.

Aveți ceva de adăugat în legătură cu Grila CSS? — scrieți gânduri, sfaturi sau trimiteți link-uri interesante.

Salutare tuturor! Astăzi vom vorbi despre ce sunt sistemele grid? sau pur și simplu grile flexibile în aspect adaptiv.

Mai întâi să definim ce este Sistem grilă.

Sistem grilă- o colecție de stiluri bazate pe clasă care permit utilizatorului să controleze aspectul paginii folosind un sistem de rânduri și coloane.

Să ne imaginăm că avem o pagină de blog. Este împărțit în 2 coloane: partea principală din stânga și bara laterală din dreapta. Să încercăm să creăm o grilă flexibilă pentru o astfel de pagină.

Ei bine, mai întâi trebuie să facem ceva de bază, dar... html marcajele

Aici avem un bloc care conține întreaga pagină, conține un bloc cu blog, care conține 2 blocuri: partea principală a paginii și bara laterală.

Deci întreaga noastră pagină va avea dimensiunea 960px. Întreaga grilă este împărțită în 12 coloane 69px. fiecare. Partea de blog va fi largă 900px. Partea principală a paginii va fi 566 px, bară laterală - 331px.

Asta obținem până la urmă

#pagina (
marja: 36px automat;
latime: 960px;
}

Blog (
marjă: 0 auto 53px;
latime: 900px;
}

Blog.main (
plutește la stânga;
lățime: 566px;
}

Blog .sidebar (
plutire: dreapta;
lățime: 331px;
}

Totul ar fi bine, dar, după cum puteți vedea, toate acestea sunt statice, definite în pixeli. Dorim ca grila noastră să își schimbe dimensiunea în funcție de ecranul pe care este vizualizată pagina, prin urmare, trebuie să setăm totul în la sută. Să o facem.

Pentru aceasta există aceeași formulă ca și pentru fonturi

scop / context = rezultat

Să convertim un bloc din întreaga pagină din pixeli în procente.

#pagina (
marja: 36px automat;
latime: 90%;
}

90% ales pentru că în acest caz vom avea și indentări de-a lungul marginilor de-a lungul 5% . Cu toate acestea, puteți alege o altă valoare.

Folosim formula noastră: 900 / 960 = 0.9357

Să înmulțim rezultatul cu 100 pentru a primi dobândă și o vom înregistra în contul nostru css.

Blog (
marjă: 0 auto 53px;
latime: 93,75%;
}

Același lucru trebuie făcut cu coloanele, dar observați că contextul s-a schimbat. Deoarece coloanele sunt în interiorul unui bloc cu o clasă .blog, atunci va fi contextul. Hai să facem calculul.

566 ÷ 900 = .628888889

331 ÷ 900 = .367777778

Convertim totul în procente și îl scriem în foaia de stil.

Blog.main (
plutește la stânga;
lățime: 62,8888889%;
}

Blog .sidebar (
plutire: dreapta;
lățime: 36,7777778%;
}

Asta e tot! Acum avem o grilă flexibilă și o putem folosi pentru aspect.

După cum puteți vedea, totul este foarte simplu. Baza unei grile flexibile, ca un font flexibil, este aceeași formulă, amintindu-ne care, puteți crea cu ușurință site-uri web receptive.

Nota! După cum puteți vedea, am ajuns cu valori procentuale destul de lungi. Unii vă pot sfătui să le rotunjiți, dar nu ar trebui să faceți niciodată asta! Tine minte!

Și asta e tot pentru mine, mulțumesc pentru atenție și succes aspect adaptiv!

În acest articol veți găsi curs complet prin grile CSS. Ne vom uita la ce este, care sunt diferențele cu FlexBox și cum puteți lucra cu CSS Grid.

Grilele CSS sunt noua abordare la crearea de site-uri web adaptabile cu multe blocuri situate oriunde pe site. in afara de asta Grilă CSS Există și o tehnologie care seamănă foarte mult cu ochiurile. Nu vom intra în cele mai mici diferențe dintre ele, deoarece acest lucru ar necesita un articol separat, dar vom descrie pe scurt principalele diferențe.

Grilă CSS poate fi numită o versiune mai rece și îmbunătățită FlexBox, deoarece FlexBox vă permite să lucrați doar într-un singur plan: fie să creați coloane, fie să creați rânduri.

Grilele CSS vă permit să faceți mai mult, deoarece funcționează pe ambele planuri în același timp. Astfel, crearea blocurilor de site-uri adaptive este mult mai ușoară, iar posibilitățile de aranjare a obiectelor după bunul plac sunt pur și simplu nelimitate.

Vă invităm să vizionați un videoclip complet despre învățarea grilelor CSS pentru a înțelege instantaneu esența Grilă CSS:

• Lecție despre ;

În timpul lecției au fost create trei pagini, codul pentru fiecare pagină poate fi copiat mai jos.

Primul dosar

Al doilea dosar

Al treilea dosar

Principiul de funcționare

Lucrul cu grile este foarte simplu. Algoritmul acțiunilor de aici este următorul:

1. Creăm un bloc principal și plasăm alte blocuri în el ( secțiuni);
2. Adăugați proprietatea display: grid la blocul principal;
3. Proprietățile grilei CSS pot fi acum aplicate tuturor elementelor blocului principal;
4. Adăugarea diferitelor proprietăți. Puteți găsi documentație despre toate proprietățile posibile;

Fiecare bloc poate fi setat în lățime, înălțime și locație. Blocurile care sunt create pe baza de grile au imediat un design adaptiv care ajustează blocurile la diferite rezoluții ale ecranului.

Astfel poți scrie mai puțin și obține mai mult. Ce altceva ar putea fi mai cool? Împărtășiți-vă experiența de utilizare a grilelor în proiectele dvs. în comentariile la acest articol ⇣

Am observat tehnica Grids acum aproximativ un an. Apoi această tehnică, după un studiu foarte superficial, mi s-a părut inutilă și foarte experimentală; am fost respins de faptul că pentru implementări era necesar să se creeze un marcaj suplimentar. Dar acum devine dificil să nu observi numărul de site-uri web construite pe grilă, precum și numărul de articole și tutoriale despre acesta. Datorită acestora din urmă, a devenit mult mai ușor să studiezi și să înțelegi principiile și conceptele și să tragi concluzii mai mult sau mai puțin reale. Concluzia mea un an mai târziu este: „Este simplu și solutie utila care a fost creat vreodată pentru aspectul paginilor web, fiecare web designer care se respectă ar trebui să știe.”

Oricine a lucrat vreodată cu o grilă știe ce este o grilă. editori grafici (Photoshop, Fireworks, Gimp etc.)și, desigur, a apreciat necesitatea acestuia atunci când a creat orice design. Dar cum se implementează o Grilă pe web? De fapt Tabular aspectul a fost un design real de pagină web cu o Grilă, fără îndoială foarte convenabil. Dar nu și utilizarea intenționată a elementelor masa a fost îngrozitor.
Din fericire, popularitatea enormă a standardelor web a crescut și continuă să crească anul trecut, precum și suportul lor în browserele moderne, ne-au oferit posibilitatea de a crea pagini multifuncționale cu foarte puține markupuri logice. Acest aspect a fost numit bloc. Dar de asemenea bloc layout-ul s-a dovedit a fi partea slabă. Atunci când creați pagini cu un set imens de elemente de diferite dimensiuni și semnificații, marcarea unor astfel de pagini a devenit o sarcină foarte dificilă și, dacă mai multe persoane lucrează la marcaj, o astfel de muncă poate deveni un coșmar.
Și apoi tehnica folosind Grid a venit în ajutor. Această tehnică este un hibrid între blocȘi Tabular aspect. Folosind-o ne dă:

• viteză și ușurință de dezvoltare
• libertatea de poziționare
• proporționalitatea elementelor paginii și plasarea acestora

Prețul pentru toate acestea este doar un mic markup suplimentar. Cred că în zilele noastre, când costul ceasului unei persoane este mult mai scump decât hardware-ul și productivitatea, nu este greu de ghicit în ce direcție se înclină cântarul.

Ce este aspectul cu Grid? În primul rând, este un concept. Un concept care include multe aspecte de design și foarte puține reguli pentru implementarea lui. Acest lucru oferă libertate deplină și nicio standardizare în execuția sa. Voi spune și mai multe - aceeași Grid poate fi implementată de cei mai mulți căi diferite. Dacă ați citit deja despre Grilă, poate ați observat că fiecare autor pleacă dintr-un unghi nou, intrând adânc în detalii, aceasta este, ca să spunem ușor, confuz. Din fericire, au început să apară Sisteme Grid - biblioteci CSSși pentru lucrul cu Grid. Și folosind exemplul lor, puteți stăpâni foarte rapid principiile de bază ale acestei tehnici.

Cred că nu are sens să scrieți despre toate aspectele Grid-ului; puteți găsi cu ușurință informații despre aceasta pe Internet. Vă sugerez să vă creați propriul simplu Sistem grilă.

Mai întâi trebuie să înțelegeți că grila constă din coloane și spații între ele. Există trei valori principale - lățimea grilei, lățimea coloanei și lățimea spațiului dintre coloane. Lățimea coloanelor depinde de numărul lor.

Să încercăm să facem o grilă de 950 de pixeli lățime cu 16 coloane cu spațiere de 10 pixeli, deci o coloană ar trebui să aibă o lățime de 50 de pixeli. După ce am înțeles toate valorile, deschidem orice editor grafic cunoscut de noi și creăm un layout. De asemenea, puteți adăuga padding la Grid din stânga și din dreapta, să zicem 20 de pixeli fiecare, iar acest lucru va avea ca rezultat un aspect cu o lățime de 990 de pixeli. Puteți vedea exemplul meu.

Acum putem începe să ne creăm biblioteca. La fel ca majoritatea bibliotecilor CSS, a noastră are nevoie de o resetare globală, sugerez Resetarea CSS a lui Eric Mayer, păstrând resetare.css hai sa cream grid.css la care putem adăuga imediat o metodă de curățare a containerelor care conțin blocuri plutitoare – Clear Fix. Primul lucru de care avem nevoie este o regulă pentru un container care va conține toate coloanele noastre. Lățimea fiecărui container este egală cu lățimea grilei noastre.

.container(
marja: 0 auto;
latime: 950px;
}

Acum putem adăuga o regulă pentru coloanele noastre, care conține lățimea și umplutura. Indentarea acționează ca un gol (jgheab)între coloane.

.coloană(
plutește la stânga;
margine-dreapta: 10px;
preaplin: ascuns;
latime: 50px;
}

Ultima coloană nu are nevoie de indentare; pentru a face acest lucru, să adăugăm și o regulă pentru ea:

Containerele noastre conțin coloane, coloanele sunt blocuri plutitoare, așa că trebuie curățate. Pentru a evita .clearfix inutil în markup, puteți aplica această regulă containerelor:

.clearfix:după, .container:dupa{
continut: ".";
afisare: bloc;
inaltime: 0;
clar: ambele;
vizibilitate: ascuns;
}

clearfix, .container(afisare: inline-block; )

/* Se ascunde din IE-mac \*/
*html.clearfix, *html.container(înălțime: 1%;)
.clearfix, .container(afisare: bloc;)
/* Încheiați ascunderea din IE-mac */

Acum putem începe cu coloanele noastre. Coloanele pot avea două sau trei lățime și așa mai departe. Pentru a face acest lucru, le putem aplica următoarele reguli:

.span-1 ( lățime: 50px; )
.span-2 (lățime: 110px; )
.span-3 (lățime: 170px; )
.span-4 (lățime: 230px; )
.span-5 (lățime: 290px; )
.span-6 (lățime: 350px; )
.span-7 (lățime: 410px; )
.span-8 (lățime: 470px; )
.span-9 (lățime: 530px; )
.span-10 (lățime: 590px; )
.span-11 (lățime: 650px; )
.span-12 (lățime: 710px; )
.span-13 (lățime: 770px; )
.span-14 (lățime: 830px; )
.span-15 (lățime: 890px; )
.span-16 ( lățime: 950 px; margine-dreapta: 0; )

În principiu, acesta este tot ceea ce este necesar pentru implementările Grid; puteți adăuga, de asemenea, un wrapper și o clasă pentru vizualizarea Grid-ului cu un aspect. Să creăm main.css si adauga la el:

.wrapper(
marja: 0 auto;
latime: 990px;
}
.acoperire(
fundal: url transparent(overlay.png) repetare-y derulare sus, stânga;
}

Iată cum ar putea arăta aspectul:

Cred că este suficient pentru început.
Puteți vedea exemplul meu

În jurul anului 2012 sau 2013, am fost introdus în dezvoltarea web. Treptat am început să studiez singur această direcție. Curând mi-am dat seama că CSS face o mulțime de lucruri semnificative, dar nu creează un marcaj adecvat. Există atât de multe hack-uri încât este prea greu să le înțelegi. De aceea, în standardele moderne, care vor fi discutate în acest articol, s-a acordat o atenție deosebită lucrului cu marcaj.

Ce vei învăța din acest articol:

• cum lucrați cu marcajul CSS;
• diferența dintre abordările moștenite și standarde moderne;
• cum să începeți cu noi standarde (Flexbox și Grid);
• de ce ar trebui să vă pese de aceste standarde moderne.

Cum lucram cu marcajul CSS

Sarcină

Să modelăm o problemă destul de standard: cum se creează o pagină cu două secțiuni - o bară laterală și o zonă principală de conținut - care au aceeași înălțime, indiferent de dimensiunea conținutului?

Iată un exemplu spre ce ne propunem:

Bara laterală și zona principală de conținut aceeasi inaltime, indiferent de dimensiunea conținutului

În primul rând, vă voi arăta cum să rezolvați această problemă folosind abordări vechi.

1. Creați un div cu două elemente

De exemplu,