আধুনিক CSS css-ট্রিকস সহ একটি প্রতিক্রিয়াশীল পিরামিড গ্রিড তৈরি করা

.container {
  --s: 40px;  /* size  */
  --g: 5px;   /* gap */

  display: grid;
  grid-template-columns: repeat(auto-fit, var(--s) var(--s));
  justify-content: center;
  gap: var(--g);
}

.container > * {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  margin-bottom: calc((2*var(--s) + var(--g))/(-4*cos(30deg)));
}

আমি ক্লাসিক বারবার ব্যবহার করছি auto-fit ফাঁকা স্থান অনুমতি দেয় হিসাবে অনেক কলাম তৈরি করতে. আইটেমগুলির জন্য, ষড়ভুজ আকার তৈরির জন্য এটি পূর্ববর্তী নিবন্ধ থেকে একই কোড।

আপনি লিখেছেন var(--s) দুইবার এটা কি একটি টাইপো?

এটা! আমি চাই আমার গ্রিডে সর্বদা একটি জোড় সংখ্যক কলাম থাকবে, যেখানে প্রতিটি আইটেম দুটি কলামে বিস্তৃত থাকবে (তাই আমি ব্যবহার করছি grid-column-end: span 2) এই কনফিগারেশনের মাধ্যমে, আমি সহজেই বিভিন্ন লাইনের মধ্যে স্থানান্তর নিয়ন্ত্রণ করতে পারি।

উপরে DevTools-এর একটি স্ক্রিনশট রয়েছে যা গ্রিডের কাঠামো দেখাচ্ছে। যদি, উদাহরণস্বরূপ, আইটেম 2 কলাম 3 এবং 4 স্প্যান করে, আইটেম 4 কলাম 2 এবং 3 স্প্যান করা উচিত, আইটেম 5 কলাম 4 এবং 5 স্প্যান করা উচিত, ইত্যাদি।

প্রতিক্রিয়াশীল অংশের ক্ষেত্রেও একই যুক্তি প্রযোজ্য। প্রতিটি দ্বিতীয় সারির প্রতিটি প্রথম আইটেম একটি কলাম দ্বারা স্থানান্তরিত হয় এবং দ্বিতীয় কলামে শুরু হয়।

এই কনফিগারেশনের সাথে, একটি আইটেমের আকার সমান হবে 2*var(--s) + var(--g). এই কারণে, নেতিবাচক নীচে মার্জিন আগের উদাহরণ থেকে ভিন্ন।

সুতরাং, পরিবর্তে:

margin-bottom: calc(var(--s)/(-4*cos(30deg)));

…আমি ব্যবহার করছি:

margin-bottom: calc((2*var(--s) + var(--g))/(-4*cos(30deg)));

এখনও অভিনব কিছুই নেই, তবে আমাদের কাছে ইতিমধ্যেই 80% কোড রয়েছে। বিশ্বাস করুন বা না করুন, আমরা সম্পূর্ণ গ্রিড সম্পূর্ণ করার থেকে মাত্র একটি সম্পত্তি দূরে। আমরা শুধু এটা সেট আপ করতে হবে grid-column-start কিছু উপাদান সঠিক জায়গায় স্থাপন করতে হবে এবং, আপনি অনুমান করতে পারেন, এখানে জটিল গণনা জড়িত সবচেয়ে কঠিন অংশ আসে।

পিরামিড গ্রিড

ধরুন ধারকটি তার সমস্ত উপাদান সহ পিরামিড ধরে রাখার জন্য যথেষ্ট বড়। অন্য কথায়, আমরা আপাতত প্রতিক্রিয়াশীল অংশটিকে উপেক্ষা করব। আসুন গঠন বিশ্লেষণ করি এবং নিদর্শনগুলি সনাক্ত করার চেষ্টা করি:

বস্তুর সংখ্যা নির্বিশেষে, গঠন একরকম স্থিতিশীল। বাম দিকের আইটেমগুলি (অর্থাৎ, প্রতিটি সারির প্রথম আইটেম) সবসময় একই থাকে (1, 2, 4, 7, 11, এবং আরও)৷ একটি তুচ্ছ সমাধান তাদের ব্যবহার করে লক্ষ্য করা হয় :nth-child() নির্বাচক।

:nth-child(1) { grid-column-start: ?? }
:nth-child(2) { grid-column-start: ?? }
:nth-child(4) { grid-column-start: ?? }
:nth-child(7) { grid-column-start: ?? }
:nth-child(11) { grid-column-start: ?? }
/* etc. */

এই সব পোস্ট পরস্পর সম্পর্কিত. যদি আইটেম 1 কলামে স্থাপন করা হয় xতাই আইটেম 2 কলামে স্থাপন করা উচিত x - 1কলাম 4-এ আইটেম x - 2ইত্যাদি

:nth-child(1) { grid-column-start: x - 0 } /* 0 is not need but useful to see the pattern*/
:nth-child(2) { grid-column-start: x - 1 }
:nth-child(4) { grid-column-start: x - 2 }
:nth-child(7) { grid-column-start: x - 3 }
:nth-child(11) { grid-column-start: x - 4 }
/* etc. */

আইটেম 1 যৌক্তিকভাবে মাঝখানে স্থাপন করা হয়, তাই যদি আমাদের গ্রিড থাকে N কলাম, তারপর x এর সমান N/2::

:nth-child(1) { grid-column-start: N/2 - 0 }
:nth-child(2) { grid-column-start: N/2 - 1 }
:nth-child(4) { grid-column-start: N/2 - 2 }
:nth-child(7) { grid-column-start: N/2 - 3 }
:nth-child(11){ grid-column-start: N/2 - 4 }

এবং যেহেতু প্রতিটি আইটেম দুটি কলাম বিস্তৃত, N/2 এটি কন্টেইনারের মধ্যে থাকা আইটেমগুলির সংখ্যা হিসাবেও দেখা যেতে পারে। সুতরাং আসুন আমাদের যুক্তি আপডেট করুন এবং বিবেচনা করুন N কলামের সংখ্যার পরিবর্তে আইটেমের সংখ্যা থাকা।

:nth-child(1) { grid-column-start: N - 0 }
:nth-child(2) { grid-column-start: N - 1 }
:nth-child(4) { grid-column-start: N - 2 }
:nth-child(7) { grid-column-start: N - 3 }
:nth-child(11){ grid-column-start: N - 4 }
/* etc. */

আইটেম সংখ্যা গণনা করতে, আমি আগের নিবন্ধের মত একই সূত্র ব্যবহার করব:

N = round(down, (container_size + gap)/ (item_size + gap));

পার্থক্য শুধু একটা বস্তুর আকৃতি আর থাকে না var(--s)কিন্তু 2*var(--s) + var(--g)যা আমাদের নিম্নলিখিত CSS দেয়:

.container {
  --s: 40px;  /* size  */
  --g: 5px;   /* gap */

  container-type: inline-size; /* we make it a container to use 100cqw */
}

.container > * {
  --_n: round(down,(100cqw + var(--g))/(2*(var(--s) + var(--g))));
}

.container > *:nth-child(1) { grid-column-start: calc(var(--_n) - 0) }
.container > *:nth-child(2) { grid-column-start: calc(var(--_n) - 1) }
.container > *:nth-child(4) { grid-column-start: calc(var(--_n) - 2) }
.container > *:nth-child(7) { grid-column-start: calc(var(--_n) - 3) }
.container > *:nth-child(11){ grid-column-start: calc(var(--_n) - 4) }
/* etc. */

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

কিভাবে সমস্ত আইটেম সঠিকভাবে স্থাপন করা হয়েছিল? আমরা শুধুমাত্র কিছু আইটেমের জন্য কলাম সংজ্ঞায়িত করেছি, এবং আমরা কোন সারি নির্দিষ্ট করিনি!

এটি CSS গ্রিডের অটো-প্লেসমেন্ট অ্যালগরিদমের শক্তি। আপনি যখন একটি আইটেমের জন্য একটি কলাম সংজ্ঞায়িত করেন, পরবর্তী আইটেমটি স্বয়ংক্রিয়ভাবে তার পরে স্থাপন করা হবে! আমাদের সমস্ত আইটেমের জন্য কলাম এবং সারিগুলির একটি সেট ম্যানুয়ালি নির্দিষ্ট করার দরকার নেই।

বাস্তবায়নে উন্নতি

আপনি এই শব্দগুচ্ছ পছন্দ করেন না :nth-child() নির্বাচক, ডান? আমিও, তাই আসুন তাদের অপসারণ করি এবং একটি ভাল বাস্তবায়ন করি। এই ধরনের একটি পিরামিড গণিতের জগতে সুপরিচিত, এবং আমাদের কাছে ত্রিভুজাকার সংখ্যা বলে কিছু আছে যা আমি ব্যবহার করতে যাচ্ছি। চিন্তা করবেন না, আমি একটি গণিত কোর্স শুরু করব না, তাই আমি যে সূত্রটি ব্যবহার করব তা এখানে:

j*(j + 1)/2 + 1 = index

…কোথায় j একটি ধনাত্মক পূর্ণসংখ্যা (শূন্য সহ)।

নীতিগতভাবে, সব :nth-child নিম্নলিখিত ছদ্ম কোড ব্যবহার করে তৈরি করা যেতে পারে:

for(j = 0; j< ?? ;j++) {
  :nth-child(j*(j + 1)/2 + 1) { grid-column-start: N - j }
}

আমাদের সিএসএসে লুপ নেই, তাই আমি আগের নিবন্ধে একই যুক্তি অনুসরণ করব (আমি আশা করি আপনি পড়বেন, অন্যথায় আপনি কিছুটা হারিয়ে যাবেন)। আমি প্রকাশ করি j সূচক ব্যবহার করে। আমি পূর্ববর্তী সূত্রটি সমাধান করেছি, যা একটি দ্বিঘাত সমীকরণ, কিন্তু আমি নিশ্চিত যে আপনি সেই গণিতে যেতে চান না।

j = sqrt(2*index - 1.75) - .5

আমরা ব্যবহার করে সূচক পেতে পারি sibling-index() উদযাপন। যুক্তি হল প্রতিটি আইটেমের জন্য যদি পরীক্ষা করা হয় sqrt(2*index - 1.75) - .5 একটি ধনাত্মক পূর্ণসংখ্যা।

.container {
  --s: 40px; /* size  */
  --g: 5px; /* gap */

  container-type: inline-size; /* we make it a container to use 100cqw */
}
.container > * {
  --_n: round(down,(100cqw + var(--g))/(2*(var(--s) + var(--g))));
  --_j: calc(sqrt(2*sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j),1);
  grid-column-start: if(style(--_d: 0): calc(var(--_n) - var(--_j)););
}

কখন --_d ভেরিয়েবলের সমান 0এটা মানে --_j একটি পূর্ণসংখ্যা; এবং যখন যে ঘটবে আমি কলাম সেট N - j. যদি আমার পরীক্ষা করার দরকার না থাকে --_j ইতিবাচক কারণ এটি সবসময় ইতিবাচক। ক্ষুদ্রতম সূচক মান হল 1, তাই ক্ষুদ্রতম মান হল --_j হয় 0.

টাডা ! আমরা সবকিছু পরিবর্তন করেছি :nth-child() সিএসএসের তিনটি লাইন সহ নির্বাচক যা যেকোন সংখ্যক আইটেম কভার করে। এর এখন এটি প্রতিক্রিয়াশীল করা যাক!

দায়িত্বশীল আচরণ

আমার 2021 নিবন্ধে, আমি স্ক্রিনের আকারের উপর নির্ভর করে পিরামিড গ্রিড এবং ক্লাসিক গ্রিডের মধ্যে স্যুইচ করেছি। এবার ভিন্ন কিছু করব। এটি সম্ভব না হওয়া পর্যন্ত আমি পিরামিড তৈরি করতে থাকব এবং সেখান থেকে এটি ক্লাসিক গ্রিডে পরিবর্তিত হবে।

আইটেম 1 থেকে 28 একটি পিরামিড গঠন. এর পরে, আমরা একই ক্লাসিক গ্রিড পাই যা আমরা আগের নিবন্ধে তৈরি করেছি। আমাদের নির্দিষ্ট সারির প্রথম আইটেমটিকে লক্ষ্য করতে হবে (29, 42, ইত্যাদি) এবং সেগুলি সরাতে হবে। আমরা এই সময় বাম দিকে কোন মার্জিন সেট করতে যাচ্ছি না, কিন্তু আমাদের তাদের মার্জিন সেট করতে হবে grid-column-start মান 2.

যথারীতি, আমরা বস্তুর সূত্র শনাক্ত করি, সূচক ব্যবহার করে এটি প্রকাশ করি এবং তারপর ফলাফলটি একটি ধনাত্মক পূর্ণসংখ্যা কিনা তা পরীক্ষা করি:

N*i + (N - 1)*(i - 1) + 1 + N*(N - 1)/2 = index

তাই:

i = (index - 2 + N*(3 - N)/2)/(2*N - 1)

কখন? i একটি ধনাত্মক পূর্ণসংখ্যা (শূন্য ব্যতীত), আমরা কলামটি শুরু করতে সেট করি 2.

.container {
  --s: 40px; /* size  */
  --g: 5px; /* gap */

  container-type: inline-size; /* we make it a container to use 100cqw */
}
.container > * {
  --_n: round(down,(100cqw + var(--g))/(2*(var(--s) + var(--g))));

  /* code for the pyramidal grid */
  --_j: calc(sqrt(2*sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j),1);
  grid-column-start: if(style(--_d: 0): calc(var(--_n) - var(--_j)););

  /* code for the responsive grid */
  --_i: calc((sibling-index() - 2 + (var(--_n)*(3 - var(--_n)))/2)/(2*var(--_n) - 1));
  --_c: mod(var(--_i),1);
  grid-column-start: if(style((--_i > 0) and (--_c: 0)): 2;);
}

এর বিরুদ্ধে --_j পরিবর্তনশীল, আমি যদি পরীক্ষা করতে হবে --_i এটি একটি ইতিবাচক মান, কারণ এটি কিছু সূচক মানের জন্য ঋণাত্মক হতে পারে। এই কারণে, প্রথমটির তুলনায় আমার একটি অতিরিক্ত শর্ত রয়েছে।

কিন্তু অপেক্ষা করুন! এটা মোটেও ভালো নয়। আমরা ঘোষণা করছি grid-column-start দুইবার, তাই তাদের মধ্যে শুধুমাত্র একটি ব্যবহার করা হবে। আমাদের শুধুমাত্র একটি ঘোষণা থাকা উচিত, এবং এর জন্য, আমরা a ব্যবহার করে উভয় শর্ত একত্রিত করতে পারি if() বিবৃতি:

grid-column-start:
if(
  style((--_i > 0) and (--_c: 0)): 2; /* first condition */
  style(--_d: 0): calc(var(--_n) - var(--_j)); /* second condition */
);

যদি প্রথম শর্তটি সত্য হয় (প্রতিক্রিয়াশীল গ্রিড), আমরা মান সেট করি 2; অন্যথায় যদি দ্বিতীয় শর্তটি সত্য হয় (পিরামিড গ্রিড), আমরা মান সেট করি calc(var(--_n) - var(--_j)); অন্যথায় আমরা কিছুই করব না।

কেন যে বিশেষ আদেশ?

কারণ প্রতিক্রিয়াশীল গ্রিডগুলিকে উচ্চ অগ্রাধিকার দেওয়া উচিত। নিচের ছবিটি দেখুন:

আইটেম 29 পিরামিড গ্রিডের অংশ কারণ এটি তার সারির প্রথম আইটেম। এর মানে হল যে পিরামিডের অবস্থা সেই বস্তুর জন্য সর্বদা সত্য হবে। কিন্তু যখন গ্রিড প্রতিক্রিয়াশীল হয়ে ওঠে, সেই আইটেমটি প্রতিক্রিয়াশীল গ্রিডের অংশ হয়ে যায় এবং দ্বিতীয় শর্তটিও সত্য। যখন উভয় শর্তই সত্য হয়, তখন দায়ী শর্তের জয় হওয়া উচিত; এই কারণেই আমরা পরীক্ষা করি এটাই প্রথম শর্ত।

চলুন এটি নাটকে দেখা যাক:

উফ! পিরামিড ভালো দেখায়, কিন্তু এর পরে জিনিসগুলি বিপর্যস্ত হয়।

কী ঘটছে তা বোঝার জন্য, আসুন বিশেষভাবে 37 আইটেমটি দেখি। আপনি যদি আগের চিত্রটি পরীক্ষা করেন, আপনি দেখতে পাবেন যে এটি একটি পিরামিড কাঠামোর অংশ। সুতরাং, গ্রিড প্রতিক্রিয়াশীল হয়ে গেলেও, এর অবস্থা এখনও সত্য এবং এটি সূত্র থেকে একটি কলাম মান পায়। calc(var(--_n) - var(--_j)) যা ভাল নয় কারণ আমরা স্বয়ংক্রিয় স্থান নির্ধারণের জন্য এর ডিফল্ট মান রাখতে চাই। এটি অনেক জিনিসের ক্ষেত্রে, তাই আমাদের সেগুলি ঠিক করতে হবে।

সমাধান খুঁজতে, আসুন দেখি পিরামিডে মানগুলি কীভাবে আচরণ করে। তারা সবাই এই সূত্র অনুসরণ করে N - jকোথায়? j একটি ধনাত্মক পূর্ণসংখ্যা। যদি, উদাহরণস্বরূপ, N আমরা পাই 10 এর সমান:

10, 9, 8, 7, ... ,0, -1 , -2

কিছু পয়েন্টে, মানগুলি নেতিবাচক হয়ে যায় এবং যেহেতু নেতিবাচক মানগুলি বৈধ, সেই বস্তুগুলি এলোমেলোভাবে স্থাপন করা হবে, গ্রিডকে ব্যাহত করবে। আমাদের নিশ্চিত করতে হবে যে নেতিবাচক মান উপেক্ষা করা হয়েছে এবং পরিবর্তে ডিফল্ট মান ব্যবহার করা হয়েছে।

আমরা শুধুমাত্র ইতিবাচক মান রাখতে এবং সমস্ত নেতিবাচক মানকে শূন্যে রূপান্তর করতে নিম্নলিখিতগুলি ব্যবহার করি:

max(0, var(--_n) - var(--_j))

আমরা সেট 0 ন্যূনতম থ্রেশহোল্ড হিসাবে (এখানে আরও বেশি) মানগুলি হয়ে যায়:

10, 9, 8, 7, ... , 0, 0, 0, 0

আমরা হয় কলামের জন্য একটি ইতিবাচক মান পাই বা আমরা পাই 0.

কিন্তু আপনি বলেছেন মান ডিফল্ট হওয়া উচিত, না 0.

হ্যাঁ, কিন্তু 0 এর জন্য অবৈধ মান আছে grid-column-startতাই ব্যবহার করে 0 এর মানে হল যে ব্রাউজার এটি উপেক্ষা করবে এবং ডিফল্ট মান ফিরে আসবে!

আমাদের নতুন কোড হল:

grid-column-start:
  if(
    style((--_i > 0) and (--_c: 0)): 2; /* first condition */
    style(--_d: 0): max(0,var(--_n) - var(--_j)); /* second condition */
  );

এবং এটা কাজ করে!

আপনি যত খুশি আইটেম যোগ করতে পারেন, পর্দার আকার পরিবর্তন করতে পারেন এবং সবকিছুই পুরোপুরি ফিট হবে!

আরো উদাহরণ

যথেষ্ট কোড এবং গণিত! আসুন বিভিন্ন আকার ব্যবহার করে আরও বৈচিত্র উপভোগ করি। আমি আপনাকে হোমওয়ার্ক হিসাবে কোড বিশ্লেষণ করতে দেব।

রম্বস গ্রিড

আপনি পরবর্তী তিনটি ডেমোতে উপাদানগুলির মধ্যে ব্যবধান নির্ধারণের জন্য সামান্য ভিন্ন পদ্ধতি দেখতে পাবেন।

অষ্টভুজ গ্রিড

বৃত্ত গ্রিড

এবং আরেকটি ষড়ভুজ গ্রিড:

উপসংহার

আপনার কি মনে আছে যখন আমি আপনাকে বলেছিলাম যে আমরা গ্রিড সম্পূর্ণ করা থেকে এক সম্পত্তি দূরে ছিলাম? তিনি একটি সম্পত্তি (grid-column-start) আমরা আক্ষরিকভাবে আলোচনা করার জন্য একটি সম্পূর্ণ নিবন্ধ প্রয়োজন! এটি দেখায় যে CSS বিকশিত হয়েছে এবং এটির সাথে কাজ করার জন্য একটি নতুন মানসিকতার প্রয়োজন। CSS এখন আর একটি ভাষা নয় যেখানে আপনি কেবল ধ্রুবক মান সেট করেন color: red, margin: 10px, display: flexইত্যাদি

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