Elemente CSS Grid
În interiorul unui container grid se află unul sau mai multe elemente grid. Orice element care este copil direct al containerului devine automat element grid.
Exemplu
Cinci elemente grid în interiorul unui singur container grid:
Prompt
Creați un container CSS grid cu cinci elemente grid numerotate de la 1 la 5. Containerul trebuie să aibă trei coloane de lățime egală. Stilizați fiecare element cu o culoare de fundal, padding și text centrat.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Items Intro</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Items</h1>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
CSS Dimensionarea/Extinderea elementelor grid
Un singur element grid nu este limitat la o celulă: se poate întinde pe mai multe coloane sau rânduri.
Locul în care începe și se termină este controlat de aceste proprietăți:
grid-column-start— linia de coloană pe care începe elementulgrid-column-end— linia de coloană pe care se termină elementulgrid-column— prescurtare care combinăgrid-column-startșigrid-column-endgrid-row-start— linia de rând pe care începe elementulgrid-row-end— linia de rând pe care se termină elementulgrid-row— prescurtare care combinăgrid-row-startșigrid-row-end
Când plasezi un element grid, faci referire la numerele liniilor: liniile de coloană se află între coloane, iar liniile de rând se află între rânduri.
CSS grid-column-start și grid-column-end
Un element grid începe la linia de coloană indicată de grid-column-start și se termină la cea indicată de grid-column-end.
Exemplu
Aici, primul element grid se întinde de la linia de coloană 1 până la linia de coloană 3:
Prompt
Creați un layout CSS grid cu cinci elemente. Grila are trei coloane. Faceți ca primul element să înceapă la linia de coloană 1 și să se termine la linia de coloană 3, astfel încât să se întindă pe două coloane. Stilizați elementele cu culori de fundal, padding și text centrat.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-column-start and grid-column-end</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>grid-column-start and grid-column-end</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Proprietatea CSS grid-column
Dacă scrii grid-column, nu mai trebuie să setezi separat grid-column-start și grid-column-end, deoarece este prescurtarea lor.
Exemplu
Pornind de la linia de coloană 1, primul element grid de aici se întinde pe 2 coloane:
Prompt
Creați un layout CSS grid cu cinci elemente într-un grid cu trei coloane. Folosiți proprietatea prescurtată grid-column pe primul element pentru a începe la linia de coloană 1 și a se întinde pe 2 coloane. Stilizați elementele cu culori de fundal, padding și text centrat.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-column Shorthand</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
}
</style>
</head>
<body>
<h1>grid-column Shorthand</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
CSS grid-row-start și grid-row-end
Rândurile funcționează la fel: grid-row-start indică linia de rând pe care începe un element grid, iar grid-row-end pe cea pe care se termină.
Exemplu
Aici, primul element grid se întinde de la linia de rând 1 până la linia de rând 3:
Prompt
Creați un layout CSS grid cu cinci elemente într-un grid cu trei coloane. Faceți ca primul element să înceapă la linia de rând 1 și să se termine la linia de rând 3, astfel încât să se întindă pe două rânduri. Stilizați elementele cu culori de fundal, padding și text centrat.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-row-start and grid-row-end</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<h1>grid-row-start and grid-row-end</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Proprietatea CSS grid-row
grid-row este prescurtarea care înlocuiește grid-row-start și grid-row-end.
Exemplu
Pornind de la linia de rând 1, primul element grid de aici se întinde pe 2 rânduri:
Prompt
Creați un layout CSS grid cu cinci elemente într-un grid cu trei coloane. Folosiți proprietatea prescurtată grid-row pe primul element pentru a începe la linia de rând 1 și a se întinde pe 2 rânduri. Stilizați elementele cu culori de fundal, padding și text centrat.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-row Shorthand</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<h1>grid-row Shorthand</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Combinarea grid-column și grid-row
Pentru ca un element grid să se întindă pe coloane și rânduri în același timp, dă-i atât grid-column, cât și grid-row.
Exemplu
Aici, primul element grid începe la linia de coloană 1 și la linia de rând 1 și se întinde pe 2 coloane și 2 rânduri:
Prompt
Creați un layout CSS grid cu șase elemente într-un grid cu trei coloane. Folosiți grid-column și grid-row pe primul element astfel încât să înceapă la linia de coloană 1 și să se întindă pe 2 coloane, iar să înceapă la linia de rând 1 și să se întindă pe 2 rânduri. Stilizați elementele cu culori de fundal, padding și text centrat.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combine grid-column and grid-row</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<h1>Combine grid-column and grid-row</h1>
<div class="grid-container">
<div class="item1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Toate proprietățile elementelor CSS Grid
Acest tabel adună toate proprietățile CSS pe care le pot folosi elementele grid:
Tabel cu proprietățile elementelor grid
index.html
<table>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
<tr>
<td>align-self</td>
<td>Aligns the content for a specific grid item along the column axis</td>
</tr>
<tr>
<td>grid-area</td>
<td>A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties</td>
</tr>
<tr>
<td>grid-column</td>
<td>A shorthand property for the grid-column-start and the grid-column-end properties</td>
</tr>
<tr>
<td>grid-column-end</td>
<td>Specifies where to end the grid item</td>
</tr>
<tr>
<td>grid-column-start</td>
<td>Specifies where to start the grid item</td>
</tr>
<tr>
<td>grid-row</td>
<td>A shorthand property for the grid-row-start and the grid-row-end properties</td>
</tr>
<tr>
<td>grid-row-end</td>
<td>Specifies where to end the grid item</td>
</tr>
<tr>
<td>grid-row-start</td>
<td>Specifies where to start the grid item</td>
</tr>
<tr>
<td>justify-self</td>
<td>Aligns the content for a specific grid item along the row axis</td>
</tr>
<tr>
<td>place-self</td>
<td>A shorthand property for the align-self and the justify-self properties</td>
</tr>
</table>