Gineadóir CSS Grid

Socraigh do cholúin agus do rónta, tarraing trasna na gcealla chun míreanna a chur, agus cóipeáil an CSS greille le HTML meaitseála le cliceáil amháin.

Réamhsocruithe
Míreanna
CSS
HTML
Tarraing trasna na greille chun mír a chur.

Déantar do ghreille a thógáil go díreach i do bhrabhsálaí. Ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo.

Ceisteanna Coitianta

Conas a chuirim míreanna ar an ngreille?

Brúigh agus tarraing trasna na gcealla chun dronuilleog a mharcáil — nuair a ligeann tú uait é, déantar mír thábhachtach de a shíneann thar na colúin agus na rónta sin. Faigheann gach mír a tharraingíonn tú a riail grid-column agus grid-row féin sa CSS agus div meaitseála sa HTML. Is féidir le míreanna forluí a dhéanamh, agus suíonn an ceann a tharraingítear níos déanaí ar an mbarr; úsáid an × ar mhír chun í a bhaint.

An féidir leis na colúin agus na rónta a bheith de mhéideanna difriúla?

Is féidir. Tá a bhosca méide féin ag gach rian, agus is féidir leat luach greille ar bith a chlóscríobh ansin — 1fr, 200px, auto, min-content nó minmax(120px, 1fr). Déantar rianta a roinneann an méid céanna a fhilleadh isteach i repeat() ionas go bhfanann an t-aschur gearr. Socraítear bearna colúin agus bearna ró ar a gconlán féin, agus titeann siad go dtí bearna amháin nuair a mheaitseálann siad.

Cad a dhéanaim leis an gcód ginte?

Cóipeáil an CSS agus an HTML taobh le taobh. Tugann an HTML an coimeádán duit le div amháin in aghaidh na míre, agus sainmhíníonn an CSS an ghreille agus suíonn sé gach mír. Greamaigh an dá cheann isteach i do thionscadal agus faigheann tú an leagan amháin a tharraing tú anseo.

Gineadóir CSS Cubic BezierTarraing an dá láimhseáil chun cuar maolaithe a mhúnlú, féach ar phonc ag gluaiseacht air i gcomparáid le ceann seasta, agus cóipeáil an luach cubic-bezier().Gineadóir FlexboxSocraigh coimeádán flex agus a mhíreanna le rialtáin radhairc, féach ar an leagan amach ag freagairt beo, agus cóipeáil an CSS le cliceáil amháin.Gineadóir Box ShadowTarraing sleamhnáin chun box-shadow a mhúnlú, cruachaigh cisealacha le haghaidh doimhneachta, agus cóipeáil an CSS críochnaithe láithreach.Gineadóir GrádáinTóg grádán líneach, gathach, nó cónach, cuir stadanna datha leis agus socraigh an treo, ansin cóipeáil an CSS le cliceáil amháin.Gineadóir Border RadiusCruinnigh gach cúinne le sleamhnáin, cruthaigh cruthanna orgánacha leis an modh elipseach, agus cóipeáil an CSS láithreach.Áireamhán CSS clamp()Iontráil méid le haghaidh scáileáin bheaga agus mhóra agus faigh luach sreabhach clamp() a scálaíonn go réidh eatarthu — le haghaidh clómhéideanna, padding, corrlaigh nó bearnaí.