Denumirea elementelor grid cu grid-area
Zonele grid își iau numele din două proprietăți care lucrează împreună. Pe un element grid, grid-area atribuie un nume; pe containerul grid, grid-template-areas folosește acele nume pentru a defini zone în interiorul layout-ului.
În această valoare, fiecare rând se scrie între propria pereche de apostrofuri, cu elementele denumite listate și separate prin spații. Așadar, un al doilea set de apostrofuri adaugă un al doilea rând.
Un element grid fără nume este reprezentat printr-un semn de punct (.).
Întindere pe cinci coloane
Dacă îi dai lui item1 numele „myHeader”, acesta se poate întinde pe toate cele cinci coloane ale unui layout grid cu cinci coloane.
Prompt
Creați un layout CSS Grid cu un container de 5 coloane. Folosiți grid-template-areas pentru a denumi item1 ca "myHeader", întinzându-se pe toate cele cinci coloane. Afișați 6 elemente grid numerotate cu item1 în partea de sus, întinzându-se pe toată lățimea.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Named Grid Area Span</title>
<style>
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-area: myHeader;
}
</style>
</head>
<body>
<h1>Named Grid Area</h1>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Semnul punct pentru elemente fără nume
În acest layout grid cu cinci coloane, „myHeader” se întinde pe trei coloane, iar semnele de punct reprezintă elemente fără nume.
Prompt
Creați un layout CSS Grid cu 5 coloane. Folosiți grid-template-areas unde "myHeader" se întinde pe primele trei coloane, iar ultimele două coloane folosesc semnul punct (.) pentru elemente fără nume. Afișați 6 elemente grid numerotate.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Period Sign No Name</title>
<style>
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader . .';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-area: myHeader;
}
</style>
</head>
<body>
<h1>Period Sign for Unnamed Items</h1>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Întindere pe coloane și rânduri
Aici, „myHeader” acoperă două coloane și două rânduri ale grilei.
Prompt
Creați un layout CSS Grid cu 5 coloane și folosiți grid-template-areas cu două rânduri, unde "myHeader" se întinde pe două coloane și două rânduri. Folosiți semne de punct pentru celulele fără nume. Afișați 6 elemente grid numerotate.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Columns and Rows</title>
<style>
.container {
display: grid;
grid-template-areas:
'myHeader myHeader . . .'
'myHeader myHeader . . .';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-area: myHeader;
}
</style>
</head>
<body>
<h1>Span Columns and Rows</h1>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
Realizarea unui șablon de pagină web gata de utilizare
Dă-i fiecărui element grid un nume, iar grid-template-areas poate descrie pentru tine un șablon complet de layout pentru o pagină web.
Exemplu
Un șablon de pagină web gata de utilizare, construit prin denumirea fiecărui element grid, cu zone pentru antet, meniu, principal, dreapta și subsol.
Prompt
Creați un șablon de pagină web CSS Grid cu zone denumite: header (rândul de sus, lățime completă), menu (coloana din stânga, rândurile 2-3), main (centrul rândului 2), right (coloana din dreapta, rândul 2) și footer (rândul de jos, întinzându-se de la coloana 2). Folosiți grid-template-areas pentru a defini layout-ul cu 6 coloane.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage Template</title>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Webpage Template</h1>
<div class="container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>