Elemente CSS Grid - Aliniere
În interiorul celulei sale de grid, un element poate fi poziționat cu trei proprietăți:
justify-self— aliniază elementul pe orizontală în interiorul celulei.align-self— aliniază elementul pe verticală în interiorul celulei.place-self— o prescurtare care combinăalign-selfșijustify-self.
Pentru a alinia toate elementele grid dintr-o dată, pune în schimb justify-items și align-items pe containerul grid.
Proprietatea CSS justify-self
Plasarea pe orizontală (în direcția inline) a unui element grid în celula sa este gestionată de proprietatea justify-self.
Sfat: Pe o pagină în limba engleză, direcția inline merge de la stânga la dreapta, iar direcția de bloc merge de sus în jos.
Valorile sale posibile sunt auto (implicit), normal, stretch, start, left, center, end, right.
Notă: Fără spațiu liber în jurul elementului pe direcția inline, această proprietate nu face nimic.
Exemplu
Aici justify-self mută elementele pe orizontală în interiorul propriilor celule de grid.
justify-self: right, iar elementul 6 să folosească justify-self: center pentru a arăta alinierea orizontală în interiorul celulelor grilei.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>justify-self Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
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 {
justify-self: right;
}
.item6 {
justify-self: center;
}
</style>
</head>
<body>
<h1>The justify-self Property</h1>
<div class="grid-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>
Proprietatea CSS align-self
Plasarea pe verticală, în direcția de bloc, este ceea ce face align-self pentru un element grid în celula sa.
O poți seta la auto (implicit), normal, stretch, start, end, center.
Notă: Elementul trebuie să aibă spațiu liber în jurul său pe direcția de bloc, altfel proprietatea nu schimbă nimic.
Exemplu
Aici align-self mută elementele pe verticală în interiorul propriilor celule de grid.
align-self: start, iar elementul 6 să folosească align-self: center pentru a arăta alinierea verticală în interiorul celulelor grilei.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>align-self Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 80px 80px;
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 {
align-self: start;
}
.item6 {
align-self: center;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<div class="grid-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>
Proprietățile de aliniere ale elementelor CSS Grid
Proprietățile pentru alinierea elementelor grid, pe scurt:
align-self— aliniază un element în interiorul celulei sale pe direcția de bloc.justify-self— aliniază un element în interiorul celulei sale pe direcția inline.place-self— o prescurtare care combinăalign-selfșijustify-self.