গ্রিড আইটেমগুলি প্রসারিত করা থেকে সামগ্রী রোধ করুন

Question

টিএল; ডিআর:table-layout: fixed সিএসএস গ্রিডের মতো কিছু আছে কি ?

---

আমি কয়েক মাসের জন্য একটি বড় 4x3 গ্রিড সহ বছর-দেখার ক্যালেন্ডার তৈরি করার চেষ্টা করেছি এবং এর মধ্যে কয়েকদিন ধরে 7x6 গ্রিডগুলি বাসা বেঁধেছে।

ক্যালেন্ডারে পৃষ্ঠাটি পূরণ করা উচিত, যাতে বছরের গ্রিড পাত্রে প্রতিটি প্রস্থ এবং উচ্চতা 100% হয়।

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

এখানে একটি কার্যকারী উদাহরণ: https://codepen.io/loilo/full/ryXLpO/

সরলতার জন্য, সেই কলমে প্রতি মাসে 31 দিন থাকে এবং সোমবার থেকে শুরু হয়।

সমস্যাটি দেখানোর জন্য আমি একটি হাস্যকরভাবে ছোট ফন্টের আকারটিও বেছে নিয়েছি:

গ্রিড আইটেমগুলি (= দিনের ঘরগুলি) পৃষ্ঠায় বেশ কয়েক'শ রয়েছে বলে এটি বেশ ঘনীভূত। এবং যত তাড়াতাড়ি দিনের নম্বর লেবেলগুলি খুব বড় হয়ে উঠবে (উপরের বাম দিকে বোতামগুলি ব্যবহার করে কলমের ফন্টের আকারটি নিয়ে দ্বিধায় খেলতে বোধ করবেন) গ্রিডটি কেবল আকারে বৃদ্ধি পাবে এবং পৃষ্ঠার শরীরের আকার ছাড়িয়ে যাবে।

এই আচরণ রোধ করার কোনও উপায় আছে কি?

আমি প্রথম দিকে আমার বছরের গ্রিডটি প্রস্থ এবং উচ্চতায় 100% হওয়ার ঘোষণা দিয়েছিলাম যাতে সম্ভবত এটি শুরু করার পয়েন্ট, তবে আমি গ্রিড-সম্পর্কিত কোনও সিএসএস বৈশিষ্ট্য খুঁজে পাইনি যা প্রয়োজনটি ফিট করে।

দাবি অস্বীকার: আমি সচেতন যে সিএসএস গ্রিড লেআউটটি ব্যবহার না করে that ক্যালেন্ডারের স্টাইল করার বেশ সহজ উপায় রয়েছে। যাইহোক, এই প্রশ্নটি সুনির্দিষ্ট উদাহরণটি সমাধান করার চেয়ে বিষয়টিতে সাধারণ জ্ঞান সম্পর্কে বেশি।

Comments

পরিবর্তে আপনি কি হতে চান? প্রতিটি কক্ষের ফন্টটি যে কোনও আকারের হতে পারে এবং এটি গ্রিডের ঘরের আকারকে বাড়ায় না?

— মাইকেল কোকার

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

— লোইলো

আমি মূলত সারণীর-বিন্যাস একটি গ্রিড-layouty সংস্করণ খুঁজছি: সুনির্দিষ্ট করা থাকে (দেখুন: codepen.io/loilo/pen/dvxpvq?editors=1100 )

— Loilo

পুরো সিএসএস গ্রিডের স্পেসিফিকেশনের ক্ষেত্রে এটি সবচেয়ে বড় ব্যথা। তাদের প্রয়োজন এমন একটি সেটিংস হওয়া দরকার যেখানে গ্রিড অঞ্চলগুলি তাদের কোনও পিতামাতার গ্রিড ধারকগুলির মাত্রা থেকে বাঁচতে পারে না! যেমনটি, এটি গভীরভাবে নেস্টেড গ্রিড কাঠামোর জন্য দুঃস্বপ্ন।

— লনি সেরা

Answer 1

ডিফল্টরূপে, গ্রিড আইটেম তার সামগ্রীর আকারের চেয়ে ছোট হতে পারে না।

গ্রিড আইটেমগুলির প্রাথমিক আকার থাকে min-width: autoএবং min-height: auto।

তোমার গ্রিড আইটেম সেটিং দ্বারা এই আচরণ পাল্টাতে পারেন min-width: 0, min-height: 0অথবা overflowকোনো ছাড়া অন্য মান visible।

অনুমান থেকে:

6.6। গ্রিড আইটেমগুলির স্বয়ংক্রিয় ন্যূনতম আকার

গ্রিড আইটেম, এই স্পেসিফিকেশন সংজ্ঞায়িত যে জন্য একটি অধিক যুক্তিসঙ্গত ডিফল্ট নূন্যতম আকারের প্রদান autoমান min-width/ min-heightএছাড়াও গ্রিড আইটেম যার নির্দিষ্ট অক্ষ মধ্যে একটি স্বয়ংক্রিয় নূন্যতম আকারের প্রযোজ্য overflowহয় visible। (প্রভাবটি নমনীয় আইটেমগুলির উপর চাপানো স্বয়ংক্রিয় সর্বনিম্ন আকারের সাথে সাদৃশ্য is)

এখানে ফ্লেক্স আইটেমগুলি কভার করার আরও বিশদ বিবরণ দেওয়া হয়েছে তবে এটি গ্রিড আইটেমগুলিতেও প্রযোজ্য:

• নমনীয় আইটেমগুলি অতীতের সামগ্রীর আকার সঙ্কুচিত করে না কেন?

এই পোস্টটি নেস্টেড পাত্রে এবং বড় ব্রাউজারগুলির মধ্যে পরিচিত রেন্ডারিং পার্থক্যগুলির সাথে সম্ভাব্য সমস্যাগুলিও কভার করে ।

---

আপনার বিন্যাস ঠিক করতে, আপনার কোডে এইগুলি সমন্বয় করুন:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

সংশোধিত কোডেন

---

1fr বনাম minmax(0, 1fr)

উপরের সমাধানটি গ্রিড আইটেম স্তরে পরিচালনা করে। একটি ধারক স্তরের সমাধানের জন্য, এই পোস্টটি দেখুন:

• মিনম্যাক্স (0, 1 এফআর) কীভাবে দীর্ঘ উপাদানগুলির জন্য কাজ করে যখন 1fr না করে?

Comments

কি দারুন. এটি একই সময়ে আকর্ষণীয় এবং আকর্ষণীয়, এবং আমি অবশ্যই চেষ্টা করেছি কেবলমাত্র চেষ্টা করেই না। আপনি কি সেই তথ্যটির জন্য নির্দিষ্ট দৃষ্টিতে এক নজরে দেখেছেন? কারণ গুগল করার জন্য কী না জানার পরে, আমি এর আগে চেষ্টা করেছিলাম, তবে আমি ভুল বিভাগটি পড়েছি (সমস্যার ভুল কারণটি শেষ করে)।

— লোইলো

আমি ফ্লেক্স আইটেমগুলি নিয়ে আগে এই সমস্যায় পড়েছিলাম । ফ্লেক্স এবং গ্রিড আইটেমগুলির মধ্যে অনেক মিল রয়েছে বলে আমি অনুভব করেছি যে আচরণটি একই রকম হতে পারে এবং অনুমানের সেই অংশে শূন্য হয়।

— মাইকেল বেঞ্জামিন

এটি উচ্চতা স্থির করে, তবে এটি অনুভূমিক দিকে বাড়তে থাকে, সহায়তা min-width: 0;করে না। আমি কিছু অনুপস্থিত করছি?

— ব্যবহারকারী

নেস্টেড গ্রিডগুলির জন্য আমাদের এটি সমস্ত স্তরে প্রয়োগ করা দরকার। কিন্তু আমি সত্যিই এখানে ভোট দিন আসেন এবং তোমাকে ধন্যবাদ ..

— দক্ষতা

@PragyAgarwal .. stackoverflow.com/users/3597276/michael-b?tab=answers :-)

— মাইকেল বেঞ্জামিন

Answer 2

পূর্ববর্তী উত্তর প্রশংসনীয় ভাল, কিন্তু আমি সেখানে কোনো সমস্যা? চেয়েছিলেন হয় গ্রিডের জন্য একটি নির্দিষ্ট বিন্যাস সমতুল্য, আপনি শুধু লিখতে প্রয়োজন minmax(0, 1fr)পরিবর্তে 1frআপনার ট্র্যাক আকার।

Comments

আমি পূর্ববর্তী, গৃহীত উত্তরের চেয়ে এই পদ্ধতির প্রস্তাব দিই।

— থিয়েরি প্রস্ট

যদিও এটি কাজ করে, আমি এর কিছুটা বুঝতে পারি না ... আপনি সম্ভবত ব্যাখ্যা করতে পারেন কেন এটি কাজ করে? মিনম্যাক্স (0, 1fr) কী করছে? এটি কি সর্বদা 0 হওয়া উচিত নয়? আমি বিভ্রান্ত :(

— বায়ারস

minmax(0, 1fr)কাজ করে কারণ 1frসত্যিকার অর্থে একটি শর্টহ্যান্ড minmax(auto,1fr)যা মূল প্রশ্নের সঠিক মান নয়।

— মিক্কো রেন্টালাইনেন

অতিরিক্ত বিবরণের জন্য, github.com/w3c/csswg-drafts/issues/1777 দেখুন

— মিক্কো রেন্টালাইনেন

Answer 3

বিদ্যমান উত্তরগুলি বেশিরভাগ ক্ষেত্রে সমাধান করে। যাইহোক, আমি এমন একটি ক্ষেত্রে ছুঁড়েছি যেখানে গ্রিড-সেলটির সামগ্রী থাকা দরকার overflow: visible। আমি একে একে একটি মোড়কের মধ্যে একেবারে অবস্থানের মাধ্যমে সমাধান করেছি (আদর্শ নয়, তবে আমি জানি সেরা), এটির মতো:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

Answer 4

গ্রিড আইটেমের সর্বাধিক প্রস্থ সেট করার মতো কাজ করার একটি সহজ কাজ:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }

Comments

আমি সত্যি কথা বলতে একটু বিভ্রান্ত হয়ে পড়েছি। আপনার কোডটি মূল প্রশ্নটির সাথে মোটেই সাদৃশ্যপূর্ণ নয় এবং সর্বোচ্চ-প্রস্থ: গ্রিড আইটেমগুলিতে 100% প্রয়োগ করা (ন্যূনতম প্রস্থের পরিবর্তে: 0 গৃহীত সমাধান থেকে 0) সমস্যাটি সমাধান করবে না ...

— লোইলো

সর্বোচ্চ-প্রস্থ এটির সন্তানের প্রস্থের তুলনায় পুনরায় সামঞ্জস্য করতে বাধা দেবে

— পেড্রো জেআর

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

— অনুশীলনের

ঠিক আছে, ভাল লাগছে। তবে আপনি এখনও আমার জন্য একটি উক্তি বিবেচনা করবেন না

— পেড্রো জেআর

কথায় কথায় সত্য বলতে: ১. এটি তিন বছরেরও বেশি সময় ধরে একটি সমাধান সমস্যা। ২. আপনার উত্তরটি সঠিকভাবে পরীক্ষা করা হয়নি (ব্রাউজার এমনকি আপনার গ্রিডকে স্বীকৃতি দেওয়ার আগে আপনার সিএসএসে একাধিক টাইপস রয়েছে যা ঠিক করা দরকার)। এবং ৩. আপনার উত্তরটি আসলে আমার প্রশ্নের উদাহরণটি পূরণ করে নি (অন্যথায় আপনি বুঝতে পেরেছেন যে আপনার সমাধানটি এর সাথে কাজ করে না)। - তাই না, আমি দুঃখিত, কিন্তু আমি কোনও উক্তি বিবেচনা করছি না।

— লোইলো