Mediu de testare CSS Grid

Toate instrumentele pentru dezvoltatori Gratuit

Compune vizual șabloane CSS Grid, spații și poziționare, apoi copiază CSS-ul aspectului.

Previzualizare

Apasă pe un element numerotat din grilă pentru a-l selecta și repoziționa.

grid-template-columns -
grid-template-rows -
CSS generat
-
-
Coloane
Rânduri
Spații
16px
16px
Aliniere
Elemente din grilă
Element 1
Presetări

Despre Mediu de testare CSS Grid

CSS Grid Playground compune vizual layout-uri grid reale. Adaugă și elimină track-uri de coloane și rânduri pentru a defini grid-template-columns și grid-template-rows, setează spațiile dintre coloane și rânduri și ajustează toate cele patru proprietăți de aliniere (justify-items, align-items, justify-content și align-content) în timp ce previzualizarea reflectă instant fiecare modificare.

Plasarea elementelor este ceea ce face grid-urile puternice: adaugă elemente, dă click pe unul în previzualizare pentru a-l selecta și poziționează-l cu column start, column span, row start și row span. Așa se construiesc sidebar-uri, anteturi și celule de conținut care se întind pe mai multe track-uri: tehnica din spatele aproape oricărui layout grid real.

Trei presetări (holy grail, dashboard și gallery) încarcă structuri clasice de pagină pe care le poți disecă și adapta. Când layout-ul e cel dorit, copiază CSS-ul generat, care conține regulile complete ale containerului grid și plasarea fiecărui element.

Cum să utilizați Mediu de testare CSS Grid

  1. Adaugă sau elimină track-uri de coloane și rânduri pentru a defini template-ul grid-ului.
  2. Setează spațiul dintre coloane și cel dintre rânduri.
  3. Ajustează comenzile de aliniere: justify-items, align-items, justify-content și align-content.
  4. Adaugă elemente, dă click pe unul în previzualizare și setează-i start-ul și span-ul de coloană/rând pentru a-l poziționa.
  5. Încarcă presetarea holy grail, dashboard sau gallery pentru a studia un layout clasic.
  6. Copiază CSS-ul generat în foaia ta de stiluri.

Întrebări frecvente

justify-items aliniază fiecare element în interiorul propriei celule grid; justify-content aliniază întregul grid în interiorul containerului atunci când track-urile nu îl umplu complet. Aceeași distincție se aplică pe verticală cu align-items versus align-content.

Selectează elementul și mărește-i column span-ul: CSS-ul generat folosește grid-column cu o valoare span. Combinat cu un row span, poți construi bare de antet, sidebar-uri și celule mari de conținut în același grid.

Scheletul clasic de pagină: antet și subsol pe toată lățimea, cu trei coloane între ele: navigare, conținut principal și o zonă laterală (aside). Era notoriu de dificil cu float-uri; presetarea arată cum câteva plasări grid rezolvă totul curat.

Grid excelează la layout-uri bidimensionale unde rândurile și coloanele trebuie să se alinieze: schelete de pagină, dashboard-uri, galerii. Flexbox e cel mai bun pentru fluxuri unidimensionale precum bare de instrumente și meniuri. Se combină bine: grid pentru pagină, flex în interiorul componentelor.

Da, este gratuit și rulează în browser: experimentează cât vrei, iar nimic din ce construiești nu părăsește calculatorul tău.
Distribuiți
Instrumente conexe
Constructor de semnătură e-mail
Convertește o pictogramă în PNG
Generator de icoane pentru aplicații
Generator de favicon
Generator CSS Box Shadow
Generator CSS Border Radius
Generator de degradeuri CSS
Generator Glassmorphism
Generator Neumorphism
Mediu de testare Flexbox
Mediu de testare flex Bootstrap
Mediu de testare grilă Bootstrap
Editor de atenuare Cubic-Bézier
Generator de date fictive
Generator de coduri QR
Scanează un cod QR
Tablă albă online
Generator de coduri de bare
Creează grafice
Generator UUID / ULID
Căutări populare
generator css grid teren de joacă css grid generator grid-template-columns generator aspect css grid constructor grid-template-areas instrument css grid gap vizualizator css grid
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site: copiați și lipiți codul de mai jos.