সিএসএস গ্রিডে কেন্দ্র করে

Question

আমি সিএসএস গ্রিড দিয়ে একটি সাধারণ পৃষ্ঠা তৈরি করার চেষ্টা করছি।

আমি যা করতে ব্যর্থ হচ্ছি তা হ'ল এইচটিএমএল থেকে সংশ্লিষ্ট গ্রিড কোষে পাঠ্যটিকে কেন্দ্র করে।

আমি এবং নির্বাচকদের divভিতরে এবং বাইরে উভয়কে আলাদা আলাদা করে রাখার চেষ্টা করেছি এবং সিএসএসের কয়েকটি বৈশিষ্ট্য নিয়ে কোনও লাভ হয়নি।left_bgright_bg

আমি এটা কিভাবে করবো?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Comments

দয়া করে w3.org/Style/Example/007/center.en.html লিঙ্কটি দেখুন , আমি আশা করি এটি সহায়ক হবে।

— আলী

Answer 1

এই উত্তরের দুটি প্রধান বিভাগ রয়েছে:

1. সিএসএস গ্রিডে কীভাবে প্রান্তিককরণ কাজ করে তা বোঝা যাচ্ছে।
2. সিএসএস গ্রিডে কেন্দ্রীকরণের জন্য ছয়টি পদ্ধতি।

আপনি যদি কেবল সমাধানগুলিতে আগ্রহী হন তবে প্রথম বিভাগটি এড়িয়ে যান।

---

গ্রিড লেআউটটির গঠন এবং ব্যাপ্তি

গ্রিড পাত্রে কেন্দ্রীকরণ কীভাবে কাজ করে তা পুরোপুরি বুঝতে, প্রথমে গ্রিড বিন্যাসের কাঠামো এবং সুযোগটি বোঝা গুরুত্বপূর্ণ।

গ্রিড ধারকটির HTML কাঠামোর তিনটি স্তর রয়েছে:

• ধারক
• আইটেম
• সূচিপত্র

গ্রিড বৈশিষ্ট্য প্রয়োগের ক্ষেত্রে এই স্তরগুলির প্রত্যেকটি অন্যের থেকে স্বতন্ত্র।

সুযোগ একটি গ্রিড ধারক একটি পিতা বা মাতা সন্তান সম্পর্ক সীমাবদ্ধ।

এর অর্থ হ'ল গ্রিডের ধারক সর্বদা পিতামাতার এবং গ্রিড আইটেমটি সর্বদা শিশু। গ্রিডের বৈশিষ্ট্যগুলি কেবল এই সম্পর্কের মধ্যেই কাজ করে।

বাচ্চাদের বাইরে গ্রিড ধারকের উত্সগুলি গ্রিড বিন্যাসের অংশ নয় এবং গ্রিডের বৈশিষ্ট্যগুলি গ্রহণ করবে না। ( subgridবৈশিষ্ট্যটি কার্যকর না হওয়া পর্যন্ত কমপক্ষে নয় , যা গ্রিড আইটেমগুলির বংশধরদের প্রাথমিক ধারকের লাইনের প্রতি সম্মান জানাবে))

উপরে বর্ণিত কাঠামো এবং স্কোপ ধারণাগুলির উদাহরণ এখানে।

টিক-ট্যাক-টো-এর মতো গ্রিডটি কল্পনা করুন।

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

আপনি প্রতিটি কক্ষে এক্স এবং ও এর কেন্দ্রিক চান।

সুতরাং আপনি ধারক স্তরে কেন্দ্রীকরণ প্রয়োগ করুন:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

তবে গ্রিড লেআউটের কাঠামো এবং সুযোগের কারণে, ধারকটিতে justify-itemsগ্রিড আইটেমগুলি কেন্দ্র করে, সামগ্রী নয় (কমপক্ষে সরাসরি নয়)।

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

একই সমস্যা align-items: সামগ্রীটি উপ-পণ্য হিসাবে কেন্দ্রিক হতে পারে তবে আপনি বিন্যাসের নকশাটি হারিয়ে ফেলেছেন lost

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

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

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

jsFizz ডেমো

---

সিএসএস গ্রিডে কেন্দ্রীকরণের জন্য ছয়টি পদ্ধতি

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

এখানে একটি বেসিক 2x2 গ্রিড রয়েছে:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

flexbox

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

আরও নির্দিষ্টভাবে, গ্রিড আইটেমটিকে একটি ফ্লেক্স পাত্রে পরিণত করুন।

এই পদ্ধতিতে কোনও বিরোধ, নির্দিষ্ট লঙ্ঘন বা অন্যান্য সমস্যা নেই। এটি পরিষ্কার এবং বৈধ।

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

সম্পূর্ণ ব্যাখ্যার জন্য এই পোস্টটি দেখুন:

• ফ্লেক্সবক্সে কীভাবে উপাদানগুলি উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্র করবেন

---

গ্রিড বিন্যাস

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

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

---

auto মার্জিন

margin: autoউল্লম্ব এবং অনুভূমিকভাবে গ্রিড আইটেমগুলি কেন্দ্র করতে ব্যবহার করুন ।

grid-item {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

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

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

---

বক্স প্রান্তিককরণ বৈশিষ্ট্য

গ্রিড আইটেমগুলি সারিবদ্ধ করার জন্য নিম্নলিখিত বৈশিষ্ট্যগুলি ব্যবহার করার বিষয়ে বিবেচনা করার সময়, autoউপরের মার্জিনের বিভাগটি পড়ুন ।

• align-items
• justify-items
• align-self
• justify-self

https://www.w3.org/TR/css-align-3/#property-index

---

text-align: center

কোনও গ্রিড আইটেমে সামগ্রী অনুভূমিকভাবে কেন্দ্র করতে, আপনি text-alignসম্পত্তিটি ব্যবহার করতে পারেন ।

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

মনে রাখবেন যে উল্লম্ব কেন্দ্রের জন্য, vertical-align: middleকাজ করবে না।

এর কারণ vertical-alignসম্পত্তিটি কেবল ইনলাইন এবং টেবিল-ঘর ধারকগুলিতে প্রযোজ্য।

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

কেউ বলতে পারে যে display: inline-gridএকটি ইনলাইন-স্তরের ধারক প্রতিষ্ঠিত করে এবং এটি সত্য হবে। সুতরাং vertical-alignগ্রিড আইটেম কেন কাজ করে না ?

কারণটি হ'ল গ্রিড বিন্যাস প্রসঙ্গে আইটেমগুলি ব্লক-স্তরীয় উপাদান হিসাবে বিবেচনা করা হয়।

6.1। গ্রিড আইটেম প্রদর্শন

displayএকটি গ্রিড আইটেমের মান blockified যদি নিদিষ্ট displayএকটি উপাদান একটি গ্রিড ধারক উৎপাদিত একটি ইন-প্রবাহ সন্তানের একটি ইনলাইন-স্তরের মান, এটা তার ব্লক-স্তরের সমতুল্য করার নির্ণয় করে।

একটি ব্লক ফর্ম্যাটিং প্রসঙ্গে , vertical-alignসম্পত্তিটি মূলত এমন কিছু জন্য ডিজাইন করা হয়েছিল, ব্রাউজারটি কোনও ইনলাইন-স্তরের ধারকটিতে একটি ব্লক-স্তরের উপাদান খুঁজে পাওয়ার আশা করে না। এটি অবৈধ এইচটিএমএল।

---

সিএসএস পজিশনিং

শেষ অবধি, একটি সাধারণ সিএসএস কেন্দ্রিক সমাধান রয়েছে যা গ্রিডেও কাজ করে: পরম অবস্থান

বিষয়বস্তু কেন্দ্রের জন্য এটি একটি ভাল পদ্ধতি যা দস্তাবেজের প্রবাহ থেকে সরানো প্রয়োজন। উদাহরণস্বরূপ, আপনি যদি চান:

• কোনও চিত্রের উপরে কেন্দ্রের পাঠ্য বা
• প্রয়োজনীয় ফর্ম ক্ষেত্রগুলির উপরে অ্যাসিরিস্টস (*) রাখুন

position: absoluteকেন্দ্রীভূত হতে হবে এমন উপাদানটি এবং কেবলমাত্র position: relativeপূর্বসূরীর উপর ভিত্তি করে পূর্বসূরীর উপর সেট করুন it's এটার মতো কিছু:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

এই পদ্ধতিটি কীভাবে কাজ করে তার একটি সম্পূর্ণ ব্যাখ্যা এখানে রয়েছে:

• উপাদানগুলি কেন্দ্রিক থাকবে না, বিশেষত যখন পুনরায় আকারের স্ক্রিন

গ্রিড স্পেসে পরম অবস্থান সম্পর্কিত বিভাগটি এখানে:

• https://www.w3.org/TR/css3-grid-layout/#abspos

Comments

হাই মাইকেল, আমি ভাবছিলাম যে প্রতিটি কলামকে সারির ক্ষুদ্রতম কলামটির আকারের আকার দিতে কেবল গ্রিড ব্যবহার করেই এটি সম্ভব?

— কোডসী

@ দ্য কোডসি, আপনার সমস্ত প্রয়োজনীয়তার উপর নির্ভর করে এটি সম্ভব হতে পারে .. আপনার কাছে কোনও কোডের নমুনা রয়েছে? অথবা সমস্ত বিবরণ সহ একটি নতুন প্রশ্ন পোস্ট করা বিবেচনা করুন।

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

হয় grid-container& grid-itemহয় এইচটিএমএল ট্যাগ?

— diEcho

এগুলি কাস্টম এইচটিএমএল ট্যাগ। এই ডেমোটির জন্য আমি যেমন করেছি তেমন আপনি নিজের ট্যাগ তৈরি করতে পারেন। stackoverflow.com/q/36380449/3597276 @ pro.mean

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

এটি একটি দুর্দান্ত উত্তর, ধন্যবাদ। এটা আমাকে বুঝতে পারছি তৈরী আপনার দুটি প্রথম উদাহরণ যে মধ্যবর্তী flexএবং grid, align-itemsথাকার বিষয়টি মতেই একই কিন্তু কিছু কারণে justify-contentহয়েjustify-items

— WoJ

Answer 2

আপনি আপনার পাঠ্যটিকে কেন্দ্র করে ফ্লেক্সবক্স ব্যবহার করতে পারেন। উপায় দ্বারা অতিরিক্ত ধারকগুলির কোনও প্রয়োজন নেই কারণ পাঠ্য বেনামে ফ্লেক্স আইটেম হিসাবে বিবেচিত হয়।

ফ্লেক্সবক্স চশমা থেকে :

ফ্লেক্স ধারকের প্রতিটি ইন-ফ্লো শিশু একটি ফ্লেক্স আইটেম হয়ে যায় এবং প্রতিটি ফ্লেক্স ধারকটির ভিতরে থাকা পাঠ্যের প্রতিটি মজাদার রান একটি বেনামি ফ্লেক্স আইটেমে আবৃত থাকে । তবে, একটি বেনামি ফ্লেক্স আইটেম যাতে কেবল সাদা স্থান থাকে (অর্থাত্ white-spaceসম্পত্তি দ্বারা প্রভাবিত হতে পারে এমন অক্ষর ) রেন্ডার করা হয় না (ঠিক যেমনটি এটি ছিল display:none)।

সুতরাং কেবল গ্রিড আইটেমগুলি ফ্লেক্স পাত্রে ( display: flex) হিসাবে তৈরি করুন, এবং উভয় উল্লম্ব এবং অনুভূমিকভাবে যুক্ত align-items: centerএবং justify-content: centerকেন্দ্র করতে।

এইচটিএমএল এবং সিএসএসের অপ্টিমাইজেশন সম্পাদন করেছেন:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Answer 3

এমনকি ফ্লেক্স ব্যবহার করার চেষ্টা করবেন না; সিএসএস গ্রিডের সাথে থাকুন !! :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

এখানে কেন্দ্রিক কাজ করছে।

আপনি যদি divগ্রিড সেল এর অভ্যন্তরে থাকা কিছু কেন্দ্র রাখতে চান তবে এটি কাজ করার জন্য আপনাকে নেস্টেড গ্রিড নির্ধারণ করতে হবে। (অনুগ্রহ করে সেখানে প্রদর্শিত দুটি উদাহরণ দেখুন)

https://css-tricks.com/snippets/css/complete-guide-grid/

চিয়ার্স!

Comments

আমি নেস্টেড গ্রিডগুলি নিয়ে ভাবছিলাম। আমি এটি অনুমান কিভাবে এটি আমাকে দেখানোর জন্য ধন্যবাদ। সুতরাং আপনি কী ভাবেন গ্রিডের সাথে ফ্লেক্স এড়ানো উচিত বা একত্রিত করা ভাল?

— বীটরুট

একত্রিত করার জন্য এটি সূক্ষ্ম তবে আপনাকে নিশ্চিত হওয়া দরকার যে আপনি কাজের জন্য সঠিক সরঞ্জামটি ব্যবহার করছেন। কিছু সময় সন্ধান করুন এবং রাসেলস উপস্থাপনা দেখুন, যা সিএসএস গ্রিডের বিষয়ে আপনার পক্ষে অনেকটাই স্পষ্ট করে দেবে। youtu.be/3vJE3bVoF-Q

— Konrad Albrecht

আপনি গ্রিড আইটেমগুলিতে সীমানা ব্যবহার করার সময় এই পদ্ধতির সমস্যাটি দেখা দেয় ...

— অ্যান্ড্রু

এটি দ্বারা সংক্ষিপ্ত করা যেতে পারে place-self: center;।

— ডিভনডাহন

Answer 4

সিএসএস স্থান-আইটেমগুলি শর্টহ্যান্ড সম্পত্তি যথাক্রমে প্রান্তিককরণ-আইটেম এবং ন্যায়সঙ্গত আইটেম বৈশিষ্ট্য সেট করে। দ্বিতীয় মানটি সেট না করা থাকলে প্রথম মানটিও এর জন্য ব্যবহৃত হয়।

.parent {
  display: grid;
  place-items: center;
}

Comments

place-itemsবর্তমানে প্রান্তে সমর্থিত নয়

— কনরাড অ্যালব্রেক্ট

Answer 5

ফ্লেক্স ব্যবহার করে দেখুন:

প্লঙ্কার ডেমো: https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

এইচটিএমএল

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Answer 6

তুমি এটা চাও?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Comments

বেশ না। পাঠ্যটিও উল্লম্বভাবে প্রান্তিক করা উচিত।

— বীটরুট 21

ব্যবহার.text{ font-family: Raleway; font-size: large; text-align: center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); }

— রেনাটো সিকির ira ই

Answer 7

আমি জানি এই প্রশ্নটি কয়েক বছর পুরনো, তবে আমি অবাক হয়েছি যে কেউ প্রস্তাবিত হয়নি:

   text-align: center;

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