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.

Scríofa agus athbhreithnithe ag foireann eagarthóireachta BroBroGo.Nuashonraithe is déanaí:

Úsáid an Ghineadóra CSS Grid

Is uirlis phraiticiúil é an Gineadóir CSS Grid a ligeann duit leagan amach greille CSS a dhearadh go radhairc. Tríd an uirlis seo, is féidir líon na gcolún agus na rónta a shonrú, a méideanna a shainiú, agus na bearnaí eatarthu a shocrú. Ligeann an comhéadan duit tarraingt trasna na greille chun míreanna a chur isteach sa leagan amach. Gintear an cód CSS agus HTML comhfhreagrach go huathoibríoch, rud is féidir a chóipeáil agus a ghreamú go díreach isteach i do thionscadal féin.

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.

Paraiméadair Ionchuir agus Teorainneacha

Chun an greille a chumrú, úsáidtear na luachanna agus na teorainneacha seo a leanas sa chomhéadan:

  • Colúin: Líon iomlán na gcolún, idir 1 agus 12.
  • Rónta: Líon iomlán na rónta, idir 1 agus 12.
  • Bearna colúin: An spásáil idir colúin, idir 0 agus 48px.
  • Bearna ró: An spásáil idir rónta, idir 0 agus 48px.
  • Méideanna colún: Luach bailí ar bith le haghaidh CSS grid, mar shampla 1fr, 200px, auto, min-content, nó minmax(120px, 1fr).
  • Méideanna ró: Luach bailí ar bith le haghaidh CSS grid, mar shampla 1fr, 200px, auto, min-content, nó minmax(120px, 1fr).
  • Socrú Míreanna (Item placement): Míreanna a chur isteach trí tharraingt thar chealla chun limistéar dronuilleogach a mharcáil.

Tacaíonn an uirlis le uasmhéid de 16 mhír ar an ngreille ag an am céanna. Má chuirtear luach neamhbhailí isteach le haghaidh méid riain (mar shampla not-a-grid-track), marcáiltear an réimse ionchuir mar neamhbhailí, ach coimeádann an t-aschur CSS an luach bailí deireanach a cuireadh isteach.

Rialacha Giniúna Cóid agus Iompraíocht an Chomhéadain

Nuair a scaoiltear an luch tar éis tarraingt thar chealla, cruthaítear mír linbh a shíneann thar na colúin agus na rónta roghnaithe. Faigheann gach mír a tharraingítear 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 ar a chéile; sa chás seo, suíonn an mhír a tharraingítear níos déanaí ar bharr na míreanna eile. Is féidir mír a bhaint ach cliceáil ar an "×" atá uirthi.

Tá a bhosca méide féin ag gach rian (colún nó ró). Chun an cód ginte a choinneáil chomh gonta agus is féidir, déantar rianta a roinneann an méid céanna a fhilleadh isteach sa bhfeidhm repeat() san aschur CSS. Socraítear an bearna colúin agus an bearna ró go neamhspleách ar a chéile, ach titeann siad go dtí airí singil gap sa CSS nuair is ionann an dá luach.

Má chliceáiltear ar "Glan míreanna", folmhaítear an coimeádán HTML agus taispeántar go bhfuil 0 mír ann. Má úsáidtear "Cuir mír leis", gintear mír HTML nua sa choimeádán.

Réamhsocruithe Leagan Amach

Soláthraíonn an uirlis roinnt réamhsocruithe chun struchtúir choitianta a chruthú go tapa:

Réamhshocrú Cur Síos ar an Struchtúr
Barra taoibh Leagan amach le colún caol taobh le príomhréimse ábhair.
Ceanntásc & buntásc Struchtúr clasaiceach le rannáin ag an mbarr agus ag an mbun.
Gailearaí Gintear 3 cholún, 2 ró, agus 3 mhír go huathoibríoch.
Painéal Rialaithe Leagan amach casta atá oiriúnach d'fheidhmchláir sonraí.

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í.