CSS Grid Container

Indholdsfortegnelse

    Vis indholdsfortegnelse

En gitterbeholder består af gitterelementer arrangeret i kolonner og rækker

1

2

3

4

5

6

7

8

Direkte underordnede elementer i gitterbeholderen bliver automatisk til gitterelementer.

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>Grid Container</h1>

<p>A Grid Container consists of grid items arranged in columns and rows</p>

<div class="grid-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>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

</body>
</html>

Gitterbeholder

For at få et HTML-element til at opføre sig som en gitterbeholder, skal du indstille egenskaben display til grid eller < code class="w3-codespan">inline-grid.

Gitterbeholdere består af gitterelementer, placeret inde i kolonner og rækker.

Gitter-skabelon-kolonnerne Egenskab

Egenskaben grid-template-columns definerer antallet af kolonner i dit gitterlayout, og den kan definere bredden af hver kolonne.

Værdien er en mellemrum-separeret-liste, hvor hver værdi definerer bredden af den respektive kolonne.

Hvis du ønsker, at dit gitterlayout skal indeholde 4 kolonner, skal du angive bredden på de 4 kolonner, eller "auto", hvis alle kolonner skal have samme bredde.

Eksempel

Lav et gitter med 4 kolonner:

 .grid-container {
    display: grid;
  
  grid-template-columns: auto auto auto auto;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto 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 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template-columns Property</h1>

<p>You can use the <em>grid-template-columns</em> property to specify the number of columns in your grid layout.</p>

<div class="grid-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>

Bemærk: Hvis du har mere end 4 elementer i et gitter med 4 kolonner, vil gitteret automatisk tilføje en ny række for at sætte emnerne ind.

Egenskaben grid-template-columns kan også bruges til at angive størrelsen (bredden) af kolonnerne.

Eksempel

Indstil en størrelse for de 4 kolonner:

 .grid-container {
    display: grid;
  
  grid-template-columns: 80px 200px auto 40px;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 30px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The grid-template-columns Property</h1>

<p>Use the <em>grid-template-columns</em> property to specify the size of each column.</p>

<div class="grid-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>

Grid-template-rows Property

Egenskaben grid-template-rows definerer højden af hver række.

1

2

3

4

5

6

7

8

Værdien er en mellemrum-separeret-liste, hvor hver værdi definerer højden af den respektive række:

Eksempel

 .grid-container {
    display: grid;
  
  grid-template-rows: 80px 200px;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The grid-template-rows Property</h1>

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

<p>Use the <em>grid-template-rows</em> property to specify the size (height) of each row.</p>

</body>
</html>

Den retfærdiggøre-indhold Ejendom

Egenskaben justify-content bruges til at justere hele gitteret inde i containeren.

1

2

3

4

5

6

Bemærk: Gitterets samlede bredde skal være mindre end containerens bredde, for at egenskaben justify-content har nogen effekt.

Eksempel

 .grid-container {
    display: grid;
  
  justify-content: space-evenly;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-evenly" will give the columns equal amount of space between, and around them:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  
  justify-content: space-around;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-around;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-around" will give the columns equal amount of space around them:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  
  justify-content: space-between;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "space-between" will give the columns equal amount of space between them:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  
  justify-content: center;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "center" will align the grid in the middle of the container:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  
  justify-content: start;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: start;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "start" will align the grid at the beginning of the container:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  
  justify-content: end;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: end;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

<h1>The justify-content Property</h1>

<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value "end" will align the grid at the end of the container:</p>

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

</body>
</html>

Egenskaben align-content

Egenskaben align-content bruges til at vertikalt justere hele gitteret inde i containeren.

1

2

3

4

5

6

Bemærk: Gitterets samlede højde skal være mindre end containerens højde for at egenskaben align-content har nogen effekt.

Eksempel

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: center;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  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 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "center" will align the rows in the middle of the container:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: space-evenly;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
  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 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-evenly" will give the rows equal amount of space between, and around them:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: space-around;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
  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 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-around" will give the rows equal amount of space around them:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: space-between;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
  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 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "space-between" will give the rows equal amount of space between them:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: start;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
  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 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "start" will align the rows at the beginning of the container:</p>

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

</body>
</html>

Eksempel

 .grid-container {
    display: grid;
  height: 400px;
  
  align-content: end;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
  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 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-content Property</h1>

<p>Use the <em>align-content</em> property to vertically align the grid inside the container.</p>

<p>The value "end" will align the rows at the end of the container:</p>

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

</body>
</html>