Containerul CSS Grid
Un container grid conține unul sau mai multe elemente grid aranjate în coloane și rânduri.
Toate elementele copil directe ale unui container grid devin automat elemente grid.
Un element devine container grid atunci când proprietatea sa display este setată la grid sau inline-grid.
Exemplu
Prompt
Creați o pagină HTML cu un container grid care conține 5 elemente numerotate (1 până la 5). Folosiți
display: grid pe container.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid Container</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Proprietatea Display Grid
Un element <div> devine container grid atunci când proprietatea sa display este setată la grid sau inline-grid.
Grid la nivel de bloc
Folosiți display: grid pentru a crea un container grid la nivel de bloc.
Prompt
Creați o pagină HTML cu un container div care folosește
display: grid și conține 5 elemente copil numerotate (1 până la 5). Stilizați fiecare element cu o culoare de fundal și padding pentru a arăta comportamentul de grid la nivel de bloc.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Grid</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Display Grid</h1>
<p>A block-level grid container:</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Grid la nivel inline
Folosiți display: inline-grid pentru a crea un container grid la nivel inline.
Prompt
Creați o pagină HTML cu un container div care folosește
display: inline-grid și conține 5 elemente copil numerotate (1 până la 5). Stilizați fiecare element cu o culoare de fundal și padding pentru a arăta comportamentul de grid la nivel inline.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Inline Grid</title>
<style>
.container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Display Inline Grid</h1>
<p>An inline-level grid container:</p>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Proprietățile containerului CSS Grid
Iată o listă cu toate proprietățile CSS care pot fi folosite pe un container grid:
align-content— aliniază vertical grila în interiorul containerului.align-items— aliniază elementele din grilă.column-gap— setează spațiul dintre coloane.display— setează elementul ca container grid.gap— o prescurtare pentrurow-gapșicolumn-gap.grid— o prescurtare pentru mai multe proprietăți grid.grid-auto-columns— setează dimensiunea coloanelor generate automat.grid-auto-flow— controlează modul în care sunt inserate elementele plasate automat.grid-auto-rows— setează dimensiunea rândurilor generate automat.grid-template— o prescurtare pentru definirea rândurilor, coloanelor și zonelor.grid-template-areas— definește zone denumite ale grilei.grid-template-columns— setează numărul și dimensiunea coloanelor.grid-template-rows— setează numărul și dimensiunea rândurilor.justify-content— aliniază orizontal grila în interiorul containerului.justify-items— aliniază elementele de-a lungul axei rândurilor.place-content— o prescurtare pentrualign-contentșijustify-content.place-items— o prescurtare pentrualign-itemsșijustify-items.row-gap— setează spațiul dintre rânduri.