Linii grid denumite
În Grid Layout putem denumi fiecare linie a gridului, atribuindu-i un nume între paranteze pătrate și apoi folosind acest nume pentru a poziționa elementele. De exemplu, să definim următoarea pagină web:
<!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: [col1start] 1fr [col1end] 10px
[col2start] 1fr [col2end] 10px
[col3start] 1fr [col3end];
grid-template-rows: [row1start] 1fr [row1end] 10px [row2start] 1fr [row2end];
}
.grid-item {
background-color: #ddd;
}
.special-item {
grid-column: col1start / col2end;
grid-row: row1start;
background-color: #bbb;
}
.item1 {
grid-column: col3start / col3end;
grid-row: row1start;
}
.item2 {
grid-column: col1start / col1end;
grid-row: row2start;
}
.item3 {
grid-column: col2start / col2end;
grid-row: row2start;
}
.item4 {
grid-column: col3start / col3end;
grid-row: row2start;
}
</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>La denumirea liniilor, numele lor sunt puse între paranteze pătrate, iar între nume se specifică lățimea coloanei sau înălțimea rândului dintre aceste linii:
grid-template-columns: [col1start] 1fr [col1end] 10px
[col2start] 1fr [col2end] 10px
[col3start] 1fr [col3end];
grid-template-rows: [row1start] 1fr [row1end] 10px [row2start] 1fr [row2end];Apoi, folosind aceste denumiri, putem poziționa elementele între liniile specificate:
.special-item {
grid-column: col1start / col2end;
grid-row: row1start;
background-color: #bbb;
}În acest caz, elementul cu clasa special-item începe de la linia grid verticală col1start și se întinde până la linia grid verticală col2end. De asemenea, acesta începe de la linia grid orizontală row1start și, deoarece linia orizontală finală nu este specificată, elementul ocupă doar un rând.
Un alt exemplu legat de crearea unui layout de pagină:
<!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 {
padding: 0;
margin: 0;
}
.grid-container {
display: grid;
height: 100vh;
grid-template-rows: 6em 10px 1fr;
grid-template-columns: [mainstart] 1fr [mainend] 10px [sidebarestart] 25% [sidebarend];
}
.grid-item-content {
background-color: #455a64;
grid-row: 3 / 4;
grid-column: mainstart / mainend;
}
.grid-item-sidebar {
background-color: #37474f;
grid-row: 3 / 4;
grid-column: sidebarestart / sidebarend;
}
.grid-item-header {
background-color: #263238;
grid-row: 1 / 2;
grid-column: mainstart / sidebarend;
}
.grid-item {
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<main class="grid-container">
<header class="grid-item grid-item-header">
<h1>Header</h1>
</header>
<article class="grid-item grid-item-content">
<h1>Conținut principal</h1>
</article>
<aside class="grid-item grid-item-sidebar">
<h1>Sidebar</h1>
</aside>
</main>
</body>
</html>
În acest exemplu, liniile grid sunt denumite pentru a crea un layout clar și structurat. Elementele sunt poziționate între aceste linii denumite, facilitând astfel gestionarea layout-ului și modificările ulterioare.