Inleiding tot de CSS-rasterlay-outmodule

Het was ooit tafels, dan marges en drijvers, dan flexbox en nu rooster: CSS heeft altijd de weg gewezen naar nieuwe en betere manieren om de eeuwenoude taak te verlichten weblay-outs coderen. De CSS-rasterlay-outmodel kan de lay-out maken en bijwerken langs twee assen: horizontaal en verticaal, die zowel de breedte als de hoogte beïnvloedt van elementen.

De lay-out van het raster hangt niet af van de positie van de elementen in de opmaak, dus u kunt het schud de plaatsingen van elementen in markup zonder de lay-out te veranderen. In het rastermodel is een rastercontainerelement verdeeld in rasterkolommen en rijen (gezamenlijk bekend als rastersporen) door rasterlijnen. Laten we nu kijken hoe maak een voorbeeldraster.

Browserondersteuning

Vanaf het schrijven van dit artikel wordt de CSS Grid Module alleen ondersteund door de nieuwste IE-browser en Edge. Het CSS-raster is in experimentele fase in de andere grote browsers waarin je moet schakel de ondersteuning handmatig in:

• Firefox: Druk op Shift + F2, voer de volgende opdracht in in de GCLI-invoerbalk die onder aan de browser werd weergegeven: pref set layout.css.grid.enabled true.
• Chrome: Blader door de chrome: // flags URL en inschakelen Experimentele webplatform-functies.

Alle belangrijke browserondersteuning is waarschijnlijk kom langs begin / medio 2017.

Een voorbeeldraster

Naar verander een element in een rastercontainer je kunt gebruiken een van deze drie tonen eigenschappen:

1. weergave: raster; - het element is omgezet in een blokrastercontainer
2. weergave: inline-grid; - het element is omgezet in een inline rastercontainer
3. weergave: subgrid; - als het element een roosteritem is, is het dat wel omgezet in een subgrid die de eigenschappen van de rastersjabloon en rasterafstand negeert

Net zoals een tabel uit meerdere tabelcellen bestaat, is een raster dat ook bestaande uit meerdere rastercellen. Een rasteritem is toegewezen aan een set rastercellen dat is collectief bekend als de rastergebied.

We gaan creëren een raster met vijf secties (rastergebieden): boven, onder, links, rechts en midden. De HTML bestaat uit vijf divs in een container div.

 
 
Top
 
Links
 
centrum
 
Rechts
 
Bodem
 
 

In de CSS, de roostervormige template-gebieden eigendom definieert een raster met verschillende rastergebieden. In zijn waarde, een tekenreeks staat voor een rasterrij en elke geldige naam binnen een tekenreeks staat voor een kolom. Naar maak een lege rastercel je moet de gebruiken punt (.) karakter binnen een rij string.

De rasternamen moet worden gerefereerd door de roostervormige area eigenschap van de afzonderlijke rasteritems.

 .grid-container breedte: 500px; hoogte: 500 px; weergave: raster; grid-template-gebieden: "top top top" "links midden rechts" "bottom bottom bottom"; . grid-top grid-area: top;  .grid-bottom grid-area: bottom; . grid-left grid-area: left;  .grid-right grid-area: right; . grid-center grid-area: center;  

Dus deze code maakt een raster met drie rijen en kolommen. De top item neemt een gebied in beslag dat overspant drie kolommen in de eerste rij en de bodem item loopt over drie kolommen in de laatste rij. Elk van de links, centrum en rechts items neemt één kolom in de middelste rij.

Nu moeten we dat doen wijs dimensies toe naar deze rijen en kolommen. De roostervormige template-columns en roostervormige template-rijen eigenschappen definieer de grootte van de rasterspoor (rij of kolom).

 .grid-container breedte: 500px; hoogte: 500 px; weergave: raster; grid-template-gebieden: "top top top" "links midden rechts" "bottom bottom bottom"; grid-template-kolommen: 100px auto 100px; grid-template-rijen: 50px auto 150px;  

Dit is hoe ons CSS-raster er nu uitziet (met enkele extra stijlen):

Ruimte tussen rasteritems

Je kan toevoegen lege ruimte tussen kolommen en rijen gebruik makend van roostervormige kolom gap en roostervormige rij-gap, of hun eigendom uit de lange termijn roostervormige gap.

 .grid-container breedte: 500px; hoogte: 500 px; weergave: raster; grid-template-gebieden: "top top top" "links midden rechts" "bottom bottom bottom"; grid-template-kolommen: 100px auto 100px; grid-template-rijen: 50px auto 150px; rooster-opening: 5px 5px;  

Hieronder kunt u zien dat de roostervormige gap eigenschap heeft inderdaad lacunes toegevoegd tussen de rasteritems.

Lijn rasterinhoud en items uit

De rechtvaardigen-inhoud eigendom van de netcontainer (.roostervormige houder) lijnt de inhoud van het raster uit langs de inline-as (horizontale as) en het eigendom uitlijnen-inhoud, lijnt de inhoud van een rooster uit langs de blokas (verticale as). Beide eigenschappen kan een van deze waarden hebben: begin, einde, centrum, ruimte tussen, ruimte-around en space-gelijkmatig.

Waar van toepassing, de track (rij of kolom) krimpt om bij de inhoud te passen wanneer uitgelijnd. Bekijk de schermafbeeldingen van rastergegevens uitgelijnd met verschillende waarden beneden.

justify-content: start;

justify-content: einde;

justify-content: center;

rechtvaardigen-inhoud: ruimte-tussen;

justify-content: space-around;

justify-content: space-equally;

align-content: start;

align-content: einde;

align-content: center;

align-content: ruimte-tussen;

align-content: space-around;

align-content: ruimtegelijk;

Beide rechtvaardigen-inhoud en uitlijnen-inhoud eigenschappen lijn de volledige inhoud uit in een raster.

Naar lijn afzonderlijke items uit in hun rastergebieden, gebruik de ander paar uitlijningseigenschappen: rechtvaardigen-items en uitlijnen-items. Beide kunnen een van deze waarde hebben: begin, einde, centrum, basislijn (lijn items uit langs de basisrasterlijn van het gebied) en uitrekken (items vullen hun hele gebied).