Grid/Flex ማሳያ በማንኛውም ድረ-ገጽ ላይ ያለውን ማንኛውንም CSS Grid እና Flexbox container ያገኛል እና አቀማመጥ መዋቅራቸውን እንደ ቀለማማ ሽፋኖች በቀጥታ በገጹ ላይ ያሳያል። Grid መስመሮች፣ ዱካ መጠኖች፣ ክፍተት ዋጋዎች፣ flex አቅጣጫዎች እና ማስተካከያ — ሁሉም DevTools ሳይከፍቱ ይታያል።
CSS Grid እና Flexbox ዘመናዊ ድረ-ገጽ አቀማመጥ መሠረቶች ናቸው ግን በነባሪ የማይታዩ ናቸው። Grid/Flex ማሳያ ይህን ሙሉ ለሙሉ ራስ-ሰር ያደርጋል — ገጹን ይቃኛል ሁሉንም Grid እና Flex containers ያገኛል እና አቀማመጥ መዋቅራቸውን እንደ ምስላዊ ሽፋኖች ያሳያል።
Grid containers ለእያንዳንዱ ረድፍ እና አምድ ዱካ ቀለማማ መስመሮች ያሳያሉ። ዱካ መጠኖች (1fr፣ auto፣ 200px) በእያንዳንዱ መስመር ላይ ተሰይመዋል። ክፍተት ቦታዎች ግማሽ-ግልፅ ባንዶች ያደምቃሉ።
Flex containers ዋና ዘንግን እንደ ቀስት (row፣ row-reverse፣ column) እና ተቃራኒ ዘንግን ቀጥ ያለ ያሳያሉ። justify-content እና align-items ክፍተት እንዴት እንደተከፋፈለ ምስላዊ ይታያል።
መሳሪያው ራስ-ሰር ሙሉ ገጹን ይቃኛል display: grid ወይም display: flex ያላቸውን ኤለመንቶች ያገኛል። ባጅ ቁጥር ጠቅላላ ቁጥር ያሳያል።
ሙሉ አቀማመጥ ባህሪያቱን ለማየት ማንኛውንም container ጠቅ ያድርጉ — grid-template-columns/rows፣ grid-gap፣ flex-direction፣ justify-content፣ align-items፣ flex-wrap።
በ Grid ወይም Flex container ውስጥ ያለው ማንኛውም ልጅ ኤለመንት ገሃድ የተሰጠ መጠን፣ flex-grow/shrink ዋጋዎች እና grid area ቦታ ያሳያል።
በሌሎች Grid/Flex containers ውስጥ ያሉ Grid እና Flex containers ያገኛል። ሽፋኑ እያንዳንዱን ማስገቢያ ደረጃ በተለያዩ ቀለሞች ያሳያል።
Grid አምድ ከሚጠበቀው የሰፋ ወይም ያጠረ? ሽፋኑ ገሃድ ዱካ መጠኖች ያሳያል ብራውዘሩ መጠኖቹን እንዴት እንደሰላ ለማየት።
አንድ flex ልጅ ከሌላ ለምን ሰፋ? ማሳያው ለእያንዳንዱ ልጅ flex-grow፣ flex-shrink እና flex-basis ዋጋዎች ያሳያል።
ብራውዘሩን ያስተካክሉ እና grid ሽፋን ቅጽበታዊ ሲዘምን ይመልከቱ።
በሚገባ የተገነቡ ድረ-ገጾችን ይጎብኙ Grid እና Flex አቀማመጦችን በምርት እንዴት እንደሚጠቀሙ ይመልከቱ።
በገጽ ላይ ያሉ ሁሉም ካርድ grids ተመሳሳይ አምድ ብዛትና ክፍተት ዋጋዎች እንደሚጠቀሙ ያረጋግጡ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና Grid/Flex ማሳያ አዶን ጠቅ ያድርጉ።
ማንኛውም Grid እና Flex container ቀለማማ ድንበር ሽፋን ያገኛል።
ሙሉ አቀማመጥ ባህሪያቱን ለማየት ማንኛውንም container ጠቅ ያድርጉ።
ማንኛውም ልጅ ኤለመንት የተሰላ መጠንና አቀማመጥ-ተኮር ባህሪያቱን ያሳያል።
ሁሉንም ሽፋኖች ለማስወገድ መሳሪያ አዶን ዳግም ጠቅ ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
