, A pentru autor, și poate chiar și a

pentru mai multe informații.

Grid Elementele de bază

Acum, să lansăm câteva stiluri prin aranjarea fiecăruia dintre ele într-o rețea. 

Notă: dacă aceasta este prima dvs. incursiune în "Grid", poate doriți să obțineți până la viteza de citire a tutorialelor inițiale în Înțelegerea CSS Grid Layout.

Vom merge mai întâi pe telefonul mobil aici, astfel încât primele stiluri vor da lărgimii noastre și o va centra, apoi vom stabili câteva reguli Grid:

.bandă lățime: 90%; max-lățime: 1240px; marja: 0 auto; afișare: grilă; grilă-șablon-coloane: 1fr; grilă-șablon-rânduri: auto; grilă-decalaj: 20 pixeli; 

Cel mai important, aici afirmăm că noi .grup va fi afișare: grilă;. Apoi declarăm grilă matriță coloane de 1fr, care spune că fiecare coloană va ocupa o singură fracțiune din cele disponibile. Vom declara doar unul acum, astfel încât fiecare coloană să umple întreaga lățime.

Apoi afirmăm grilă-șablon-rânduri: auto;. Aceasta este de fapt valoarea implicită, așa că am fi putut omite și înseamnă că înălțimile de rând vor fi determinate doar de conținut.

În cele din urmă, definim a grid-gap de 20px, care ne dă jgheaburile și coloanele noastre.

Media Query Numero Uno

În porturile de dimensiuni mai largi (500 pixeli este complet arbitrară), vom schimba grilă matriță coloane pentru a ne oferi o posibilă două cărți pe rând. Acum există două coloane, fiecare fiind una dintre cele două fracții disponibile.

@media numai pe ecran și (min-lățime: 500px) .band grid-template-coloane: 1fr 1fr; 

Media Query Numero Dos

În cele din urmă, pentru ecrane mai mari vom merge cu un aspect de patru coloane.

@media numai pe ecran și (min-width: 850px) .band grid-template-coloane: 1fr 1fr 1fr 1fr; 

Aici am putea fi scris în egală măsură repetați (4, 1fr) in loc de 1fr 1fr 1fr 1fr. Pentru mai multe informații despre modul în care fr unitate de lucru, verificați CSS Grid Layout: Coloane fluide și jgheaburi mai bune.

Deci ce ne-a dat asta?

Modelarea cardurilor

Asta ne-a dat o structură destul de solidă și dacă sunteți un fan al brutalismului, poate doriți să păstrați lucruri de genul acesta, dar pentru oricine altcineva să facem cărțile noastre să pară puțin mai mult ca cărțile.

Vom începe cu acest lucru:

.carte fundal: alb; text-decoration: nici unul; culoare: # 444; box-shadow: 0 2px 5px rgba (0,0,0,0,1); afișaj: flex; direcție flexibilă: coloană; min-înălțime: 100%; 

Acest lucru ne oferă câteva stiluri de bază: un fundal alb, nici o subliniere a textului, o culoare gri și o ordine box-shadow să ne dăm o anumită adâncime.

Apoi declaram cardul ca fiind afișaj: flex;. Acest lucru este important - vom alinia conținutul cardului pe verticală, folosind Flexbox. Prin urmare, afirmăm și noi direcție flexibilă: coloană; să ne dea axa noastră verticală. În cele din urmă, noi declarăm min-înălțime: 100%; pentru ca toate cardurile să umple înălțimea părintelui (elementul nostru de rețea). Buna treaba! Acest lucru ne oferă acest lucru:

Starea de hover

Să facem câteva îmbunătățiri înainte de a vă scufunda în Flexbox. Adauga o poziție: relativă; și a tranziție astfel încât să putem muta cardul pe hover:

 poziție: relativă; top: 0; tranziție: toate .1s ușurință;

Apoi, pe hover, ridicați ușor cardul și faceți umbra mai pronunțată:

.carte: hover top: -2px; box-shadow: 0 4px 5px rgba (0,0,0,0,2); 

Tipografie

Acum vom adăuga câteva tipuri generale de tipografie pentru a modifica culorile și spațiul.

.carte de articol padding: 20px;  / * tipografie * / .card h1 font-size: 20px; marja: 0; culoare: # 333;  .card p (înălțimea liniei: 1,4; . Spanul cardului font-size: 12px; font-weight: bold; culoare: # 999; text-transform: majuscule; punct-spațiere: .05em; marja: 2em 0 0 0; 

Iată ce ar trebui să aveți:

Miniaturi

Fiecare miniatură va fi aplicată ca imagine de fundal, așa că vom adăuga o anumită marcaj la bord, astfel:

Acum ne asigurăm .deget mare divs au unele dimensiuni, iar imaginile de fundal le umple corect:

.cardul .thumb padding-bottom: 60%; dimensiunea fundalului: capac; fundal-poziție: centru centru; 

Bună treabă, care ne dă acest lucru:

Articol Flexbox

Acum dorim ca numele autorului să fie aliniat în partea de jos a cardului, indiferent de cât de mult conținut este deasupra acestuia. Acesta este locul unde Flexbox vine din nou:

.carte de articol padding: 20px; flex: 1; afișaj: flex; direcție flexibilă: coloană; justify-content: spațiu-între; 

Folosim stenograma flex: 1; pentru a afirma că acest articol flexibil (încă este un copil al containerului original de flex) ar trebui să crească pentru a ocupa tot spațiul disponibil.

Apoi, declarăm că articolul este un container flexibil în sine și, din nou, declarăm direcție flexibilă: coloană; să ne dăm o distribuție verticală. în cele din urmă, justify-content: spațiu-între; afirmă că toate elementele flexibile din interiorul acestuia ar trebui să fie împrăștiate uniform pe axă, cu distanțe egale între.

Asta e minunat, dar ne dă aceste paragrafe ciudate, rătăcite în mijlocul cărților noastre.

Pentru a le alinia corect, să adăugăm flex-crestere: 1; (sau pur și simplu flex: 1;), astfel încât să umple tot spațiul vertical rămas, aliniându-se frumos la partea de sus.

.cartela p flex: 1; / * make p cresc pentru a umple spațiul disponibil * / line-height: 1.4; 

Mai bine!

Modificarea grilei

În acest moment suntem destul de înfășurați, dar singurul lucru pe care Grid-ul ne permite să-l facem este să schimbați complet aspectul prin plasarea elementelor noastre de grilă oriunde vrem și la orice dimensiune ne place. Pentru acest demo, am vrut să facem prima carte (să o numim "cartea noastră") cu două coloane pentru orice altceva decât cele mai mici ferestre de vizualizare.

În prima noastră interogare media, hai să facem acest lucru:

@media numai pe ecran și (min-width: 500px) ... item-1 grid-column: 1 / span 2; 

Revenind la tutorialul nostru introductiv pe zonele de rețea, aici afirmăm că, dincolo de 500px, primul element ar trebui să înceapă pe linia 1 și să se întindă pe două piste. Restul elementelor de rețea intră automat în poziție.

În cadrul aceleiași interogări mass-media am bătut și eu marimea fontului din titlul de pe cartela noastră recomandată.

Concluzie

Acesta a fost un exercițiu bun în utilizarea Grid cu Flexbox; Gridul a tratat aspectul nostru principal bidimensional, apoi Flexbox a manipulat distribuția verticală a elementelor din cadrul cardurilor noastre. Distrează-te și jucați cu el!

Citirea în continuare

• Înțelegerea seriei tutorialului CSS Grid Layout
• Ar trebui să folosesc Grid sau Flexbox? de Rachel Andrew
• Proiectarea interfețelor utilizator bazate pe card pe revista Smashing
  
• bbc.co.uk pagina de pornire beta
• Sfat rapid: Adăugați un fișier CSS @supports la demonstrațiile CodePen