Wat is rasterbezit?

De eigenschap grid is een verkorte eigenschap voor de grid-template-rijen, grid-template-kolommen, grid-template-gebieden, grid-auto-rijen, grid-auto-kolommen, grid-auto-flow, grid-kolom-gap en raster-rij-eigenschappen.

Roosterstructuur

Met de eigenschap Grid worden de elementen weergegeven als matrix ⊞

 
 
 
 
 
 
 
 

In css

#container {
 weergave: rooster;
 }

In wordt bijvoorbeeld #container weergegeven als een raster en worden de onderliggende elementen weergegeven als rastercellen of items

Browser compatibiliteit

Het is een enorme opwinding dat IE, Edge en Firefox CSS-rastereigenschappen ondersteunen supports. Meestal heeft de browser een prachtige grid view UI in ontwikkelaarstools.

Rasterlijnen

Rasterlijnen zijn horizontale en verticale lijnen, ze worden gebruikt voor positionering. Positioneringsindex kan een geheel getal zijn (zowel negatieve als positieve gehele getallen).

Eigenschappen → rooster-kolom-einde, rooster-kolom-einde, rooster-rij-einde, rooster-rij-einde.

Voorbeeldcode :

#grid> div: nth-child (2) {
 rooster-kolom-start: 2;
 rooster-kolom-einde: 3;
 grid-row-start: 2;
 rooster-rij-einde: 3;
}

Element 2 begint bij de tweede verticale lijn in 2 horizontale lijn en het element eindigt bij 3 verticale lijn en 3 verticale lijn.

Rasterlijn

Rastercel

Een rastercel is een ruimte tussen twee aangrenzende verticale rasterlijnen en de twee aangrenzende horizontale rasterlijnen.

Rastercel

Grid Tracks

Een rasterbaan is een ruimte tussen twee aangrenzende rasterlijnen. d.w.z. rij, kolommen.

Grid Track

Grid Area & Grid Gap

Een rastergebied is de groep van een of meer cellen.

Grid Gap is de ruimte tussen de rijen en de kolommen. Het is de verkorte eigenschap van de grid-row-gap en de grid-column-gap.

Rasterrij & rasterkolom

grid-row is steno-eigenschap voor grid-row-start en grid-row-end.

rooster-kolom is steno-eigenschap voor rooster-kolom-begin en rooster-kolom-einde

Raster rij

grid-row-start → geeft de startpositie van een rasteritem in de rij aan

bijv. rooster-rij-start: 2 → Element begint bij tweede verticale lijn

grid-row-end → geeft de eindpositie van een rasteritem in de rij aan

bijv. rooster-rij-einde: 3 → Element eindigt op de tweede verticale lijn

Grid-auto-flow

Het bepaalt hoe het algoritme voor automatische plaatsing werkt. Standaard is de waarde rij (items worden op rijbasis geplaatst)

roostervormige auto-stromen: rij;
roostervormige auto-stromen: kolom;
Raster automatische stroom kolom & raster automatische stroom rij

grid-auto-flow: rij dicht → Gebruikt "dicht" inpakalgoritme. Vul de vrije ruimte in het raster op rijbasis in.

grid-auto-flow: kolomdicht → Gebruikt "dicht" inpakalgoritme Vul de vrije ruimte in het rooster op kolombasis

Expliciet raster en impliciet raster

Expliciet raster zijn raster gemaakt door gebruiker met behulp van raster-sjabloon-rij, raster-sjabloon-kolommen

rooster-sjabloon-kolommen: herhalen (3, 100 px);
grid-template-rijen: 100 px 100 px;

Impliciet raster wordt gemaakt door de browser. De grootte van het impliciete raster kan worden gewijzigd met behulp van grid-auto-kolommen en grid-auto-rijen eigenschap.

rooster-sjabloon-kolommen: herhalen (3, 100 px);
grid-auto-rijen: 100 px;

Grid bestelling:

We kunnen het element ordenen op basis van het sjabloongebied.

we kunnen het sjabloongebied in de mediaquery wijzigen en een nieuwe rasterstructuur weergeven.

controleer de codepen voor meer.

Voor het net gebruiken we meestal allemaal het bootstrap-rastersysteem. Bootstrap kan een bepaalde klassenaam in elke versie veranderen (maar niet als hoekig ), dus we moeten onthouden welke versie welke klassenaam heeft .

Door gebruik te maken van CSS-rastereigenschap, KUNNEN WE (zelfs in IE ) de elementen gemakkelijk in rasterweergave weergeven.

Heel erg bedankt voor het lezen! Als je het leuk vond, steun dan door te klappen en het bericht te delen. Voel je vrij om hieronder een reactie leave achter te laten.