Jarenlang was mijn instinct toen een ontwerp een echte tweedimensionale lay-out vereiste, het reiken naar een stapel geneste flexcontainers. Een rij kaarten in een kolom in een andere rij, elk buigend, elk vecht tegen de anderen om ruimte. Het werkte, in de zin dat de pixels uiteindelijk landden waar ik wilde, maar het was nooit het juiste hulpmiddel, en elke keer dat ik het ontwerp moest veranderen, betaalde ik voor de snelkoppeling. CSS Grid werd precies hiervoor gebouwd, en de dag dat ik het vermeed, werd mijn lay-outcode korter en werd mijn opslag vlakker.
Wat mij te lang van het raster afhield, was de syntaxis. grid-template-columns: repeat(3, minmax(0, 1fr)) is geen zin die van de vingers rolt, en de relatie tussen de sporen die u declareert en de vakken die verschijnen is pas duidelijk als u het een paar dozijn keer hebt zien gebeuren Die kloof tussen & quot; Ik weet wat ik wil" en & quot; Ik ken de eigenschap die het produceert" is precies wat een generator sluit.
de CSS Grid Generator hiermee kunt u het aantal kolommen en rijen instellen, een grootte voor elke as kiezen, de gaten inbellen en de uitlijning aanpassen, terwijl een live preview opnieuw voor u wordt weergegeven De exacte CSS die produceert wat u ziet, bevindt zich in een kopieerklaar vak eronder Het verandert het raster van een specificatie die u moet onthouden in een lay-out die u opbouwt door te klikken.
tl;dr: CSS Grid is een tweedimensionaal lay-outmodel dat rijen en kolommen tegelijkertijd aanstuurt De container drijft hem erdoorheen
grid-template-columns,grid-template-rows,gap, en de vier rechtvaardigen en lijnen eigenschappen uit Deze generator legt ze allemaal bloot, toont een live preview en zendt schone CSS uit die gebruikt wordtrepeat()en defreenheid. Omdat de preview wordt weergegeven met dezelfde declaraties die het uitvoert, is wat u ziet precies wat u plakt. Het draait volledig in uw browser zonder aanmelding.
Welk probleem lost een CSS-netgenerator op?
De moeilijkheid met CSS Grid is niet dat het ingewikkeld is Het is dat het abstract is U beschrijft een structuur (" drie gelijke kolommen met een beetje ruimte tussen hen") en de browser berekent de geometrie Die indirection is het hele punt, want het is wat rasters responsief maakt zonder een enkele mediaquery Maar indirection is moeilijk in je hoofd te houden Je kunt niet kijken repeat(3, 1fr) en voel het resultaat meteen zoals je naar een weergegeven raster van dozen kunt kijken.
Een generator laat de write-save-refresh loop samenvallen tot een enkele interactie Je verandert het kolomaantal en drie vakken worden vier Je schakelt een track van 1fr tegen auto en de kolom knapt naar de breedte van zijn inhoud Je verhoogt de opening en de dozen ademen Na tien minuten hiervan is de breukeenheid niet langer een symbool dat je vertaalt en wordt het iets waar je expres naar reikt En als je klaar bent met verkennen, houd je geen notitie over om te transcriberen, omdat de werkende CSS al voor je is geschreven in de uitvoerbox.
Er is een tweede, stiller voordeel Het bouwen van de lay-out door manipulatie dwingt de tool om alleen geldige, goed gevormde CSS uit te zenden Je kunt geen gebroken produceren grid-template-columns waarde door te klikken, dus de uitvoer is altijd iets dat je met vertrouwen kunt plakken Die betrouwbaarheid is de reden dat ik een set visuele CSS-builders dichtbij houd in plaats van elke regel helemaal opnieuw te schrijven.
Welke eigenschappen regelt de netcontainer?
CSS Grid verdeelt, net als flexbox, de verantwoordelijkheid tussen de container en zijn items De container definieert de sporen en de algehele structuur, en dat is waar de meeste lay-outbeslissingen wonen, dus het is waar de generator zich richt. Hier is wat elke containereigenschap doet.
| Property | Wat het controleert | Gemeenschappelijke waarden |
|---|---|---|
grid-template-columns |
Het aantal en de grootte van kolommen | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
Het aantal en de grootte van rijen | repeat(2, auto), 100px, 1fr |
gap |
Ruimte tussen sporen | elke lengte, bijvoorbeeld 16px of 20px 10px |
justify-items |
Itempositie langs de rij-as | stretch, start, center, end |
align-items |
Artikelpositie langs de kolomas | stretch, start, center, end |
justify-content |
Volg de positie wanneer het rooster smaller is dan de container, op de rijas | start, center, space-between |
align-content |
Volg positie op de kolomas | start, center, space-between |
Het mentale model dat deze stok maakt, is het onderscheid tussen de sporen en de items. grid-template-columns en grid-template-rows definieer de sporen, dit zijn de lege rijstroken van het raster. Het gat zit tussen die rijstroken. De justify-items en align-items eigenschappen positioneren vervolgens elk item in de cel die het inneemt justify-content en align-content plaats de hele set sporen in de container als er een logeerkamer is De generator houdt deze twee niveaus visueel gescheiden, zodat u het verschil kunt voelen tussen het verplaatsen van een item binnen zijn cel en het verplaatsen van het hele raster binnen de pagina.
Wat betekent de fr-eenheid?
de fr unit is het stukje CSS Grid dat het hele model betaalt, en het is de moeite waard om te begrijpen in plaats van te kopiëren. Een fr vertegenwoordigt één fractie van de vrije ruimte in de roostercontainer nadat eventuele vaste maten en gaten zijn afgetrokken Als u schrijft grid-template-columns: 1fr 1fr 1fr, de container's beschikbare breedte is verdeeld in drie gelijke delen Schrijven 2fr 1fr 1fr en de eerste kolom neemt de helft van de ruimte in beslag terwijl de andere twee de rest splitsen De browser herberekent die breuken op elke resize, daarom is een op breuken gebaseerd raster vloeibaar zonder breekpunten.
Dit is het gedrag dat ervoor zorgt dat het raster voor de meeste lay-outs superieur is aan de percentages. Een set van 33.33% kolommen negeren de opening en overflows, omdat de percentages plus de gaten samen meer bedragen dan de container. Fractie-eenheden worden berekend nadat de gaten zijn verwijderd, dus repeat(3, 1fr) met een gat past altijd De generator standaard naar 1fr kolommen om precies deze reden, en u kunt kijken naar drie gelijke kolommen houden hun verhoudingen als u de opening te wijzigen Als u wilt een kolom die de inhoud in plaats daarvan omhelst, schakel het naar auto, min-content, of max-content en zie het verschil meteen.
Hoe maak ik een indeling met drie kolommen?
Dit is een van de meest voorkomende dingen die mensen bouwen met grid, en het recept is twee lijnen Stel de container op display: grid en geef het grid-template-columns: repeat(3, 1fr). Dat levert drie gelijke kolommen op die in zoveel rijen lopen als de inhoud nodig heeft Voeg een gap en je hebt een kaartindeling.
In de generator stelt u het aantal kolommen in op drie, laat de grootte aan staan 1fr, en de preview legt een raster van gelijke cellen uit De output box toont
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
De reden dat dit de moeite waard is om te bouwen door te klikken in plaats van te typen, is dat echte lay-outs nooit helemaal zo schoon zijn. Je zult willen dat de zijbalk een vaste breedte heeft en de inhoud buigt, of dat de eerste rij groter is dan de rest. Elk van die wijzigingen is één besturing in de generator en één bewerkte waarde in de uitvoer, en je ziet het effect voordat je deze aan een stylesheet vastlegt. Als je nog steeds beslist tussen raster en een op flex gebaseerde aanpak voor een bepaald blok, de flexbox generator is het bijbehorende hulpmiddel, en de vergelijking verderop in deze gids legt uit wanneer iedereen wint.
Wanneer moet ik grid over flexbox gebruiken?
Dit is de vraag die het belangrijkst is als je beide modellen kent, en het eerlijke antwoord is dat het afhangt van het aantal dimensies dat de lay-out heeft Flexbox is eendimensionaal Het rangschikt items langs een enkele as, een rij of een kolom, en wikkelt ze als je erom vraagt Grid is tweedimensionaal Het bestuurt rijen en kolommen samen, zodat een item zowel door zijn rij als zijn kolom tegelijk kan worden gepositioneerd.
De praktische regel die ik gebruik is deze Als ik een set dingen in een regel leg, een navigatiebalk, een rij tags, een werkbalk, een stapel formuliervelden, dat is flexbox Als ik een structuur aan het uitzetten ben met zowel rijen als kolommen die op elkaar moeten worden uitgelijnd, een pagina-shell met een header, zijbalk, en inhoudsgebied, of een galerij waar elke kaart op een schone rasterlijn zit, dat is raster, zijn de twee geen rivalen; een rastercel bevat vaak een flexcontainer, en een flex-item is vaak een klein raster Hier is de splitsing als een tabel.
| Question | Flexbox | CSS-raster |
|---|---|---|
| afmeting | Eén as tegelijk | Rijen en kolommen samen |
| het beste voor | Werkbalken, nav, rijen items, wikkeltags | Pagina-indelingen, galerijen, dashboards, formulieren |
| Maatvoering gedreven door | Inhoud, dan distributie | De track sjabloon die u declareert |
| Uitlijning | justify-content, align-items |
Zelfde plus justify-items, align-content |
| Typisch gebruik | Binnenin een rastercel | De algemene pagina of sectie frame |
De generator maakt dit concreet omdat je in beide richtingen hetzelfde visuele resultaat kunt bouwen en kunt zien wat de schonere regel oplevert Voor een galerij van gelijke kaarten, raster met repeat() is twee lijnen en flex is een wikkelcontainer met breedtes op elk kind Voor een enkele rij die zijn items naar de randen moet spreiden, flex met space-between is het kortere pad.
Wat is het verschil tussen kloof, rechtvaardigingsinhoud en align-inhoud?
Deze drie raken vaak in de war omdat ze allemaal met ruimte te maken hebben, maar ze opereren op verschillende niveaus De gap eigenschap stelt de vaste afstand tussen sporen in, en het is degene die je in bijna elk raster zult gebruiken Een enkele waarde spacet rijen en kolommen gelijk; twee waarden stellen de rijafstand en kolomafstand afzonderlijk in, in de rijvolgorde dan kolom Met de generator kunt u de twee gaten onafhankelijk instellen en geeft de steno alleen uit als ze verschillen, zodat de uitvoer zo kort blijft als de situatie toelaat.
justify-content en align-content, daarentegen, alleen iets doen wanneer de grid' s sporen kleiner zijn dan de container, waardoor er ruimte overblijft om te verdelen Als uw kolommen allemaal vaste pixelbreedtes zijn en ze de container niet vullen, moet justify-content: center zal het hele spoorblok centreren, en space-between zal ze naar de randen duwen Met fr kolommen die de breedte al vullen, deze eigenschappen hebben niets te verdelen en lijken niets te doen, wat een veel voorkomende bron van verwarring is De generator laat ze weg uit de uitvoer wanneer ze op de standaard worden achtergelaten start, dus elke regel in de gekopieerde regel is er een die een zichtbaar effect heeft Die gewoonte om alleen zinvolle verklaringen uit te zenden is dezelfde die ik vertrouw in de gradiëntgenerator en de doosschaduwgenerator, omdat een regel vol no-op-lijnen een regel is die je in één oogopslag niet kunt vertrouwen.
Hoe houdt de generator de preview eerlijk?
De valstrik met elke visuele builder is dat de preview en de geëxporteerde code uit elkaar kunnen drijven Een tool die zijn preview op de ene manier weergeeft en zijn code op een andere manier genereert, is erger dan nutteloos, omdat het je een lay-out leert die niet zal reproduceren Deze generator vermijdt dat door zowel de preview als de gekopieerde CSS uit één enkele lijst met declaraties te bouwen Dezelfde functie die beslist welke eigenschappen moeten worden uitgezonden, is degene die de previewboxen styleert, dus wat je ziet is precies wat je plakt Er is geen apart renderingpad dat het oneens kan zijn.
Die ontwerpkeuze is de reden waarom de output gebruikt repeat() voor elke as met meer dan één spoor Een enkel spoor wordt als kale maat uitgestoten, maar twee of meer klappen in repeat(n, size), wat zowel is wat een mens zou schrijven als wat de regel leesbaar houdt naarmate de telling groeit. Het is een kleinigheid, maar het is het verschil tussen uitvoer die je zou verzenden en uitvoer die je zou herschrijven.
Het bouwen van een responsief kaartraster, stap voor stap
Hier is een workflow die ik vaak gebruik Begin met het kolomaantal op drie en de grootte op 1fr. U hebt nu drie gelijke, vloeiende kolommen Stel de rijgrootte in op auto dus elke rij groeit om op zijn hoogste kaart te passen Verhoog de opening naar iets comfortabels, rond twintig pixels voor kaarten Dat is een compleet, responsief kaartraster, en de uitvoer is vier lijnen.
Om het op zichzelf te laten wikkelen zonder mediaquery's, is de volgende stap in een echt project ruilen repeat(3, 1fr) om repeat(auto-fill, minmax(240px, 1fr)), die de browser vertelt om zoveel mogelijk kolommen van 240 pixels minimaal te plaatsen en deze uit te rekken om te vullen De generator geeft je het startpunt met een vast aantal; die ene bewerking maakt er een zelfwikkelend raster van Het beginpunt begrijpen is wat de bewerking voor de hand houdt, en dat is het hele argument om de lay-out te leren door deze te bouwen in plaats van te plakken. Het bredere argument voor het samenstellen van een set tools die op deze manier werken, zit in het stuk op de Webontwikkelaar Toolkit, en de workflowgewoonten erachter zitten in de Productiviteitstools voor ontwikkelaar guide.
Welke browsers ondersteunen CSS Grid?
CSS Grid wordt ondersteund in elke huidige browser en is dat al jaren De eigenschappen die deze generator uitzendt zijn standaard en niet vooraf vastgelegd, dus de uitvoer werkt in Chrome, Firefox, Safari en Edge zonder leveranciersvoorvoegsels of fallbacks voor elke browser die een project vandaag realistisch target gap eigenschap in grid containers, dat was het laatste stuk om breed te landen, wordt ook universeel ondersteund nu Dat betekent dat de CSS die u kopieert is productie-klaar zoals geschreven, wat niet altijd waar was in de eerste jaren van grid en is een van de redenen dat het model is eindelijk de standaard keuze in plaats van een progressieve verbetering Voor de onderliggende regels, de CSS Grid Layout Module Level 1 specificatie van de W3C is de primaire bron, en het is de moeite waard om te lezen zodra de generator heeft gegeven u de intuïtie om het te volgen.
Als je daarnaast een bredere visuele toolkit bouwt, zal de grensstraalgenerator en CSS klem generator rond de set af, en de Handleiding voor coderingshulpmiddelen verzamelt degene die ik voor de meesten bereik.
Veelgestelde vragen
Wat is een CSS-netgenerator?
Een CSS-rastergenerator is een visueel hulpmiddel dat CSS-rasterlay-outcode bouwt op basis van de instellingen die u kiest. U kiest kolommen, rijen, trackformaten, gaten en uitlijning, en voert het rastersjabloon CSS uit samen met een live preview van het resultaat.
Wat betekent de fr-eenheid in CSS Grid?
De fr-eenheid vertegenwoordigt een fractie van de vrije ruimte in de roostercontainer raster-sjabloon-kolommen: repeat (3, 1fr) creëert drie kolommen die elk een gelijk aandeel van de beschikbare breedte nemen en opnieuw stromen als de container van formaat verandert.
Wat is het verschil tussen CSS Grid en flexbox?
CSS Grid is een tweedimensionaal model dat rijen en kolommen samen bestuurt, ideaal voor pagina-indelingen en kaartrasters Flexbox is eendimensionaal, waarbij items langs een enkele as worden gelegd, ideaal voor werkbalken en rijen Ze zijn complementair en worden vaak samen gebruikt.
Hoe maak ik een responsive grid?
Gebruik fr-units zodat tracks de beschikbare breedte delen, en combineer repeat () met minmax () en automatisch vullen of automatisch passen voor rasters die op zichzelf wikkelen Deze generator zendt repeat () uit met fr-tracks als uitgangspunt die je kunt verlengen.
Wat is de gap-eigenschap in CSS Grid?
gap stelt de afstand tussen rastersporen in Een enkele waarde spackt zowel rijen als kolommen gelijk; twee waarden stellen de rijafstand en de kolomafstand afzonderlijk in, in de volgorde rijafstand en vervolgens kolomafstand.
Is het gegenereerde netwerk CSS veilig om te gebruiken in de productie?
Ja. CSS Grid wordt ondersteund in elke moderne browser en de tool zendt standaard, niet-voorgewerkte eigenschappen uit Alle verwerking gebeurt in uw browser, dus niets wordt geüpload en de tool werkt offline zodra deze is geladen.
Werkt de CSS Grid Generator op mobiel?
Ja. de tool is volledig responsief en werkt in elke moderne browser op telefoons, tablets en desktops. De gegenereerde CSS is identiek, ongeacht het apparaat waarop u het bouwt.
Is deze CSS Grid Generator gratis?
Ja. Het is volledig gratis zonder aanmelding, zonder watermerken en zonder gebruikslimieten. Het raster CSS dat het produceert, is van jou om in elk project te gebruiken.
