css - সিএসএস গ্রিড লেআউট সহ গ্রিড আইটেমের ভিতরে উপাদানের সমান উচ্চতা

grid height (2)

আমার কাছে কোনও বৃত্তাকার সারি ট্যাগ ছাড়াই 4+ দৈর্ঘ্যের ডিভের ভিতরে নিবন্ধগুলির ক্রম রয়েছে। আমার এটিকে প্রতি সারি 3 টি নিবন্ধ (কলাম) এর টেবিল হিসাবে উপস্থাপন করতে হবে, সম্ভবত display: grid । প্রতিটি নিবন্ধের শিরোনাম, একটি বিভাগ এবং একটি পাদচরণ রয়েছে।

আমি কীভাবে প্রতিটি শিরোনামের জন্য সমান উচ্চতা, প্রতিটি বিভাগের জন্য সমান উচ্চতা এবং সমান উচ্চতা পাদচরণ, নিবন্ধের প্রতিটি সারির ভিতরে নিবন্ধের নীচে সারিবদ্ধ করব? এটা কি সম্ভব? আমি display: table ব্যবহার করা উচিত?

PS আমাকে স্ক্রিনের প্রস্থের উপর নির্ভর করে ডাব্লিকভাবে সারি প্রতি নিবন্ধের সংখ্যা পরিবর্তন করতে হবে। ধন্যবাদ।

এইচটিএমএল:

body {
  width: 100%;
  max-width: 1024px;
  margin: auto;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container article {
  display: grid;
}

article header {
  background-color: #eeeeee;
}

article section {
  background-color: #cccccc;
}

article footer {
  background-color: #dddddd;
}

<div class="container">
  <article>
    <header>
      <h2>Header</h2>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
      <p>Footer</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
    </footer>
  </article>
  <article>
    <header>
      <h2>Header</h2>
    </header>
    <section>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </section>
    <footer>
      <p>Footer</p>
      <p>Footer</p>
    </footer>
  </article>
</div>

এনবি: জেএস হ্রাস করা হয়েছে।

https://codepen.io/yudnikov/pen/mBvbGW?editors=1100#0

এই সমাধান :

grid-auto-rows: 1fr;

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

আমার মূলত এই সমস্যা ছিল:

এবং grid-auto-rows: 1fr সমাধান এর ফলাফল:

এটা কি সম্ভব?

tldr; হ্যাঁ।

কোডেপেন ডেমো # 1

কোডপেন ডেমো # 2 ( এসএএসএস ব্যবহার করে এবং কনফিগারযোগ্য)

এখানে অসুবিধাটি হ'ল প্রতিটি নিবন্ধটি নিজের মধ্যে একটি গ্রিড এবং অতএব যে কোনও একটি নিবন্ধের অন্যটির সম্পর্কে কোনও জ্ঞান নেই। এ কারণে, শিরোনামের মতো একটি নিবন্ধের উপাদানগুলির জন্য অন্য নিবন্ধে শিরোনামের উচ্চতা অনুযায়ী সামঞ্জস্য করার কোনও উপায় নেই।

সিএসএস গ্রিড দিয়ে এবং কোনও মার্কআপ পরিবর্তন না করেই এটিকে টানানোর আসলে উপায় আছে!

আমরা সিএসএসের সাথে কাঠামোটিকে 'সমতল' করতে পারতাম যে সমস্ত নিবন্ধের সমস্ত উপাদান কেবল একটি সিএসএস গ্রিডের অংশ - নিবন্ধের ধারক।

display: contents সাথে নিবন্ধগুলি সেট করে বর্তমান মার্কআপ পরিবর্তন না করেই এটি সম্ভব

প্রদর্শন: বিষয়বস্তু ( caniuse )

caniuse থেকে:

display: contents ফলে কোনও উপাদানটির বাচ্চাদের উপস্থিতি দেখা দেয় কারণ তারা উপাদানটির পিতা-মাতার সরাসরি সন্তান, উপাদানটিকে এড়িয়ে চলে। সিএসএস গ্রিড বা অনুরূপ লেআউট কৌশল ব্যবহার করার সময় যখন কোনও মোড়কের উপাদানটিকে উপেক্ষা করা উচিত তখন এটি কার্যকর হতে পারে।

সুতরাং আমরা display: contents সঙ্গে নিবন্ধগুলি সেট করুন display: contents

.container article {
  display: contents;
}

এখন সমস্ত শিরোলেখ, বিভাগ এবং পাদচরণ গ্রিড আইটেমগুলি (সরাসরি) গ্রিড আইটেমে পরিণত হয় (ধারকটির - যা display:grid ) যা আমরা grid-template-areas বৈশিষ্ট্য ব্যবহার করে ব্যবস্থা করতে পারি।

.container {
  display: grid;
  grid-column-gap: 1em; /* horizontal gap between articles */
  grid-template-columns: repeat(3, 1fr);

  grid-template-areas: "header1 header2 header3" 
                       "section1 section2 section3"
                       "footer1 footer2 footer3"
                       "header4 header5 header6" 
                       "section4 section5 section6"
                       "footer4 footer5 footer6"
}

যেহেতু প্রতিটি শিরোনাম / বিভাগ / পাদলেখ একেবারে একটি কক্ষ গ্রহণ করে - এটি তাদের একই উল্লম্ব উচ্চতা নিতে বাধ্য করে। সুতরাং উদাহরণস্বরূপ শিরোলেখ 1, শিরোনাম 2 এবং শিরোনাম 3 এর বিষয়বস্তু নির্বিশেষে সবার সমান উচ্চতা থাকবে।

এখন প্রতিটি কক্ষে grid-area বৈশিষ্ট্য নির্ধারণ করুন।

article:nth-child(1) header {
  grid-area: header1;
}
article:nth-child(2) header {
  grid-area: header2;
}
article:nth-child(3) header {
  grid-area: header3;
}
article:nth-child(4) header {
  grid-area: header4;
}
article:nth-child(1) section {
  grid-area: section1;
}
...
article:nth-child(4) section {
  grid-area: section4;
}
article:nth-child(1) footer {
  grid-area: footer1;
}
...
article:nth-child(4) footer {
  grid-area: footer4;
}

শেষ অবধি, নিবন্ধগুলির প্রতিটি সারিটির মধ্যে একটি উল্লম্ব ব্যবধান সেট করুন (নিবন্ধের দ্বিতীয় সারি থেকে শুরু করে):

article:nth-child(n + 4) header {
  margin-top: 1em;
}

ডেমো:

body {
  width: 100%;
  max-width: 1024px;
  margin: auto;
}

.container {
  display: grid;
  grid-column-gap: 1em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "header1 header2 header3" 
                      "section1 section2 section3"
                        "footer1 footer2 footer3"
                        "header4 header5 header6" 
                      "section4 section5 section6"
                        "footer4 footer5 footer6"
}

.container article {
  display: contents;
}

article header {
  background-color: #eeeeee;
}

article section {
  background-color: #cccccc;
}

article footer {
  background-color: #dddddd;
}

article:nth-child(n + 4) header {
  margin-top: 1em;
}

article:nth-child(1) header {
  grid-area: header1;
}
article:nth-child(2) header {
  grid-area: header2;
}
article:nth-child(3) header {
  grid-area: header3;
}
article:nth-child(4) header {
  grid-area: header4;
}
article:nth-child(1) section {
  grid-area: section1;
}
article:nth-child(2) section {
  grid-area: section2;
}
article:nth-child(3) section {
  grid-area: section3;
}
article:nth-child(4) section {
  grid-area: section4;
}
article:nth-child(1) footer {
  grid-area: footer1;
}
article:nth-child(2) footer {
  grid-area: footer2;
}
article:nth-child(3) footer {
  grid-area: footer3;
}
article:nth-child(4) footer {
  grid-area: footer4;
}

<div class="container">
    <article>
        <header>
            <h2>Header</h2>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
        </footer>
    </article>
    <article>
        <header>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
            <p>Footer</p>
        </footer>
    </article>
    <article>
        <header>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
        </footer>
    </article>
    <article>
        <header>
            <h2>Header</h2>
        </header>
        <section>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </section>
        <footer>
            <p>Footer</p>
            <p>Footer</p>
        </footer>
    </article>
</div>

কোডপেন ডেমো)

অবশ্যই, grid-template-areas + grid-area বৈশিষ্ট্যগুলি ব্যবহার না করে আমরা পরিবর্তে একই ফলাফলটি অর্জন করতে grid-row + grid-column বৈশিষ্ট্যগুলি ব্যবহার করতে পারি - কোডেপেন ডেমো

দ্রষ্টব্য: আমি বুঝতে পারি যে উপরেরটি ভার্বোজ এবং ঠিক একটি অনুকূল সমাধান নয় - তবে আমার এখানে বক্তব্যটি এটি সম্ভব । এছাড়াও, আমরা সেই কোডটি আরও পরিষ্কার এবং কনফিগারযোগ্য হিসাবে SASS লুপগুলি ব্যবহার করতে পারি ।

grid-template-areas ব্যবহার করে কোনও প্যাটার্ন পুনরাবৃত্তি করার কিছু উপায় থাকলে এটি খুব সুন্দর হতে পারে:

সিউডো কোড (আইনী নয়):

grid-template-areas: repeat("header1 header2 header3" 
                           "section1 section2 section3"
                           "footer1 footer2 footer3")

... তারপরে আমরা আরও গতিশীল সমাধান পেতে পারি যা এনটি আর্টস সলিউশনের জন্য নবম-সন্তানের মতো গ্রিড-এরিয়া নির্ধারণ করে কাজ করবে:

article:nth-child(3n + 1) header {
  grid-area: header1;
}

ইত্যাদি ... তবে আমি মনে করি না এই মুহূর্তে এটি সম্ভব (বা সম্ভবত এটি প্রয়োজনীয় নয় কারণ subgrids এটি করতে সক্ষম হবে?)

বিশেষ দ্রষ্টব্য:

গ্রিড লেআউট মডিউল স্তর 2 subgrids উপস্থাপন subgrids যা এই সমস্যাটি সমাধান করা সহজ এবং display: contents ব্যবহার না করেই সহজ করে তুলবে display: contents

আমি প্রদর্শন: টেবিল ব্যবহার করা উচিত?

আপনার প্রয়োজন লেআউটটির জন্য - display:table খুব বেশি সাহায্য করবে না। প্রথমত, আপনাকে নিবন্ধগুলিতে যেমন প্রয়োগ করা হয়েছে তেমনভাবে গ্রুপ মার্ক নিবন্ধের উপাদানগুলিতে আপনার মার্কআপটিকে পুরোপুরি পুনর্গঠন করতে হবে, আপনাকে 'নিবন্ধগুলি' দেখতে দেখতে টেবিলটি স্টাইল করতে হবে তবে তারপরেও - টেবিলগুলি মোড়ানো নয় তাই আপনি ' d প্রতি তিনটি নিবন্ধ পৃথক টেবিলের মধ্যে আবৃত করা প্রয়োজন .... এটি সম্ভব হলেও এটি সত্যিই অগোছালো এবং বজায় রাখা শক্ত হবে।

আমার মনে আসা সবচেয়ে সহজ ধারণাটি হ'ল প্রসেসেজ ব্যবহার করা। উদাহরণ স্বরূপ:

.container{
    width: 30%;
    height: 80%;
}

আপনার লেআউটে সম্পূর্ণ নিয়ন্ত্রণ রাখতে, দয়া করে সিএসএস ডিফল্ট মান রেফারেন্সটি দেখুন:

https://www.w3schools.com/cssref/css_default_values.asp

ডিফেরেন্ট ডিভাইসগুলির জন্য, কেবল পৃথক সিএসএস ফাইল ব্যবহার করুন ...