CSS režģa ģenerators

Kas ir CSS režģis?

CSS režģa izkārtojums ir divdimensiju izkārtojuma sistēma, kas ļauj vienlaicīgi anordēt saturu rindās un kolonnās. Jūs to iespējojat, izmantojot display: grid konteineri, pēc tam definējiet kolonas izmērus ar grid-template-columns un rindu izmērus ar grid-template-rows. fr vienību (daļa) proporcionāli sadala pieejamo vietu — piemēram, 1fr 2fr 1fr izveido trīs kolonas, kur vidūs ir divas reizes plašāka. Bērnu vienumi var aptvert varias šūnas, izmantojot grid-column: span 2 vai grid-row: span 3, iespējojot sarežģītus asimetriskus izkārtojumus. Atšķirībā no Flexbox (kas ir viendimensionāls), CSS režģis ir paredzēts divdimensionaliem lapas līmeņa izkārtojumiem, piemēram, žurnālu režģiem, paneliem un daudzvērtības rakstu izkārtojumiem.

Kā izmantot CSS režģa ģeneratoru

• Iestatiet kolonas un rindu skaitu, izmantojot skaitļa ievadi (1–12 katra).

• Pielāgojiet grid-template-columns, lai kontrolētu kolonas platumu (piem., 1fr 2fr, 200px auto, repeat(3,1fr)).

• Līdzīgi pielāgojiet grid-template-rows vai atstājiet auto satura izmēra rindām.

• Iestatiet atstarpes vērtību, lai kontrolētu atstarpi starp šūnām (pieņem jebkuru CSS garuma vienību).

• Noklikšķiniet uz jebkuras šūnas priekšskatījumā, lai to atlasītu — atlasītās šūnas ir uzsvērtas.

• Iestatiet col-span un row-span, pēc tam noklikšķiniet uz Pielietot. Izstieptās šūnas ir parādītas zaļā krāsā.

• Pārslēdzieties starp CSS un HTML izvades tabulatorem un noklikšķiniet uz Kopēt, lai iegūtu ģenerēto kodu.