CSS grid container

1
2
3
4
5
6
7
8

Probeer het zelf

Rastercontainer

Om een HTML-element te laten fungeren als rastercontainer, moet je display De eigenschap wordt ingesteld op grid of inline-grid.

De rastercontainer bestaat uit rasteritems die worden geplaatst in de kolommen en rijen.

grid-template-columns-eigenschap

grid-template-columns De eigenschap definieert het aantal kolommen in het rasterlay-out en kan de breedte van elke kolom definiëren.

De waarde is een lijst gescheiden door spaties, waarbij elke waarde de lengte van het bijbehorende kolom definieert.

Als u een rasterwinstyle met vier kolommen wilt hebben, specificeer dan de breedte van deze vier kolommen; als alle kolommen dezelfde breedte moeten hebben, stel dan "auto" in.

Voorbeeld

Maak een raster met vier kolommen:

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

Probeer het zelf

Opmerking:Als er meer dan 4 items in een 4-koloms raster zijn, voegt het raster automatisch nieuwe rijen toe en plaatst deze items erin.

grid-template-columns De eigenschap kan ook worden gebruikt om de afmetingen (breedte) van de kolommen te specificeren.

Voorbeeld

Stel de afmetingen van deze 4 kolommen in:

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

Probeer het zelf

grid-template-rows-eigenschap

grid-template-rows De eigenschap definieert de hoogte van elke kolom.

1
2
3
4
5
6
7
8

De waarde is een lijst gescheiden door spaties, waarbij elke waarde de hoogte van het bijbehorende rij definieert:

Voorbeeld

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

Probeer het zelf

justify-content-eigenschap

justify-content De eigenschap wordt gebruikt om het hele raster in het container te centreren.

1
2
3
4
5
6
7
8

Opmerking:De totale breedte van het raster moet kleiner zijn dan de breedte van het container, zodat de eigenschap justify-content effectief is.

Voorbeeld

.grid-container {
  display: grid;
  justify-content: gelijke-tussenruimte;
}

Probeer het zelf

Voorbeeld

.grid-container {
  display: grid;
  justify-content: tussenruimte-gelijk;
}

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

align-content-eigenschap

align-content De eigenschap wordt gebruikt om het hele raster in de container verticaal uit te lijnen.

1
2
3
4
5
6
7
8

Opmerking:De totale hoogte van het raster moet kleiner zijn dan de hoogte van de container, zodat de align-content-eigenschap kan werken.

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf

Voorbeeld

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

Probeer het zelf