Containerul CSS Grid - Alinierea conținutului grilei
Când conținutul grilei nu umple containerul grid, trei proprietăți controlează modul în care este aliniat acest conținut:
justify-content- aliniere orizontală, pentru conținut mai îngust decât containerul.align-content- aliniere verticală, pentru conținut mai scund decât containerul.place-content- o prescurtare care acoperăalign-contentșijustify-content.
Proprietatea CSS justify-content
justify-content lucrează cu spațiul orizontal liber din container: decide cum este aliniat pe orizontală conținutul grilei atunci când acest spațiu există.
Valorile posibile sunt space-evenly, space-around, space-between, center, start și end.
Notă: justify-content nu are niciun efect dacă lățimea totală a conținutului grilei nu este mai mică decât lățimea containerului.
justify-content: space-evenly
Cu space-evenly, elementele grilei primesc cantități egale de spațiu în jurul lor.
Prompt
Creați un layout CSS Grid cu un container care conține 6 elemente numerotate într-un grid de 3x2. Setați coloanele grilei la 70px fiecare și folosiți
justify-content: space-evenly pentru a distribui spațiul uniform în jurul coloanelor. Dați containerului o culoare de fundal, iar elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-evenly</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-evenly;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-evenly</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: space-around
Când folosești space-around, fiecare element al grilei este înconjurat de spațiu.
Prompt
Creați un layout CSS Grid cu un container care conține 6 elemente numerotate într-un grid de 3x2. Setați coloanele grilei la 70px fiecare și folosiți
justify-content: space-around pentru a adăuga spațiu egal în jurul fiecărei coloane. Dați containerului o culoare de fundal, iar elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-around</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-around;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-around</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: space-between
Când folosești space-between, apare spațiu între elementele grilei.
Prompt
Creați un layout CSS Grid cu un container care conține 6 elemente numerotate într-un grid de 3x2. Setați coloanele grilei la 70px fiecare și folosiți
justify-content: space-between pentru a plasa spațiu maxim între coloane. Dați containerului o culoare de fundal, iar elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: space-between;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: center
Folosind center, elementele grilei se adună în centrul containerului.
Prompt
Creează un layout CSS Grid cu un container care conține 6 elemente numerotate într-o grilă 3x2. Setează coloanele grilei la câte 70px fiecare și folosește
justify-content: center pentru a centra grila orizontal în interiorul containerului. Dă containerului o culoare de fundal și elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: center;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: start
Folosind start, elementele grilei se adună la începutul containerului.
Prompt
Creați un layout CSS Grid cu un container care conține 6 elemente numerotate într-un grid de 3x2. Setați coloanele grilei la 70px fiecare și folosiți
justify-content: start pentru a alinia grila la începutul containerului. Dați containerului o culoare de fundal, iar elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: start</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: start;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: start</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
justify-content: end
Folosind end, elementele grilei se adună la capătul containerului.
Prompt
Creați un layout CSS Grid cu un container care conține 6 elemente numerotate într-un grid de 3x2. Setați coloanele grilei la 70px fiecare și folosiți
justify-content: end pentru a alinia grila la capătul containerului. Dați containerului o culoare de fundal, iar elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid justify-content: end</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
justify-content: end;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid justify-content: end</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Proprietatea CSS align-content
Corespondentul vertical este align-content: când containerul are înălțime în plus, decide cum este aliniat pe verticală conținutul grilei.
Valorile posibile sunt space-evenly, space-around, space-between, center, start și end.
Notă: align-content nu are niciun efect dacă înălțimea totală a conținutului grilei nu este mai mică decât înălțimea containerului.
Ca efectul să se vadă mai ușor, exemplele de mai jos folosesc un container înalt de 300 de pixeli.
align-content: center
Folosind center, elementele grilei se adună în mijlocul containerului.
Prompt
Creează un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-o grilă 3x2. Folosește
align-content: center pentru a centra vertical rândurile grilei în interiorul containerului. Dă containerului o culoare de fundal și elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: center;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-evenly
space-evenly distribuie uniform liniile grilei, așa că spațiile de sus, de jos și dintre linii sunt toate egale.
Prompt
Creează un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-o grilă 3x2. Folosește
align-content: space-evenly pentru a distribui spațiu vertical egal în jurul rândurilor. Dă containerului o culoare de fundal și elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-evenly</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-evenly;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-evenly</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-around
space-around face egale spațiile dintre liniile grilei, iar spațiul dinainte de primul rând și de după ultimul rând este jumătate din spațiul dintre rânduri.
Prompt
Creează un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-o grilă 3x2. Folosește
align-content: space-around pentru a adăuga spațiu vertical egal în jurul fiecărui rând. Dă containerului o culoare de fundal și elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-around</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-around;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-around</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: space-between
space-between face și el egale aceste spații, dar primul rând este lipit de partea de sus a containerului, iar ultimul rând de partea de jos.
Prompt
Creează un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-o grilă 3x2. Folosește
align-content: space-between pentru a plasa primul rând sus și ultimul rând jos. Dă containerului o culoare de fundal și elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: space-between;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: start
Folosind start, elementele grilei se adună în partea de sus a containerului.
Prompt
Creează un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-o grilă 3x2. Folosește
align-content: start pentru a alinia rândurile grilei la partea de sus a containerului. Dă containerului o culoare de fundal și elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: start</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: start;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: start</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
align-content: end
Folosind end, elementele grilei se adună în partea de jos a containerului.
Prompt
Creează un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-o grilă 3x2. Folosește
align-content: end pentru a alinia rândurile grilei la partea de jos a containerului. Dă containerului o culoare de fundal și elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid align-content: end</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
align-content: end;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid align-content: end</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Proprietatea CSS place-content
În loc să scrii separat align-content și justify-content, le poți combina cu prescurtarea place-content.
Dacă primește două valori, prima se aplică la align-content, iar a doua la justify-content. Astfel, place-content: start center îi dă lui align-content valoarea start și lui justify-content valoarea center.
Dacă primește o singură valoare, o aplică atât la align-content, cât și la justify-content.
Notă: place-content nu are niciun efect dacă înălțimea și lățimea totală a conținutului grilei nu sunt mai mici decât înălțimea și lățimea containerului.
place-content: center
Folosind center, elementele grilei se adună în mijlocul containerului pe ambele axe, vertical și orizontal.
Prompt
Creați un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-un grid de 3x2. Folosiți
place-content: center pentru a centra grila atât vertical, cât și orizontal în interiorul containerului. Dați containerului o culoare de fundal, iar elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid place-content: center</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
place-content: center;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid place-content: center</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
place-content: end space-between
Cu end space-between, rândurile grilei se mută spre partea de jos a containerului, iar coloanele sunt distribuite pe orizontală, cu spațiu egal între ele.
Prompt
Creați un layout CSS Grid cu un container de 300px înălțime care conține 6 elemente numerotate într-un grid de 3x2 cu coloane de 70px. Folosiți
place-content: end space-between pentru a alinia rândurile la partea de jos și a distribui coloanele cu spațiu între ele. Dați containerului o culoare de fundal, iar elementelor o culoare de fundal distinctă cu padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid place-content: end space-between</title>
<style>
.container {
display: grid;
grid-template-columns: 70px 70px 70px;
place-content: end space-between;
height: 300px;
background-color: #ccc;
padding: 10px;
}
.container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #000;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<h2>CSS Grid place-content: end space-between</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>