Linii grid denumite și funcția repeat
Folosind funcția repeat discutată anterior, putem repeta coloane și rânduri care sunt create între liniile grid denumite:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Grid Layout în CSS3</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
display: grid;
grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px);
grid-template-rows: 10px repeat(2, [row] 1fr [rowgutter] 10px);
}
.grid-item {
background-color: #ddd;
}
.special-item {
grid-column: column 2;
grid-row: row 1;
background-color: #bbb;
}
.item1 {
grid-column: column 1;
grid-row: row 1;
}
.item2 {
grid-column: column 3;
grid-row: row 1;
}
.item3 {
grid-column: column 1;
grid-row: row 2;
}
.item4 {
grid-column: column 2;
grid-row: row 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item special-item"></div>
<div class="grid-item item1"></div>
<div class="grid-item item2"></div>
<div class="grid-item item3"></div>
<div class="grid-item item4"></div>
</div>
</body>
</html>Din acest exemplu, să luăm definirea coloanelor:
grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px);Prima coloană va avea o lățime de 10 pixeli. Apoi, se repetă coloanele folosind funcția repeat. Aceasta creează trei copii consecutive ale coloanelor. Prima coloană are o lățime de 1fr, adică dimensiuni proporționale, și este situată între liniile grid "column" și "colgutter".
După linia grid "colgutter" urmează o altă coloană cu lățimea de 10 pixeli. Aceste două coloane se vor repeta de trei ori, astfel încât în grid vor fi în total 7 coloane.
Cu rândurile, procesul este similar, doar că se creează 5 rânduri folosind liniile grid "row" și "rowgutter".
La definirea stilului elementelor, folosind numele liniilor grid și numărul lor ordinal, putem specifica explicit cu ajutorul proprietăților grid-column și grid-row unde trebuie să fie poziționat fiecare element:
.special-item {
grid-column: column 2; /* a doua coloană denumită column */
grid-row: row 1; /* primul rând denumit row */
background-color: #bbb;
}Proprietatea grid-column: column 2 indică coloana din grid care începe de la a doua linie grid denumită "column". În final, vom obține următorul grid:
Poate mulți vor găsi această abordare mai intuitivă pentru a defini poziția unui element.
Mai mult, putem adăuga noi linii grid denumite în afara funcției repeat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Grid Layout în CSS3</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
display: grid;
grid-template-columns: 10px repeat(3, [column] 1fr [colgutter] 10px)
[sidebarstart] 150px [sidebarend] 10px;
grid-template-rows: 10px repeat(2, [row] 1fr [rowgutter] 10px);
}
.grid-item {
background-color: #ddd;
}
.special-item {
grid-column: column 2;
grid-row: row 1;
background-color: #bbb;
}
.item1 {
grid-column: column 1;
grid-row: row 1;
}
.item2 {
grid-column: column 3;
grid-row: row 1;
}
.item3 {
grid-column: column 1;
grid-row: row 2;
}
.item4 {
grid-column: column 2;
grid-row: row 2;
}
.sidebar {
grid-column: sidebarstart / sidebarend;
grid-row: 2 / 5;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item special-item"></div>
<div class="grid-item item1"></div>
<div class="grid-item item2"></div>
<div class="grid-item item3"></div>
<div class="grid-item item4"></div>
<div class="grid-item sidebar"></div>
</div>
</body>
</html>Indiferent dacă liniile, coloanele și rândurile grid sunt denumite sau nu, putem în continuare poziționa elementele folosind numerele liniilor grid, așa cum se face în cazul sidebarului:
.sidebar {
grid-column: sidebarstart / sidebarend;
grid-row: 2 / 5;
background-color: #ccc;
}