CSS-এ স্বয়ংক্রিয় প্রস্থ সহ টাইলস

আমাদের আগের পাঠে, টাইলসে এমন হয়েছিল যে উপাদানগুলির প্রস্থ এবং তাদের মার্জিনের যোগফল মূল উপাদানের প্রস্থের সমান হতে হবে। এটি সর্বত্র প্রয়োগের জন্য একটু অসুবিধাজনক। আসুন এটি এমনভাবে করি যাতে উপাদানগুলি স্বয়ংক্রিয়ভাবে মূল উপাদানের প্রস্থের সাথে সামঞ্জস্য করে।

ধরুন আমাদের এটির মতো একটি মূল উপাদান আছে:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

ধরুন এই টাইলসের উপাদানগুলি প্রতি সারিতে 4 ব্লোক করে সাজানো আছে:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

আসুন আমাদের ব্লকগুলির প্রস্থ এমনভাবে সেট করি যাতে প্রতিটি ব্লক মূল উপাদানের এক চতুর্থাংশ জায়গা নেয়। এটি করতে তাদের আকার 25% সেট করুন:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}