CSS grid-container

1
2
3
4
5
6
7
8

Prova själv

Nätverksbehållare

För att göra en HTML-element en nätverksbehållare, måste du sätta display Egenskapen sätts till grid eller inline-grid.

Nätverksbehållaren består av nätverksobjekt som placeras inom kolumner och rader.

grid-template-columns egenskapen

grid-template-columns Egenskapen definierar antalet kolumner i nätverkslayouten och kan definiera bredden för varje kolumn.

Värdet är en lista av värden separerade med blanksteg, där varje värde definierar längden för motsvarande kolumn.

Om du vill att nätverkslayouten ska innehålla fyra kolumner, specificera bredden på dessa fyra kolumner; om alla kolumner ska ha samma bredd, sätt till "auto".

Exempel

Skapa ett nätverk med fyra kolumner:

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

Prova själv

Observera:Om det finns fler än 4 objekt i ett 4-kolumnigt nätverk, lägger nätverket automatiskt till nya rader och lägger dessa objekt i dem.

grid-template-columns Egenskapen kan också användas för att specificera storleken på kolumnerna (bredd).

Exempel

Ställ in storleken på dessa 4 kolumner:

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

Prova själv

grid-template-rows egenskapen

grid-template-rows Egenskapen definierar höjden för varje kolumn.

1
2
3
4
5
6
7
8

Värdet är en lista av värden separerade med blanksteg, där varje värde definierar höjden för motsvarande rad:

Exempel

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

Prova själv

justify-content egenskapen

justify-content Egenskapen används för att justera hela nätverket inom behållaren.

1
2
3
4
5
6
7
8

Observera:Det totala bredden på nätverket måste vara mindre än bredden på behållaren för att justify-content egenskapen ska fungera.

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

align-content egenskapen

align-content Egenskapen används för att vertikalt justera hela nätverket inom behållaren.

1
2
3
4
5
6
7
8

Observera:Den totala höjden på nätverket måste vara lägre än behållarens höjd för att align-content-attributet ska fungera.

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv

Exempel

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

Prova själv