5 Snelle bronnen voor het beheren van CSS-rasterlay-out

In de snelle tip van vandaag laat ik je vijf bronnen zien voor het beheersen van CSS-rasterlay-out. Laten we erin duiken!

 

Een snelle inleiding tot het raster

Rasteropmaak is aantoonbaar een van de belangrijkste ontwikkelingen voor webontwikkelaars sinds de geboorte van CSS. Het is een opmaaksysteem dat specifiek is ontworpen voor gebruik met grid-gebaseerde gebruikersinterfaces, wat betekent dat de standaard "float" -benadering (iets van een hack, laten we eerlijk zijn) niet langer nodig is als een primaire manier om een ​​webpagina op te stellen.

Het eerste Working Draft werd gepubliceerd in 2011 en geloof het of niet, we hebben Microsoft veel dank voor zijn ontwikkeling; drie van de eerste vier auteurs maakten deel uit van het Microsoft-team. Die eerste versie is nu verouderd en is sindsdien vervangen door CSS Grid Layout Module Level 1.

5 Handige middelen

Browserondersteuning voor Grid is al veelbelovend, dus het wordt hoog tijd dat je bekend raakt met de syntaxis. Hier zijn enkele geweldige middelen om je af te zetten.

Mozilla: Inleiding tot CSS-rasterlay-out

Het eerste voorbeeld komt van Mozilla. De inleiding tot CSS-rasterlay-out heeft betrekking op de basisprincipes, maar ook op geavanceerde concepten zoals naamgevingsregels. Het is een grondige bron, maar ook mooi gepresenteerd met duidelijke navigatie, aantrekkelijke grafische afbeeldingen en pennen waarmee je kunt vorkelen en spelen.

learncssgrid.com

Een andere grondige bron is learncssgrid.com door Jonathan Suh. Het verklaart de theorie achter de syntaxis, maar toont ook voorbeelden van enkele van de meest voorkomende lay-outpatronen die u mogelijk nodig hebt.

CSS-trucs: een complete gids voor raster

Vervolgens gaan we naar CSS Tricks voor een geweldige hulpbron van Chris House (in de video die ik ten onrechte heb gecrediteerd aan Chris Coyier, excuses hiervoor). De "Complete Guide to Grid" is precies wat u zou verwachten; erg compleet. Het geeft details voor rastercontainer- en rasteritems in afzonderlijke kolommen. Geweldig werk, zoals gewoonlijk, van CSS Tricks.

Raster door voorbeeld

"Grid by Example" is ontwikkeld en wordt onderhouden door Rachel Andrew (zelf een lid van de werkgroep voor CSS Grid Layout) en bestaat al geruime tijd. Naast de "starthandleiding", die u alle essentiële informatie over de specificatie geeft, geeft deze u veel voorbeelden en "grijp- en doorzoek" -patronen voor de meest voorkomende lay-outs.

CSS-rastercursussen op Envato Tuts+

Als je liever per video leert, raad ik je ten zeerste aan (uiteraard!) Om deze cursussen van Craig Campbell te bekijken. De eerste (3 CSS Grid Projects for Web Designers) leidt je door drie CSS Grid-projecten, met voorbeelden over Codepen waarmee je kunt vorkten en oefenen op.

3 CSS-rasterprojecten voor webontwerpers

De meest recente cursus van Craig (CSS-rasterlay-out en Flexbox bij elkaar brengen) legt uit hoe je samen twee van CSS's meest krachtige lay-outmodules (Grid en Flexbox) kunt gebruiken.

CSS-rasterlay-out en Flexbox samenbrengen

Ga verder en leer!

Deze snelle verzameling biedt een goed begin voor het leren van CSS Grid. Alle bronnen hier bevatten praktische voorbeelden die u kunt gebruiken om de theorie te bestuderen en te versterken. Ik laat je achter met nog een paar tutorials, maar tot de volgende keer - gelukkig leren!