Spații între celule în Grid CSS

Spațiile CSS Grid

Spațiile, cunoscute și ca gutters, sunt cele care separă rândurile și coloanele unui container grid.

Ele apar doar între rândurile și coloanele grilei, niciodată de-a lungul marginilor exterioare ale containerului grid.

Implicit, dimensiunea spațiului este 0, așa că elementele grilei se ating fără nicio spațiere.

Trei proprietăți îți permit să schimbi acest lucru:

column-gap — controlează spațierea dintre coloanele grilei
row-gap — controlează spațierea dintre rândurile grilei
gap — prescurtare pentru row-gap și column-gap

Proprietatea CSS column-gap

Folosește column-gap pentru a controla spațiul dintre coloanele unei grile.

Exemplu

În acest exemplu, coloanele grilei sunt la 50 de pixeli distanță una de alta.

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Setați un spațiu de 50px între coloane folosind proprietatea column-gap.

> Output: complete HTML page

Prompt

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Setați un spațiu de 50px între coloane folosind proprietatea column-gap.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid column-gap</title>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The column-gap Property</h1>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

Proprietatea CSS row-gap

Folosește row-gap pentru a controla spațiul dintre rândurile unei grile.

Exemplu

În acest exemplu, rândurile grilei sunt la 50 de pixeli distanță unul de altul.

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Setați un spațiu de 50px între rânduri folosind proprietatea row-gap.

> Output: complete HTML page

Prompt

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Setați un spațiu de 50px între rânduri folosind proprietatea row-gap.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid row-gap</title>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The row-gap Property</h1>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

Proprietatea CSS gap

A scrie gap este o prescurtare pentru a scrie row-gap și column-gap.

Cu o singură valoare, aplică același spațiu rândurilor și coloanelor.

Cu două valori, o citește pe prima ca row-gap și pe a doua ca column-gap.

Valoare unică

O singură valoare dă atât rândurilor, cât și coloanelor un spațiu de 50px.

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Folosiți proprietatea prescurtată gap cu o singură valoare de 50px pentru a seta spații egale atât între rânduri, cât și între coloane.

> Output: complete HTML page

Prompt

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Folosiți proprietatea prescurtată gap cu o singură valoare de 50px pentru a seta spații egale atât între rânduri, cât și între coloane.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid gap - Single Value</title>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 50px;
  background-color: #2196F3;
  padding: 10px;
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The gap Property (Single Value)</h1>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

Două valori

Două valori dau rândurilor un spațiu de 30px și coloanelor un spațiu de 100px.

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Folosiți proprietatea prescurtată gap cu două valori: 30px pentru spațiul dintre rânduri și 100px pentru spațiul dintre coloane.

> Output: complete HTML page

Prompt

Creați un layout CSS Grid cu un container care are 3 coloane și cel puțin 5 elemente grid (numerotate 1-5). Folosiți proprietatea prescurtată gap cu două valori: 30px pentru spațiul dintre rânduri și 100px pentru spațiul dintre coloane.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid gap - Two Values</title>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 30px 100px;
  background-color: #2196F3;
  padding: 10px;
}

.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The gap Property (Two Values)</h1>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

Proprietățile CSS Grid Gap

Proprietățile CSS pentru spațiile grilei, pe scurt:

column-gap — spațiul lăsat între coloanele grilei
gap — prescurtare atât pentru row-gap, cât și pentru column-gap
row-gap — spațiul lăsat între rândurile grilei