CSS Grid ģenerātors

Vizuāli konfigurējiet kolonnas, rindas un atstarpes. Velciet šūnas priekšskatījumā, lai izveidotu aptverošus grid elementus, un kopējiet CSS.

Columns

Rows

Col Gap

16px

Row Gap

16px

Column Widths

C1:

C2:

C3:

Row Heights

R1:

R2:

R3:

Preview (drag cells to create spans)

Click a span to remove it.

Generated CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 16px;
}

Padomi un ieteikumi

Izmantojiet fr vienības elastīgām kolonnām — 1fr 2fr dod 1:2 attiecību.
Velciet šūnas priekšskatījumā, lai izveidotu elementus, kas aptver vairākas kolonnas vai rindas.
Noklikšķiniet uz krāsaina sektora elementa priekšskatījumā, lai to noņemtu.
auto kolonnas pielāgojas saturam — labi piemērotas sānjoslām.
Izmantojiet column-gap un row-gap atsevišķi horizontālajam un vertikālajam atstarpēm.

CSS apmales rādiusa ģenerātors

Vizuāli ģenerē border-radius CSS ar neatkarīgiem stūru vadīklām un tiešraides priekšskatījumu.

CSS teksta ēnas ģenerātors

Izveido slāņainus CSS teksta ēnu efektus ar tiešraides priekšskatījumu un viena klikšķa kopēšanu.

CSS filtra ģenerātors

Ģenerē CSS filtra efektus — izplūšanu, spilgtumu, kontrastu, krāsu rotāciju, piesātinājumu, sepiju un vairāk — ar attēlu priekšskatījumu.

CSS clip-path ģenerātors

Interaktīvi ģenerē CSS clip-path formas — poligonus, apļus un elipses — ar tiešraides priekšskatījumu. Velc vadīklas.

CSS animāciju ģenerātors

Vizuāli veido CSS @keyframe animācijas ar laika, atslābuma, aizkaves un atkārtošanās vadīklām.

CSS Flexbox ģenerātors

Vizuāls flexbox spēļu laukums — konfigurē flex-direction, flex-wrap, justify-content, align-items un elementu rekvizītus.

CSS lodziņa ēnas ģenerātors

Vizuāli veido CSS lodziņa ēnas ar slaidēm. Vairāki ēnu slāņi, izplūšana, izplatība, krāsa un necaurredzamība.

CSS gradienta ģenerātors

Vizuāli veido skaistus CSS lineāros un radiālos gradientus. Pielāgo krāsas, pieturas un leņķi — kopē gatavo CSS.

CSS gradienta teksta ģenerātors

Izveido gradienta teksta efektus tiešsaistē. Izvēlas 2–4 krāsas, virzienu un kopē gatavo CSS background-clip kodu.

CSS mainīgo ģenerātors

Izveido pilnu CSS pielāgoto rekvizītu :root bloku krāsām, atstarpēm, tipografijai un apmales rādiusam.