Wacha tuangalie muundo wa gridi ya wavuti na tuvunje vifaa vya kibinafsi. Wacha tuchunguze kwanini kuelea ni muhimu sana, na vile vile mbinu maarufu ya kujenga gridi ya kwanza ya wavuti kutoka kwa vijito vitatu na kijachini cha tovuti.
Ili kusoma ujenzi wa gridi ya wavuti, unahitaji kuelewa "mtiririko" ni nini. Mtiririko ni vitu vya wavuti, ziko moja baada ya nyingine. Kwa mfano, hizi zinaweza kuwa vitu vya div ambavyo huenda moja kwa moja kwa chaguo-msingi. Lakini mtiririko unaweza kupangwa tena, na msimamo wa vitu vizuizi unaweza kubadilishwa.
Ili kudhibiti mtiririko, tunatumia mali ya kuelea, ambayo inaweza kuweka kizuizi upande wa kushoto au kulia. Inatosha kuandika katika faili ya CSS:
"darasa au jina la kizuizi" {kuelea: kulia / kushoto; }
Upungufu pekee wa kuelea ni uwezo wa "kuingiliana" kwa kitalu kimoja juu ya kingine.
Ili kuzuia kupita juu, tunatumia wazi: zote mbili - mali hii itaweka mtiririko kuzunguka kizuizi. Tunaweka upana na urefu, kama kiwango cha juu na cha chini, ili thamani iundwe kulingana na saizi ya yaliyomo (maandishi, picha). Margin - weka thamani kwa auto ili pembezoni za nje ziundwe kiatomati kulingana na eneo la kizuizi.
Kwa kuwa kuelea kunaweza kuweka vizuizi pande mbili, ni kawaida kugawanya wavuti hiyo kwenye mito - kushoto na kulia. Ikiwa mpangaji anahitaji mito miwili tu, basi anaacha kuelea kushoto na kulia, lakini ikiwa kuna zaidi ya mbili, basi hurekebisha pembezoni kwa kutumia margin. Je! Hii inatokeaje:
safu 1 {kuelea: kushoto; upana: 65px; urefu wa min: 50px; margin-kulia: 9px; // 9px kutoka kisanduku cha katikati}
Mkondo 2:
safu 2 {kuelea: kushoto; // kwa block ya kushoto, lakini bila "kuingiliana", kwani tulitumia upana wa margin: 80px; urefu wa min: 50px; }
Mkondo wa 3:
safu 3 {kuelea: kulia; upana: 65px; urefu wa min: 50px; }
Kushughulika na kijachini (.footer):
mpiga risasi {clear: both; // kuzunguka pande zote mbili}
Hivi ndivyo tulitengeneza gridi ya wavuti kutumia kuelea, iliyo na mito mitatu.
