Trasee CSS Grid (rânduri și coloane)
Un container grid decide câte coloane și rânduri are și cât de mari sunt.
Trei proprietăți controlează acest lucru:
grid-template-columns— câte coloane are grila și cât de late sunt.grid-template-rows— câte rânduri are grila și cât de înalte sunt.grid-template-areas— dispune coloanele și rândurile prin elemente de grilă numite.
Proprietatea CSS grid-template-columns
Numărul și lățimea coloanelor vin din grid-template-columns.
Îi dai o listă separată prin spații, cu o valoare pentru fiecare coloană, iar acea valoare este lățimea coloanei.
Alegerile tipice includ:
- Lungimi fixe, ca în 100px 300px 200px
- Procente, ca în 20% 60% 20%
- Unitatea
fr, ca în 1fr 2fr 1fr auto, ca în auto auto autorepeat(), ca în repeat(3, 1fr)minmax(), ca în minmax(80px, 1fr) 150px 150px
CSS grid-template-columns: auto
Dacă scrii cuvântul cheie auto de trei ori, obții un aspect de grilă cu 3 coloane. Cu conținut de dimensiuni apropiate, ca aici, coloanele ajung la lățime egală.
Exemplu
Trei coloane de lățime egală, care conțin șase elemente numerotate.
grid-template-columns: auto auto auto. Plasați 6 elemente numerotate în interiorul grilei.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Columns Auto</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: auto auto auto</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>
Coloane de grilă cu lățime mixtă
Coloanele nu trebuie să aibă aceeași dimensiune. Poți, de exemplu, să fixezi lățimea a 2 coloane și să lași 1 la dimensiune auto.
Exemplu
Aici lățimile sunt 80px pentru coloana 1, 200px pentru coloana 2 și dimensiune auto pentru coloana 3.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Mixed Width</title>
<style>
.container {
display: grid;
grid-template-columns: 80px 200px auto;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 80px 200px auto</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>
Coloane de grilă cu unitatea fr
Prescurtare de la „fraction” (fracțiune), unitatea fr împarte automat spațiul disponibil în părți egale numite fracțiuni.
Așadar, 1fr ocupă 1 fracțiune din acel spațiu, iar 2fr ocupă 2.
Coloane egale
Lățimea containerului este împărțită în mod egal, iar fiecare coloană primește 33.3%.
1fr 1fr 1fr). Plasați 6 elemente numerotate în interiorul grilei.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns FR Equal</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 1fr 1fr 1fr</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>
Coloane inegale
Comparativ cu celelalte, a doua coloană are lățimea dublă.
1fr 2fr 1fr). Plasați 6 elemente numerotate în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns FR Unequal</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 1fr 2fr 1fr</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>
Coloane de grilă cu funcția repeat()
O grilă poate refolosi de multe ori un grup de coloane sau rânduri prin funcția repeat().
Exemplu
Trei coloane de lățime egală, scrise cu repeat().
repeat() (repeat(3, 1fr)). Plasați 6 elemente numerotate în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Repeat</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: repeat(3, 1fr)</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>
Coloane de grilă cu funcția minmax()
Un interval de dimensiune cu o valoare minimă și una maximă vine din funcția minmax(): dimensiunea nu scade niciodată sub prima și nu depășește a doua.
Exemplu
Niciodată mai îngustă de 80px, prima coloană poate crește până la 1fr.
minmax(80px, 1fr) 150px 150px pentru grid-template-columns. Plasați 6 elemente numerotate în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Minmax</title>
<style>
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: minmax(80px, 1fr) 150px 150px</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 grid-template-rows
Numărul și înălțimea rândurilor vin din grid-template-rows.
Din nou dai o listă separată prin spații, iar fiecare intrare îi dă unui rând înălțimea lui.
Alegerile tipice includ lungimi fixe, procente, unitatea fr, auto, min-content, max-content, repeat(), minmax() și fit-content().
Exemplu
Primul rând primește o înălțime de 80px, iar al doilea 200px. Rândurile de după acestea două au implicit auto.
grid-template-rows: 80px 200px pentru a seta primul rând la 80px și al doilea la 200px. Plasați 8 elemente numerotate în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Rows</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-rows: 80px 200px</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>