Chromium ল্যান্ড Flexbox ফাঁক

CSS gap প্রপার্টিটি এখানে Chromium এর CSS Flexbox এবং Multi-Column লেআউট ইঞ্জিনের জন্য।

অ্যাডাম আরগাইল
ডেভিড গ্রোগান
David Grogan
GitHub

সিএসএস গ্যাপ

gap হল flow আপেক্ষিক , অর্থাৎ এটি কন্টেন্ট প্রবাহের দিকের উপর ভিত্তি করে গতিশীলভাবে পরিবর্তিত হয়। উদাহরণস্বরূপ, gap স্বয়ংক্রিয়ভাবে আপনার আন্তর্জাতিক ব্যবহারকারীদের জন্য সেট করা বিভিন্ন writing-mode বা direction মানের জন্য সামঞ্জস্য হবে। এটি কম্পোনেন্ট এবং CSS লেখকের জন্য ব্যবধানের চ্যালেঞ্জের বোঝা উল্লেখযোগ্যভাবে কমিয়ে দেয়। আরও কম কোড স্কেলিং।

দিকনির্দেশনা এবং লেখার মোডে পরিবর্তনগুলি পরিচালনা করার সময় স্থানীয়করণ সমর্থন প্রদর্শনের ফাঁক: কোডপেন | টুইট

ব্রাউজারের সামঞ্জস্য

Browser Support

  • ক্রোম: ৫৭।
  • প্রান্ত: ১৬।
  • ফায়ারফক্স: ৫২।
  • সাফারি: ১০.১।

Source

ব্যবহার

gap যেকোনো CSS দৈর্ঘ্য বা শতাংশকে মান হিসেবে গ্রহণ করে।

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}


গ্যাপটি ১ দৈর্ঘ্য অতিক্রম করা যেতে পারে, যা সারি এবং কলাম উভয়ের জন্যই ব্যবহৃত হবে।

শর্টহ্যান্ড 
.grid {
  display: grid;
  gap: 10px;
}
 সারি এবং কলাম উভয়ই একসাথে সেট করুন
সম্প্রসারিত 
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}


গ্যাপটি 2 দৈর্ঘ্য অতিক্রম করা যেতে পারে, যা সারি এবং কলামের জন্য ব্যবহৃত হবে।

শর্টহ্যান্ড 
.grid {
  display: grid;
  gap: 10px 5%;
}
 একসাথে সারি এবং কলাম উভয়ই আলাদাভাবে সেট করুন
সম্প্রসারিত 
.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

ফ্লেক্সবক্স gap

ফ্লেক্সবক্সে gap আসার আগে, কৌশলগুলির মধ্যে নেতিবাচক মার্জিন, জটিল নির্বাচক, :last বা :first টাইপের ছদ্ম-শ্রেণী নির্বাচক, অথবা গতিশীলভাবে লে-আউট এবং মোড়ানো শিশুদের সেটের স্থান পরিচালনা করার অন্যান্য উপায় অন্তর্ভুক্ত ছিল।

পূর্ববর্তী প্রচেষ্টা

ফাঁক-জাতীয় ব্যবধান পেতে লোকেরা যে প্যাটার্নগুলি ব্যবহার করেছে তা নীচে দেওয়া হল।

ছদ্ম-শ্রেণী নির্বাচক 
.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}
লোবোটোমাইজড পেঁচা 
.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}
 উৎস

উপরেরগুলো যদিও gap সম্পূর্ণ প্রতিস্থাপন নয়, এবং প্রায়শই র‍্যাপিং পরিস্থিতি, লেখার মোড বা দিকনির্দেশনার জন্য @media অথবা :lang() সমন্বয়ের প্রয়োজন হয়। এক বা দুটি মিডিয়া কোয়েরি যোগ করা খুব একটা খারাপ বলে মনে হয় না, তবে এগুলি যোগ করে জটিল লেআউট লজিকের দিকে নিয়ে যেতে পারে।

উপরের লেখকের আসলে উদ্দেশ্য ছিল শিশু সামগ্রীর কোনওটিই স্পর্শ না করা।

প্রতিষেধক: ফাঁক 

.layout {
  display: flex;
  gap: 10px;
}

প্রথম দুটি উদাহরণে (Flexbox gap ছাড়া), শিশুদের লক্ষ্যবস্তু করা হয়েছে এবং অন্যান্য উপাদান থেকে ব্যবধান নির্ধারণ করা হয়েছে। অ্যান্টিডোট গ্যাপের উদাহরণে, ধারকটি ব্যবধানের মালিক। প্রতিটি শিশু নিজেকে বোঝা থেকে মুক্তি দিতে পারে, একই সাথে ব্যবধানের মালিকানা কেন্দ্রীভূত করতে পারে। ধারাবাহিকতা সরলীকরণ। পুনর্বিন্যাস, ভিউপোর্ট পরিবর্তন, উপাদান অপসারণ, নতুন উপাদান যুক্ত করা ইত্যাদি এবং ব্যবধান সামঞ্জস্যপূর্ণ থাকে। কোনও নতুন নির্বাচক নেই, কোনও নতুন মিডিয়া কোয়েরি নেই, কেবল স্থান।

Chromium DevTools আপডেট

এই আপডেটগুলির সাথে Chromium DevTools-এ পরিবর্তন এসেছে, লক্ষ্য করুন কিভাবে Styles প্যান এখন grid-gap এবং gap পরিচালনা করে 👍

একটি অফিস যেখানে দুজন লোক এক টেবিলে বসে কাজ করছে।
Devtools grid-gap এবং gap উভয়ই দেখায়, grid-gap নিচে দেখানো gap ব্যবহার করা হয় যাতে ক্যাসকেডটি সর্বশেষ সিনট্যাক্স ব্যবহার করতে পারে।

DevTools grid-gap এবং gap উভয়কেই সমর্থন করে, কারণ gap মূলত পূর্ববর্তী সিনট্যাক্সের একটি উপনাম।

নতুন লেআউটের সম্ভাবনা

Flexbox gap দিয়ে, আমরা সুবিধার চেয়েও বেশি কিছু আনলক করি। আমরা শক্তিশালী, নিখুঁতভাবে ব্যবধানযুক্ত, অভ্যন্তরীণ লেআউটগুলি আনলক করি। নীচের ভিডিও এবং পরবর্তী কোড নমুনায়, Grid Flexbox-এর মতো লেআউট অর্জন করতে পারে না। Grid-এর অবশ্যই সমান সারি এবং কলাম থাকতে হবে, এমনকি যদি সেগুলি অভ্যন্তরীণভাবে নির্ধারিত হয়।

টুইট

এছাড়াও, লক্ষ্য করুন যে যখন শিশুরা এইভাবে অভ্যন্তরীণভাবে মোড়ানো হয় তখন তাদের মধ্যে ব্যবধান কতটা গতিশীল হয়। মিডিয়া কোয়েরিগুলি বুদ্ধিমান সমন্বয় করার জন্য এইভাবে মোড়ানো সনাক্ত করতে পারে না। ফ্লেক্সবক্স gap সমস্ত আন্তর্জাতিকীকরণ জুড়ে আপনার জন্য এটি করতে পারে এবং করবে।

বহু-কলাম gap

ফ্লেক্সবক্স gap সিনট্যাক্স সমর্থন করার পাশাপাশি, মাল্টি-কলাম লেআউটগুলি ছোট gap সিনট্যাক্সও সমর্থন করে।

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

বেশ মজার।