የCSS Grid ጀነሬተር ምንድን ነው?
የCSS Grid ጀነሬተር የCSS grid አቀማመጥን (layout) በአይን በሚታይ ሁኔታ ለመንደፍ የሚያስችል ነፃ የኢንተርኔት መሳሪያ ነው። በዚህ መሳሪያ ላይ የአምዶች እና የረድፎች ብዛት በመወሰን፣ መጠናቸውን በመለካት እና በመካከላቸው ያለውን ክፍተት በማስተካከል የራስዎን grid መገንባት ይችላሉ። በተጨማሪም በgridዱ ላይ በመጎተት አይተሞችን ማስቀመጥ ይቻላል። መሳሪያው እርስዎ ለነደፉት grid ተዛማጅ የሆነውን የCSS እና HTML ኮድ በራስ-ሰር የሚያመነጭ ሲሆን፣ ኮዱን በቀላሉ ገልብጠው በራስዎ ፕሮጀክት ላይ መጠቀም ይችላሉ።
ይህ መሳሪያ በተለይ የሚከተሉትን ፍላጎቶች ላሏቸው ተጠቃሚዎች ጠቃሚ ነው፦
- የCSS grid አቀማመጥን በፍጥነት መሞከር (prototype) ለሚፈልግ ሰው።
- ኮዱን በእጅ ሳይጽፍ ለgrid አቀማመጥ የሚሆን CSS እና HTML ማመንጨት ለሚፈልግ ሰው።
- የተለያዩ የአምድ እና የረድፍ መጠኖች በgrid አቀማመጥ ላይ እንዴት ተጽዕኖ እንደሚያሳድሩ በአይን ማየት ለሚፈልግ ሰው።
- እንደ የጎን አሞሌ፣ ራስጌ እና ግርጌ፣ ማሳያ፣ ወይም ዳሽቦርድ ያሉ መዋቅሮችን የያዘ አቀማመጥ መፍጠር ለሚፈልግ ሰው።
ግብዓቶች እና የአጠቃቀም ገደቦች
በመሳሪያው ላይ የሚከተሉትን ግብዓቶች ማስተካከል እና መወሰን ይችላሉ፦
- አምዶች: ከ1 እስከ 12 የሚደርስ ቁጥር።
- ረድፎች (Rows): ከ1 እስከ 12 የሚደርስ ቁጥር።
- የአምድ ክፍተት (Column gap): ከ0 እስከ 48px የሚደርስ ቁጥር።
- የረድፍ ክፍተት (Row gap): ከ0 እስከ 48px የሚደርስ ቁጥር።
- የአምድ መጠኖች: ማንኛውንም ትክክለኛ የCSS grid እሴት መጻፍ ይቻላል፤ ለምሳሌ
1fr፣200px፣auto፣min-content፣ ወይምminmax(120px, 1fr)። - የረድፍ መጠኖች: ማንኛውንም ትክክለኛ የCSS grid እሴት መጻፍ ይቻላል፤ ለምሳሌ
1fr፣200px፣auto፣min-content፣ ወይምminmax(120px, 1fr)። - የአይተም አቀማመጥ (Item placement): አራት ማዕዘን ቅርጽ ያለው ቦታ ለመለየት በሴሎች ላይ መጎተት።
ይህ መሳሪያ ቢበዛ እስከ 16 አይተሞችን ብቻ ይደግፋል።
የአቀማመጥ ህጎች እና ልዩ ሁኔታዎች
በመሳሪያው ውስጥ አቀማመጦችን ሲሰሩ የሚከተሉት ህጎች ይተገበራሉ፦
- በሴሎች ላይ ተጭነው በመጎተት አይተም ሲስሉ እና ማውሱን ሲለቁ፣ የተመረጡትን አምዶች እና ረድፎች የሚሸፍን የተቀመጠ አይተም (child item) ይፈጠራል።
- እያንዳንዱ የተሳለ አይተም በCSS ውጤቱ ላይ የራሱ
grid-columnእናgrid-rowህግ የሚኖረው ሲሆን፣ በHTML ውስጥ ደግሞ ተዛማጅdivያገኛል። - አይተሞች እርስ በእርስ ሊደራረቡ ይችላሉ፤ በዚህ ጊዜ ዘግይቶ የተሳለው አይተም ከላይ ይቀመጣል።
- በአይተም ላይ ያለውን "×" ምልክት ጠቅ በማድረግ አይተሙን ማስወገድ ይቻላል።
- እያንዳንዱ ትራክ (አምድ ወይም ረድፍ) የራሱ የመጠን ሳጥን አለው። እዚያ ሳጥን ውስጥ ማንኛውንም የgrid እሴት መተየብ ይችላሉ።
- በግብዓት ሳጥኑ ውስጥ እንደ
not-a-grid-trackያለ ትክክለኛ ያልሆነ እሴት ከተጻፈ፣ ግብዓቱ ትክክለኛ እንዳልሆነ ምልክት ይደረግበታል፤ ሆኖም ግን የሚወጣው የCSS ኮድ የመጨረሻውን ትክክለኛ እሴት ይዞ ይቆያል። - ተመሳሳይ መጠን ያላቸው ትራኮች በውጤት CSS ኮዱ ላይ አጭር እንዲሆኑ ተደርገው በ
repeat()ውስጥ ይጠቀለላሉ። - የአምድ ክፍተት እና የረድፍ ክፍተት ለየብቻ የሚዘጋጁ ቢሆንም፣ እሴቶቻቸው እኩል በሚሆኑበት ጊዜ በCSS ኮዱ ውስጥ ወደ አንድ የ
gapባህሪ (property) ይጠቀለላሉ። - "አይተሞችን አጽዳ" የሚለውን ሲጫኑ ባዶ የHTML ኮንቴይነር የሚተርፍ ሲሆን የአይተሞች ብዛትም ወደ 0 ዝቅ ይላል።
- "አይተም አክል" የሚለውን ሲጫኑ የHTML አይተም ይፈጠራል።
ዝግጁ የሆኑ ቅድመ-ማስተካከያዎች
የተለመዱ የአቀማመጥ መዋቅሮችን በፍጥነት ለመስራት መሳሪያው የሚከተሉትን ቅድመ-ማስተካከያዎች (presets) ያቀርባል፦
- የጎን አሞሌ
- ራስጌ እና ግርጌ
- ማሳያ: ይህ ቅድመ-ማስተካከያ 3 አምዶችን፣ 2 ረድፎችን እና 3 አይተሞችን በራስ-ሰር ያመነጫል።
- ዳሽቦርድ
የውጤት ኮዶች
ንድፍዎን ሲያጠናቅቁ መሳሪያው የሚከተሉትን ውጤቶች ያመነጫል፦
- CSS: ለgrid ኮንቴይነሩ እና ለእያንዳንዱ የተቀመጠ አይተም የተፈጠረ የCSS ኮድ።
- HTML: ለgrid ኮንቴይነሩ የተፈጠረ የHTML ኮድ እና ለእያንዳንዱ የተቀመጠ አይተም የሚሆን የ
divኤለመንቶች።
የግል ሚስጥር ጥበቃ እና መረጃ አያያዝ
የእርስዎ grid የሚሰራው በቀጥታ በብሮውዘርዎ ላይ ነው። በዚህ መሳሪያ ላይ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።
ተደጋግሞ የሚነሱ ጥያቄዎች (FAQ)
በgrid ላይ አይተሞችን እንዴት ማስቀመጥ እችላለሁ?
በሴሎች ላይ ተጭነው በመጎተት አራት ማዕዘን ቅርጽ ይሳሉ — ሲለቁት እነዚያን አምዶች እና ረድፎች የሚሸፍን የተቀመጠ አይተም (child) ይሆናል። እያንዳንዱ የሳሉት አይተም በCSS ውስጥ የራሱ grid-column እና grid-row ህግ እንዲሁም በHTML ውስጥ ተዛማጅ div ያገኛል። አይተሞች ሊደራረቡ ይችላሉ፣ እና ዘግይቶ የተሳለው ከላይ ይቀመጣል፤ አይተምን ለማስወገድ በላዩ ላይ ያለውን × ይጠቀሙ።
አምዶች እና ረድፎች የተለያየ መጠን ሊኖራቸው ይችላል?
አዎ። እያንዳንዱ ትራክ የራሱ የመጠን ሳጥን አለው፣ እና እዚያ ማንኛውንም የgrid እሴት መጻፍ ይችላሉ — 1fr፣ 200px፣ auto፣ min-content ወይም minmax(120px, 1fr)። ተመሳሳይ መጠን ያላቸው ትራኮች ውጤቱ አጭር እንዲሆን በrepeat() ውስጥ ይጠቀለላሉ። Column gap እና row gap ለየብቻ የሚዘጋጁ ሲሆን፣ እኩል ሲሆኑ ደግሞ ወደ አንድ gap ይጠቀለላሉ።
ከተፈጠረው ኮድ ጋር ምን አደርጋለሁ?
የCSS እና የHTML ኮዶችን ጎን ለጎን ይቅዱ። HTML ኮዱ ለእያንዳንዱ አይተም አንድ div የያዘ ኮንቴይነር ይሰጥዎታል፣ CSS ኮዱ ደግሞ gridዱን ይገልፃል እና የእያንዳንዱን አይተም ቦታ ይወስናል። ሁለቱንም ወደ ፕሮጀክትዎ ሲለጥፉ እዚህ የሳሉትን ተመሳሳይ አቀማመጥ ያገኛሉ።