CSS Grid ģenerators

Iestatiet kolonnas un rindas, velciet pāri šūnām, lai izvietotu elementus, un ar vienu klikšķi nokopējiet režģa CSS kopā ar atbilstošo HTML.

Sagataves
Elementi
CSS
HTML
Velciet pāri režģim, lai izvietotu elementu.

Jūsu režģis tiek veidots tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.

BUJ

Kā izvietot elementus režģī?

Nospiediet un velciet pāri šūnām, lai iezīmētu taisnstūri — kad atlaidīsiet, tas kļūs par izvietotu bērna elementu, kas aptver šīs kolonnas un rindas. Katrs uzzīmētais elements iegūst savu grid-column un grid-row kārtulu CSS kodā un atbilstošu div elementu HTML kodā. Elementi var pārklāties, un vēlāk uzzīmētais atradīsies virspusē; izmantojiet × uz elementa, lai to noņemtu.

Vai kolonnām un rindām var būt dažādi izmēri?

Jā. Katrai joslai (track) ir sava izmēra ievades lodziņš, un tur varat ierakstīt jebkuru režģa vērtību — 1fr, 200px, auto, min-content vai minmax(120px, 1fr). Joslas, kurām ir vienāds izmērs, tiek apvienotas repeat() funkcijā, lai saglabātu īsu kodu. Kolonnu un rindu spraugas tiek iestatītas atsevišķi un apvienotas vienā gap kārtulā, ja tās sakrīt.

Ko man iesākt ar uzģenerēto kodu?

Nokopējiet CSS un HTML blakus. HTML nodrošina konteineru ar vienu div katram elementam, savukārt CSS definē režģi un pozicionē katru elementu. Ielīmējiet abus savā projektā, un jūs iegūsiet tieši tādu pašu izkārtojumu, kādu uzzīmējāt šeit.

CSS Cubic Bezier ģeneratorsVelciet abus rokturus, lai veidotu paātrinājuma līkni, vērojiet punkta kustību pret vienmērīgu kustību un nokopējiet cubic-bezier() vērtību.Flexbox ģeneratorsIestatiet flex konteineru un tā elementus ar vizuālām vadīklām, vērojiet izkārtojuma reakciju reāllaikā un nokopējiet CSS ar vienu klikšķi.Box Shadow ģeneratorsVelciet slīdņus, lai veidotu box-shadow ēnu, klājiet slāņus dziļumam un acumirklī nokopējiet gatavo CSS.Gradientu ģeneratorsIzveidojiet lineāru, radiālu vai konisku gradientu, pievienojiet krāsu punktus, iestatiet virzienu un nokopējiet CSS ar vienu klikšķi.Border Radius ģeneratorsNoapaļojiet katru stūri ar slīdņiem, veidojiet organiskas lāses formas ar eliptisko režīmu un acumirklī nokopējiet CSS.CSS clamp() kalkulatorsIevadiet izmēru maziem un lieliem ekrāniem un iegūstiet plūstošu clamp() vērtību, kas vienmērīgi mērogojas starp tiem — fontu izmēriem, iekšējām un ārējām malām vai spraugām.