সিএসএস-কেবল রাজমিস্ত্রি লেআউট


134

আমাকে মোটামুটি রান-অফ-দ্য মিলের রাজমিস্ত্রি লেআউটটি বাস্তবায়ন করতে হবে। তবে, বেশ কয়েকটি কারণে আমি এটি করতে জাভাস্ক্রিপ্ট ব্যবহার করতে চাই না।

বিভিন্ন উচ্চতার আয়তক্ষেত্রগুলির একাধিক কলামের গ্রিড।

পরামিতি:

  • সমস্ত উপাদানগুলির একই প্রস্থ রয়েছে
  • উপাদানগুলির একটি উচ্চতা রয়েছে যা সার্ভারের দিকটি গণনা করা যায় না (একটি চিত্রের সাথে বিভিন্ন ধরণের পাঠ্য)
  • আমার যদি প্রয়োজন হয় তবে আমি স্থির সংখ্যক কলাম নিয়ে বেঁচে থাকতে পারি

এই একটি তুচ্ছ সমাধান যে আধুনিক ব্রাউজার, কাজ করে সম্পত্তি।column-count

এই সমাধানের সাথে সমস্যাটি হ'ল উপাদানগুলি কলামগুলিতে অর্ডার করা হয়:

উপরের বামদিকের বাক্স থেকে শুরু করে এগুলি সোজা নিচে 1 থেকে 4 নাম্বার করা হয়েছে, পরবর্তী কলামের শীর্ষতম বাক্সটি 5 এবং এই জাতীয় কিছু।

যদিও সারিগুলিতে অর্ডার করার জন্য আমার উপাদানগুলি প্রয়োজন, কমপক্ষে আনুমানিক:

উপরের বাম দিকের বাক্স থেকে শুরু করে এগুলি সোজা জুড়ে 1 থেকে 6 পর্যন্ত সংখ্যাযুক্ত, তবে 5 নং বাক্সটি নীচের বাক্সের নীচে সবচেয়ে কম 7 টির মতো রয়েছে কারণ এটির বামদিকে পরের বাক্সের চেয়ে একটি সারিতে বেশি উপস্থিত রয়েছে।

পদ্ধতির চেষ্টা করেছি যে কাজ করে না:

এখন আমি সার্ভারের পার্শ্বে রেন্ডারিং পরিবর্তন করতে এবং আইটেমের সংখ্যাকে কলামের সংখ্যায় বিভাজনগুলি পুনরায় সাজিয়ে দিতে পারলাম , তবে এটি জটিল, ত্রুটি-প্রবণ (ব্রাউজারগুলি কীভাবে আইটেমের তালিকাটি কলামগুলিতে বিভক্ত করার সিদ্ধান্ত নেয় তার উপর ভিত্তি করে), তাই আমি চাই সম্ভব হলে এড়ানো।

এমন কি নতুন কিছুর ফ্লেক্সবক্স যাদু আছে যা এটি সম্ভব করে তোলে?


7
এমন কোনও উপায়ের কথা ভাবতে পারেন না যা পূর্বনির্ধারিত উচ্চতার উপর নির্ভর করে না। আপনি যদি জেএস নিয়ে পুনর্বিবেচনা করেন, তাহলে stackoverflow.com/questions/13518653/… এ একবার দেখুন যেখানে আমি এমন সমাধান সমাধান করি যা বেশ সহজ।
গ্যাব্রিয়েল পেট্রিওলি

1
@ গ্যাবি এখনই আপনার সমাধানটি বাস্তবায়ন করছে, আপনাকে ধন্যবাদ!
পেক্কা

4
আমি বুঝতে পেরেছি যে আপনি কেবল সিএসএস বলেছেন। আমি কেবল উল্লেখ করতে চাই যে রাজমিস্ত্রিটির আর jQuery এর প্রয়োজন নেই - মিনাইফড লাইব্রেরিটি 8kb এর নিচে রয়েছে - এবং এটি এইচটিএমএল দিয়ে একাই শুরু করা যেতে পারে। শুধু রেফারেন্সের জন্য jsfiddle.net/wp7kuk1t
I Hod kode

1
লাইন-উচ্চতা, ফন্ট-আকার (আপনাকে একটি নির্দিষ্ট ফন্ট পরিবেশন করতে হবে এবং কিছু চতুর গণনা করতে হবে), চিত্রের উচ্চতা, উল্লম্ব মার্জিন এবং প্যাডিং জেনে আপনি যদি সময়ের আগে উপাদানগুলির উচ্চতা নির্ধারণ করতে পারেন তবে আপনি পারেন এটা কর. অন্যথায়, আপনি কেবল সিএসএস ব্যবহার করে এটি করতে পারবেন না। আপনি প্রতিটি উপাদান প্রাক-রেন্ডার করতে এবং সেই উপাদানটির উচ্চতা পেতে ফ্যান্টমজেএস এর মতো কিছু ব্যবহার করতে পারেন তবে এতে উল্লেখযোগ্য ওভারহেড / বিলম্বিততা যুক্ত হবে।
টিমোথি জর্ন

উত্তর:


157

flexbox

ফ্লেক্সবক্সের সাহায্যে একটি গতিশীল গাঁথুনি বিন্যাস সম্ভব নয়, কমপক্ষে পরিষ্কার এবং দক্ষ উপায়ে নয়।

ফ্লেক্সবক্স এক-মাত্রিক লেআউট সিস্টেম is এর অর্থ এটি অনুভূমিক বা উল্লম্ব লাইনের সাথে আইটেমগুলিকে সারিবদ্ধ করতে পারে। একটি ফ্লেক্স আইটেম তার সারি বা কলামে সীমাবদ্ধ।

একটি সত্য গ্রিড সিস্টেম দ্বিমাত্রিক, যার অর্থ এটি অনুভূমিক এবং উল্লম্ব রেখার সাথে আইটেমগুলিকে সারিবদ্ধ করতে পারে। সামগ্রী আইটেমগুলি একই সাথে সারি এবং কলামগুলিতে বিস্তৃত হতে পারে, যা ফ্লেক্স আইটেমগুলি করতে পারে না।

এই কারণেই গ্রিডগুলি তৈরি করার জন্য ফ্লেক্সবক্সের সীমাবদ্ধ ক্ষমতা রয়েছে। ডাব্লু 3 সি গ্রিড লেআউট আরও একটি সিএসএস 3 প্রযুক্তি বিকাশ করার কারণও এটি ।


row wrap

সহ একটি ফ্লেক্স পাত্রে flex-flow: row wrap, ফ্লেক্স আইটেমগুলিকে অবশ্যই নতুন সারিগুলিতে আবৃত করতে হবে ।

এর অর্থ হ'ল একটি ফ্লেক্স আইটেম একই সারিতে অন্য আইটেমের নিচে মোড়াতে পারে না

উপরের দিকে লক্ষ্য করুন ডিভিডি # 3 কীভাবে ডিভ # 1 এর নীচে মোড়ানো , একটি নতুন সারি তৈরি করে। এটি # 2 ডিভের নিচে মোড়তে পারে না ।

ফলস্বরূপ, যখন আইটেমগুলি সারিগুলির মধ্যে দীর্ঘতম হয় না, সাদা স্থান অবশেষ থাকে, অপ্রীতিকর ফাঁক তৈরি করে।


column wrap

আপনি যদি স্যুইচ করেন flex-flow: column wrap, গ্রিডের মতো লেআউটটি আরও অর্জনযোগ্য। তবে, কলামের দিকের ধারকটির ব্যাটে ডানদিকে চারটি সম্ভাব্য সমস্যা রয়েছে:

  1. ফ্লেক্স আইটেমগুলি উল্লম্বভাবে প্রবাহিত হয়, অনুভূমিকভাবে নয় (যেমনটি আপনার ক্ষেত্রে প্রয়োজন)।
  2. ধারকটি অনুভূমিকভাবে প্রসারিত হয়, উল্লম্বভাবে নয় (পিন্টারেস্ট বিন্যাসের মতো)।
  3. এটির ধারকটির একটি নির্দিষ্ট উচ্চতা থাকা দরকার, তাই আইটেমগুলি কোথায় জড়িত তা জানে।
  4. এই লেখার হিসাবে, এটির সমস্ত বড় ব্রাউজারগুলিতে এর ঘাটতি রয়েছে যেখানে অতিরিক্ত কলাম যুক্ত করার জন্য ধারকটি প্রসারিত হয় না

ফলস্বরূপ, কলাম-দিকনির্দেশক ধারক এই ক্ষেত্রে কোনও বিকল্প নয় এবং অন্যান্য অনেক ক্ষেত্রে।


আইটেমের মাত্রা সহ সিএসএস গ্রিড

গ্রিড লেআউট আপনার সমস্যার একটি নির্ভুল সমাধান হবে যদি বিষয়বস্তু আইটেম বিভিন্ন উচ্চতা হতে পূর্বনির্ধারিত পারে । গ্রিডের সামর্থ্যের মধ্যে অন্যান্য সমস্ত প্রয়োজনীয়তা ভাল।

আশেপাশের আইটেমগুলির সাথে ফাঁক বন্ধ করতে গ্রিড আইটেমগুলির প্রস্থ এবং উচ্চতা অবশ্যই জানা উচিত।

সুতরাং গ্রিড, যা অনুভূমিকভাবে প্রবাহিত রাজমিস্ত্রি লেআউটটি তৈরির জন্য সেরা সিএসএসের অফার দেয়, এই ক্ষেত্রে সংক্ষিপ্ত হয়ে পড়ে।

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

আপনার একটি স্ক্রিপ্ট লাগবে।

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


আইটেম মাত্রা সংজ্ঞায়িত সিএসএস গ্রিড

বিন্যাসগুলির জন্য যেখানে সামগ্রী আইটেমগুলির প্রস্থ এবং উচ্চতা জানা যায়, খাঁটি সিএসএসে অনুভূমিকভাবে প্রবাহিত রাজমিস্ত্রি লেআউটটি এখানে রয়েছে:

grid-container {
  display: grid;                                                /* 1 */
  grid-auto-rows: 50px;                                         /* 2 */
  grid-gap: 10px;                                               /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));   /* 4 */
}

[short] {
  grid-row: span 1;                                             /* 5 */
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}
<grid-container>
  <grid-item short>01</grid-item>
  <grid-item short>02</grid-item>
  <grid-item tall>03</grid-item>
  <grid-item tall>04</grid-item>
  <grid-item short>05</grid-item>
  <grid-item taller>06</grid-item>
  <grid-item short>07</grid-item>
  <grid-item tallest>08</grid-item>
  <grid-item tall>09</grid-item>
  <grid-item short>10</grid-item>
  <grid-item tallest>etc.</grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

jsFizz ডেমো


কিভাবে এটা কাজ করে

  1. একটি ব্লক-স্তরের গ্রিড ধারক স্থাপন করুন। ( inline-gridঅন্য বিকল্প হবে)
  2. grid-auto-rowsসম্পত্তি স্বয়ংক্রিয়ভাবে উত্পন্ন সারির উচ্চতা সেট করে। এই গ্রিডে প্রতিটি সারি 50px লম্বা হয়।
  3. grid-gapসম্পত্তি জন্য একটি সাঁটে লেখার হয় grid-column-gapএবং grid-row-gap। এই নিয়মটি গ্রিড আইটেমগুলির মধ্যে একটি 10px ব্যবধান সেট করে । (এটি আইটেম এবং ধারকগুলির মধ্যে অঞ্চলে প্রযোজ্য নয়))
  4. grid-template-columnsসম্পত্তি স্পষ্টভাবে সংজ্ঞায়িত কলামের প্রস্থ সেট করে।

    repeatস্বরলিপি পুনরায় কলাম (অথবা সারি) এর একটি প্যাটার্ন সংজ্ঞায়িত করে।

    auto-fillফাংশন গ্রিড বলে ধারক সজল ছাড়া হিসাবে অনেক কলাম (অথবা সারি) যতটা সম্ভব লাইন আপ। (এটি ফ্লেক্স লেআউটের অনুরূপ আচরণ তৈরি করতে পারে flex-wrap: wrap))

    minmax()ফাংশন প্রতিটি কলামের (অথবা সারি) জন্য একটি সর্বনিম্ন এবং সর্বোচ্চ আকার পরিসীমা সেট করে। উপরের কোডে, প্রতিটি কলামের প্রস্থ কন্টেইনারটির সর্বনিম্ন 30% এবং যা বিনামূল্যে স্থান উপলভ্য হবে তার সর্বাধিক হবে।

    frইউনিট গ্রিড কন্টেইনারে মুক্ত স্থান ভগ্নাংশ প্রতিনিধিত্ব করে। এটি ফ্লেক্সবক্সের flex-growসম্পত্তির সাথে তুলনীয় ।

  5. এর সাথে grid-rowএবং spanআমরা গ্রিড আইটেমগুলিকে বলছি যে কতগুলি সারি জুড়ে তার বিস্তৃত হওয়া উচিত।


সিএসএস গ্রিডের জন্য ব্রাউজার সমর্থন

  • ক্রোম - 8 ই মার্চ, 2017 পর্যন্ত সম্পূর্ণ সমর্থন (সংস্করণ 57)
  • ফায়ারফক্স - 6 মার্চ, 2017 পর্যন্ত সম্পূর্ণ সমর্থন (সংস্করণ 52)
  • সাফারি - 26 মার্চ, 2017 পর্যন্ত সম্পূর্ণ সমর্থন (সংস্করণ 10.1)
  • এজ - 16 ই অক্টোবর, 2017 এর সম্পূর্ণ সমর্থন (সংস্করণ 16)
  • আইই 11 - বর্তমান অনুমানের জন্য কোনও সমর্থন নেই; অপ্রচলিত সংস্করণ সমর্থন করে

এখানে সম্পূর্ণ চিত্র: http://caniuse.com/#search=grid


ফায়ারফক্সে দুর্দান্ত গ্রিড ওভারলে বৈশিষ্ট্য

ফায়ারফক্স ডেভ সরঞ্জামগুলিতে, যখন আপনি গ্রিড ধারকটি পরীক্ষা করেন, সিএসএস ঘোষণায় একটি ছোট গ্রিড আইকন থাকে is ক্লিক করার পরে এটি পৃষ্ঠায় আপনার গ্রিডের একটি রূপরেখা প্রদর্শন করে।

এখানে আরো বিস্তারিত: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts


5
চমত্কার উত্তর! "আইটেম মাত্রা সংজ্ঞায়িত সিএসএস গ্রিড সংজ্ঞায়িত" সমাধানের সাহায্যে, ঘরের প্রশস্ততার শতাংশ হিসাবে কোনও ঘরের উচ্চতা প্রকাশ করা সম্ভব? এটি চিত্রগুলি প্রদর্শনের জন্য দরকারী, যেখানে দিক অনুপাতটি জানা যায়। আমরা সব সময় দিক অনুপাত বজায় রাখতে চাই।
অলিভার জোসেফ অ্যাশ

ধন্যবাদ। চিত্রগুলির জন্য অনুপাত অনুপাত ইস্যুতে "সেল প্রস্থের শতাংশ" পদ্ধতি (শতাংশ প্যাডিং ট্রিক?), গ্রিডে বা ফ্লেক্সবক্সে এটি নির্ভরযোগ্য নয়। দেখুন এখানে এবং এখানে । @ অলিভার জোসেফআশ
মাইকেল বেঞ্জামিন

হ্যাঁ, আমি শতাংশ প্যাডিং কৌশলটি উল্লেখ করছি। আপনার রাজমিস্ত্রির লেআউট সমাধানের সাথে একত্রে কোনও কাজের ক্ষেত্র ব্যবহার করা সম্ভব? প্রসঙ্গে, আমরা unsplash.com এ চিত্রগুলির জন্য একটি সিএসএস কেবল রাজমিস্ত্রির লেআউট বাস্তবায়ন করতে চাইছি
অলিভার জোসেফ অ্যাশ

1
দুর্ভাগ্যক্রমে এর জন্য জেএস ব্যবহার করা কোনও বিকল্প নয়। আমরা পারফরম্যান্স এবং এসইও কারণে সার্ভার সাইড রেন্ডারিং সক্ষম করতে চাই। এর অর্থ ক্লায়েন্ট-পার্শ্ব জাভাস্ক্রিপ্ট ডাউনলোড, পার্স করা এবং কার্যকর করার আগে লেআউটটি অবশ্যই রেন্ডার করা উচিত। এটিকে অসম্ভব বলে মনে হচ্ছে, আমি মনে করি আমাদের লাইন বরাবর কোথাও একটি বাণিজ্য করতে হবে! আপনার সহায়তার জন্য ধন্যবাদ :-)
অলিভার জোসেফ অ্যাশ

1
স্পেস আপডেট: ফ্লেক্সবক্সে, ধারকটির ইনলাইন আকারটি আবার সমাধানের জন্য শতাংশ মার্জিন এবং প্যাডিং সেট করা আছে। drafts.csswg.org/css-flexbox/#item-margins @ OliverJosephAsh
মাইকেল বেঞ্জামিন

13

এটি সম্প্রতি ফ্লেক্সবক্স জড়িত কৌশলটি আবিষ্কার করেছে: https://tobiasahlin.com/blog/masonry-with-css/

নিবন্ধটি আমার কাছে বোধগম্য হয়েছে, তবে আমি এটি ব্যবহারের চেষ্টা করি নি, তাই মাইকেল এর উত্তরে উল্লিখিত ব্যতীত কোনও গুপ্তচর রয়েছে কিনা তা আমি জানি না।

orderসম্পত্তির সাথে মিলিত ব্যবহার করে নিবন্ধের একটি নমুনা এখানে :nth-child

স্ট্যাক স্নিপেট

.container {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  /* Your container needs a fixed height, and it 
   * needs to be taller than your tallest column. */
  height: 960px;
  
  /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 60%;
  margin: 40px auto;
  counter-reset: items;
}

.item {
  width: 24%;
  /* Optional */
  position: relative;
  margin-bottom: 2%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
  box-shadow: 0 2px 2px rgba(0,90,250,0.05),
    0 4px 4px rgba(0,90,250,0.05),
    0 8px 8px rgba(0,90,250,0.05),
    0 16px 16px rgba(0,90,250,0.05);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}

 /* Just to print out numbers */
div.item::before {
  counter-increment: items;
  content: counter(items);
}

/* Re-order items into 3 rows */
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

/* Force new columns */
.break {
  flex-basis: 100%;
  width: 0;
  border: 1px solid #ddd;
  margin: 0;
  content: "";
  padding: 0;
}

body { font-family: sans-serif; }
h3 { text-align: center; }
<div class="container">
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 190px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 120px"></div>
  <div class="item" style="height: 160px"></div>
  <div class="item" style="height: 180px"></div>
  <div class="item" style="height: 140px"></div>
  <div class="item" style="height: 150px"></div>
  <div class="item" style="height: 170px"></div>
  <div class="item" style="height: 170px"></div>
  
  <span class="item break"></span>
  <span class="item break"></span>
  <span class="item break"></span>
</div>


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

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

লিঙ্কযুক্ত একমাত্র যে জিনিসটি পৃথক করে তা হ'ল orderসম্পত্তি ব্যবহার করা , এটিকে দেখতে বাম থেকে ডানে আইটেম প্রবাহিত হওয়ার মতো দেখায়। তবুও, এর মূল কৌশলটি flex-flow: column wrapযা উপরের উত্তরে উল্লেখ করা হয়েছে। তদতিরিক্ত, এটি আসল রাজমিস্ত্রির মতো আইটেমগুলিকে প্রবাহিত করতে পারে না, উদাহরণস্বরূপ যদি 3 য় এবং চতুর্থ আইটেমটি 3 য় কলামে ফিট করে তবে তারা লিঙ্কযুক্তটি পায় না। তবে আবার যেমনটি আমি বলেছি, এটি প্রয়োজনীয়তাগুলি কিসের উপর নির্ভর করে এবং এই ক্ষেত্রে (এই প্রশ্ন), এটি যা চেয়েছিল তেমন কাজ করবে না।
আসন

তদুপরি, এটি "আপনি নিবন্ধটি পুনরাবৃত্তি করতে চান না" সম্পর্কে নয় , একটি উত্তরে কোডের প্রয়োজনীয় অংশটি থাকা উচিত, তাই লিঙ্কযুক্ত সংস্থানটি মারা গেলে এটি কার্যকর হবে।
আসন

3
আমি এটি আপডেট করেছি, নিবন্ধ থেকে একটি নমুনা + একটি আপভোট যোগ করেছি।
আসন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.