Bij het bouwen van een webapplicatie is een van de eerste dingen die nodig is een manier om de inhoud van uw app op te maken.
Veel ontwerpers gebruiken denkbeeldige rasters om inhoud op te maken, of het nu voor een site of app is. De CSS-groep heeft hard gewerkt om lay-outs eenvoudiger te maken en heeft als onderdeel daarvan de CSS Grid Layout Module geproduceerd, die nu in browsers verschijnt.
Deze functie is beschikbaar om uit te proberen in Chrome achter een experimentele vlag. Het is sinds versie 10 ook in IE geïmplementeerd en zal waarschijnlijk binnenkort in de meeste browsers beschikbaar zijn.
Managementsamenvatting
- Met CSS-rasterindeling kunt u rijen en kolommen voor uw lay-out definiëren
- Rasters kunnen zich aanpassen om gebruik te maken van de beschikbare ruimte
- De volgorde van de inhoud kan onafhankelijk zijn van de weergavevolgorde van de rastercontainers
- Lay-outs kunnen veranderen op basis van mediaquery's, waardoor responsief ontwerp eenvoudiger wordt
- Inhoud kan overlappen (waardoor een lay-out mogelijk wordt gemaakt die met andere methoden onmogelijk is)
- Rasterindeling is snel
Hier is een overzichtsvideo waarin veel wordt uitgelegd over hoe CSS-rasterindeling werkt ( de dia's vindt u hier :
Probeer het
Het gebruik van CSS-rasterindeling in Chrome is nu eenvoudig. Het eerste dat u hoeft te doen, is de experimentele vlag inschakelen om de functie in te schakelen.
Laad eerst de URL chrome://flags en scrol omlaag naar de optie om experimentele webplatformfuncties in te schakelen, zoals hieronder weergegeven:
Klik gewoon op Inschakelen om de vlag in te schakelen en u zou een prompt moeten zien om de browser opnieuw te starten, die er als volgt uitziet:
Klik nu op de knop Nu opnieuw starten om uw browser opnieuw te starten en u bent helemaal klaar om CSS Grid Layout uit te proberen.
Laat ons weten wat je denkt
CSS Grid Layout is een geweldige nieuwe primitief voor webinhoud, maar zoals gewoonlijk willen we allemaal graag horen wat ontwikkelaars ervan vinden. Er zijn veel manieren om feedback te geven - laat hier een reactie achter, stuur een e-mail naar de W3C CSS Working Group-lijst met "[css-grid]" in de onderwerpregel, log bugs of blog en tweet wat je ervan vindt. We kijken ernaar uit om de geweldige lay-outs te zien die je bouwt met deze superhandige nieuwe functie.
,Bij het bouwen van een webapplicatie is een van de eerste dingen die nodig is een manier om de inhoud van uw app op te maken.
Veel ontwerpers gebruiken denkbeeldige rasters om inhoud op te maken, of het nu voor een site of app is. De CSS-groep heeft hard gewerkt om lay-outs eenvoudiger te maken en heeft als onderdeel daarvan de CSS Grid Layout Module geproduceerd, die nu in browsers verschijnt.
Deze functie is beschikbaar om uit te proberen in Chrome achter een experimentele vlag. Het is sinds versie 10 ook in IE geïmplementeerd en zal waarschijnlijk binnenkort in de meeste browsers beschikbaar zijn.
Managementsamenvatting
- Met CSS-rasterindeling kunt u rijen en kolommen voor uw lay-out definiëren
- Rasters kunnen zich aanpassen om gebruik te maken van de beschikbare ruimte
- De volgorde van de inhoud kan onafhankelijk zijn van de weergavevolgorde van de rastercontainers
- Lay-outs kunnen veranderen op basis van mediaquery's, waardoor responsief ontwerp eenvoudiger wordt
- Inhoud kan overlappen (waardoor een lay-out mogelijk wordt gemaakt die met andere methoden onmogelijk is)
- Rasterindeling is snel
Hier is een overzichtsvideo waarin veel wordt uitgelegd over hoe CSS-rasterindeling werkt ( de dia's vindt u hier :
Probeer het
Het gebruik van CSS-rasterindeling in Chrome is nu eenvoudig. Het eerste dat u hoeft te doen, is de experimentele vlag inschakelen om de functie in te schakelen.
Laad eerst de URL chrome://flags en scrol omlaag naar de optie om experimentele webplatformfuncties in te schakelen, zoals hieronder weergegeven:
Klik gewoon op Inschakelen om de vlag in te schakelen en u zou een prompt moeten zien om de browser opnieuw te starten, die er als volgt uitziet:
Klik nu op de knop Nu opnieuw starten om uw browser opnieuw te starten en u bent helemaal klaar om CSS Grid Layout uit te proberen.
Laat ons weten wat je denkt
CSS Grid Layout is een geweldige nieuwe primitief voor webinhoud, maar zoals gewoonlijk willen we allemaal graag horen wat ontwikkelaars ervan vinden. Er zijn veel manieren om feedback te geven - laat hier een reactie achter, stuur een e-mail naar de W3C CSS Working Group-lijst met "[css-grid]" in de onderwerpregel, log bugs of blog en tweet wat je ervan vindt. We kijken ernaar uit om de geweldige lay-outs te zien die je bouwt met deze superhandige nieuwe functie.