Miaka michache iliyopita, nilikaa chini kutengeneza dashboard. Sio kitu cha ajabu—tu sidebar iliyofungwa, eneo kuu la maudhui, na footer.

Miaka michache iliyopita, nilikaa chini ili kutengeneza dashboard. Hakuna kitu cha ajabu—sidebar iliyofungwa, eneo kuu la maudhui, na footer. Flexbox ilionekana kama chaguo la wazi, na mwanzoni, ilifanya kazi vizuri. Kisha nikaweka safu ya kadi kwenye sehemu kuu. Mpangilio mzima ulivurugika. Nilitumia saa tatu zilizofuata kupambana na uwiano wa flex-grow na upana wa asilimia uliowekwa ndani ya vingine, nikitazama vyombo vikikataa kupangwa vizuri hata nikipunguza padding kiasi gani. Ukurasa ulionekana kama mnara unaokaribia kuanguka.

Uzoefu huo mgumu ulinifundisha jambo moja muhimu zaidi kuhusu mpangilio wa CSS wa kisasa: Flexbox na Grid si washindani. Ni zana kwa kazi tofauti, na mpangilio mwingi unaofeli hutokana na kuchukua zana isiyo sahihi.

Tofauti Iko Katika Vipimo

Ione Flexbox kama korido. Vitu hupita katika upande mmoja, iwe kama safu (row) au kama safu ya wima (column). Imeundwa kwa ajili ya usambazaji wa dimenisheni moja. Kivinjari (browser) huangalia maudhui, kisha huamua jinsi ya kuyavutia, kuyapunguza, au kuyapanga kando ya mhimili huo mmoja. Hii inafanya Flexbox kuwa bora kwa hali ambapo maudhui huamua mpangilio. Upau wa uongozaji (navigation bar), mfululizo wa sehemu za fomu, au seti ya lebo (tags) zinazohitaji nafasi sawa zote hukaa vizuri kwenye chombo cha flex kwa sababu zinashiriki mantiki ya mstari mmoja.

Grid, kwa upande mwingine, ni ramani ya sakafu. Ni ya dimenisheni mbili pekee, ikishughulikia safu (rows) na safu za wima (columns) kwa wakati mmoja. Unafafanua muundo kwanza, kisha unaweka vitu ndani yake. Hii inafanya Grid kuwa bora kwa usanifu wa jumla wa ukurasa—popote unapohitaji kudhibiti nafasi ya wima na ya mlalo kwa pamoja. Unapojaribu kulazimisha usanifu tata wa dimenisheni mbili kupitia vyombo vya Flexbox vilivyofungwa ndani ya vingine, unakuja na markup nyingi, wrappers zisizo imara, na hesabu ngumu zinazovurugika mara tu unapoongeza kipengele kimoja cha ziada.

Flexbox Bado Ina Thamani Yake

Usikimbilie kubadilisha kila chombo cha flex kuwa Grid. Ndani ya vipengele vya mtu mmoja mmoja, Flexbox mara nyingi ni safi zaidi na ya wazi zaidi. Ikiwa una footer ya kadi yenye vitufe viwili na unataka kimoja kikae upande wa kushoto na kingine upande wa kulia, justify-content: space-between hufanya kile unachomaanisha. Ikiwa unahitaji kuweka icon katikati ya kitufe chenye urefu usiojulikana, align-items: center ndiyo njia rahisi zaidi. Maudhui yanayobadilika—kama vile safu ya lebo za watumiaji zenye urefu tofauti wa majina—hukaa vizuri ndani ya Flexbox kwa sababu inazingatia maudhui kwanza. Chombo hujirekebisha kulingana na kile kinachobebwa.

Grid inazingatia chombo kwanza. Unaiambia kivinjari ni mistari (tracks) mingapi iliyopo na inapaswa kuwa kubwa kiasi gani, kisha unaweka vitu kwenye seli hizo. Ikiwa mpangilio wako ni mstari mmoja tu wa vitu vinavyoshiriki nafasi, Grid inaongeza mambo mengi yasiyo ya lazima.

Mpangilio wa Ukurasa Ni wa Grid

Hapa ndipo Grid inapoingia kuongoza. Unakumbuka jinamizi langu la dashboard? Hivi ndivyo muundo unavyopaswa kuwa tangu mwanzo:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

Angalia kinachotokea. Chombo cha .page kinaanzisha safu tatu na safu mbili za wima. Safu ya kwanza hujipanga kulingana na kile kichwa cha habari (header) kinachobeba kutokana na auto. Safu ya kati inachukua nafasi zote zilizobaki kwa kutumia 1fr. Footer inakaa kwenye safu ya mwisho, ikiwa na ukubwa wa maudhui yake yenyewe. Wakati huo huo, sidebar inafungwa kwenye upana wa piksel 200, na eneo kuu linajaza sehemu iliyobaki.

Mantiki ya uwekaji ndiyo inayotoa ahueni ya kweli. Header inapanuka kutoka mstari wa safu 1 hadi mstari wa -1, kumaanisha inapanuka kwenye safu zote mbili bila kujali ni safu ngapi utazoongeza baadaye. Sidebar na maudhui makuu zinashiriki safu ya 2 lakini zinachukua safu za wima tofauti. Footer inarudi kwenye upana kamili katika safu ya 3. Huhitaji hesabu za asilimia kwenye vipengele vya ndani. Huhitaji wrappers zilizofungwa ndani zinazopambana kwa urefu. Badilisha upana wa sidebar sehemu moja, na eneo kuu linajirekebisha kiotomatiki. Mpangilio mzima unafanya kazi kama mfumo mmoja.

Urahisi wa Kusoma kwa kutumia grid-template-areas

Kwa uwazi zaidi, unaweza kutaja sehemu zako. Badala ya kusimamia namba za mistari, unaandika ramani ya picha:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

Sasa stylesheet yako inasomeka kama mchoro wa awali (wireframe). Ikiwa wakati wowote utataka sidebar ionekane upande wa kulia kwa breakpoint tofauti, unabadilisha maneno mawili kwenye template string. Aina hiyo ya urahisi wa muundo haiwezekani kufikiwa ndani ya mnara wa vyombo vya flex vilivyofungwa ndani ya vingine.

Masomo Mawili Magumu

Grid si uchawi. Kuna makosa mawili ambayo yataharibu mpangilio wako haraka.

Ya kwanza ni matumizi yasiyo makini ya vipimo. Ikiwa unaweka grid-template-columns: 1fr 1fr 1fr lakini usanifu wako unahitaji safu mbili tu za maudhui, ile safu ya tatu bado ipo. Ama itabaki wazi na kutengeneza pengo ambalo hukuulizia, au italazimisha maudhui yako halisi kusongamana kwa namna inayoharibu usanifu wako. Fanya kwa makusudi. Unapomaanisha safu mbili, andika repeat(2, 1fr).