CSS গ্যাপ এট্রিবিউট

বর্ণনা ও ব্যবহার

gap প্রক্রিয়াটি ফ্লেক্সবক্স, গ্রিড বা একাধিক স্তম্ভ লেআউটের মধ্যে সাপেক্ষিক মাঝামাঝি ছাড় মাপ নির্ধারণ করে। এটি নিচের প্রক্রিয়াগুলির সংক্ষিপ্ত প্রক্রিয়া:

প্রত্যহরণ:gap প্রক্রিয়াটি পূর্বে grid-gap নামে ছিল grid-gap。

অন্যান্য দেখুন:

CSS টিউটোরিয়াল:CSS গ্রিড লেআউট

CSS টিউটোরিয়াল:CSS ফ্লেক্স বক্স লেআউট

CSS টিউটোরিয়াল:CSS একাধিক স্তম্ভ লেআউট

CSS রেফারেন্স ম্যানুয়েল:row-gap প্রক্রিয়া

CSS রেফারেন্স ম্যানুয়েল:column-gap প্রক্রিয়া

ইনস্ট্যান্স

উদাহরণ 1

সাপেক্ষিক মাঝামাঝি ছাড় মাপ 50px নির্ধারণ করুন:

.grid-container {
  gap: 50px;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 2: গ্রিড লেআউট

গ্রিড লেআউটে সাপেক্ষিক মাঝামাঝি ছাড় মাপ 20px এবং 50px নির্ধারণ করুন:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 3: ফ্লেক্স বক্স লেআউট

ফ্লেক্স বক্স লেআউটে সাপেক্ষিক মাঝামাঝি ছাড় মাপ 20px এবং 70px নির্ধারণ করুন:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণ 4: একাধিক স্তম্ভ লেআউট

একাধিক স্তম্ভ লেআউটে স্তম্ভগুলির মধ্যে 50px ছাড় মাপ নির্ধারণ করুন:

#newspaper {
  columns: 3;
  gap: 50px;
}

আপনার হাতে পরীক্ষা করুন

CSS স্ক্রিপ্ট

gap: row-gap column-gap|initial|inherit;
মান বর্ণনা
row-gap গ্রিড বা ফ্লেক্স বক্স লেআউটের মধ্যে সাপেক্ষিক মাঝামাঝি ছাড় মাপ নির্ধারণ করুন。
column-gap গ্রিড, ফ্লেক্স বক্স বা একাধিক স্তম্ভের লেআউটের মধ্যে স্তম্ভগুলির মধ্যে সাপেক্ষিক মাঝামাঝি ছাড় মাপ নির্ধারণ করুন。
initial এই প্রক্রিয়াটিকে তার ডিফল্ট মানে নিন। দেখুন: initial。
inherit এই প্রক্রিয়াটিকে পিতৃত্বত্ব থেকে অনুগত করুন। দেখুন: inherit。

টেকনিক্যাল বিবরণ

ডিফল্ট মান: normal normal
অনুগতি: না
অ্যানিমেশন তৈরি: সমর্থিত। পৃথক প্রতিশব্দকে দেখুন:অ্যানিমেশন-সংক্রান্ত প্রতিশব্দ。
সংস্করণ: CSS বক্স অ্যালিগনেশন মডিউল লেভেল 3
JavaScript স্ক্রিপ্ট: object.style.gap="50px 100px"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা সম্পূর্ণ সমর্থিত এই প্রক্রিয়ার প্রথম ব্রাউজার সংস্করণকে উল্লেখ করে।

লেআউট Chrome IE / Edge Firefox Safari Opera
গ্রিডে 66 16 61 12 53
ফ্লেক্স বক্সে 84 84 63 14.1 70
একাধিক স্তম্ভে 66 16 61 সমর্থিত না 53