CSS gittercontainer

1
2
3
4
5
6
7
8

Prøv det selv

Netværkscontainer

For at gøre et HTML-element til en netværkscontainer, skal du sætte display Egenskaben sættes til grid eller inline-grid.

Netværkscontaineren består af netværksobjekter placeret i kolonner og rækker.

grid-template-columns egenskab

grid-template-columns Egenskaben definerer antallet af kolonner i netværkslayouten og kan definere bredden for hver kolonne.

Værdien er en liste adskilt af mellemrum, hvor hver værdi definerer længden for den tilsvarende kolonne.

Hvis du ønsker, at netværkslayouten skal inkludere fire kolonner, skal du specificere bredden af disse fire kolonner; hvis alle kolonner skal have samme bredde, sæt det til "auto".

Eksempel

Opret et netværk med fire kolonner:

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

Prøv det selv

Bemærk:Hvis der er 4 eller flere elementer i et 4-kolonnes netværk, tilføjer netværket automatisk nye rækker og placerer disse elementer deri.

grid-template-columns Egenskaben kan også bruges til at specificere kolonnenes størrelse (bredde).

Eksempel

Indstil størrelsen på disse 4 kolonner:

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

Prøv det selv

grid-template-rows egenskab

grid-template-rows Egenskaben definerer højden for hver kolonne.

1
2
3
4
5
6
7
8

Værdierne er en liste adskilt af mellemrum, hvor hver værdi definerer højden for den tilsvarende række:

Eksempel

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

Prøv det selv

justering af indhold egenskab

justify-content Egenskaben bruges til at justere hele netværket inden for containere.

1
2
3
4
5
6
7
8

Bemærk:Det samlede bredde af netværket skal være mindre end containerens bredde, ellers virker egenskaben justify-content ikke.

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

justering af indhold egenskab

justering af indhold Egenskaben bruges til at jævne hele gitteret inden for containeren.

1
2
3
4
5
6
7
8

Bemærk:Hele gitterets højde skal være mindre end containerens højde, så align-content egenskaben kan virke.

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv

Eksempel

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

Prøv det selv