গ্রিড লেয়াউট – ফ্রি HTML ও CSS কোর্স – ক্লাস ১৩

“গ্রিড লেআউট” একটি ধারণা যা এইচটিএমএল এবং সিএসএস ব্যবহার করে ওয়েবসাইট ডিজাইনের জন্য ব্যবহৃত হয়। গ্রিডের মৌলিক ধারণাটি সারিগুলিকে মৌলিক ব্লক হিসাবে ব্যবহার করে একটি HTML পেজ তৈরি করতে দেয় এবং প্রতিটি সারিটি 12 টি কলামে বিভক্ত করা যায়।

গ্রিডের উপাদানসমূহ:

গ্রিড বিন্যাসে এক বা একাধিক চাইল্ড উপাদান সহ প্যারেন্ট উপাদান থাকে।

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

ডিসপ্লে প্রপার্টি

যখন তার ডিসপ্লে প্রপার্টিটি গ্রিড বা ইনলাইন-গ্রিডে সেট করা হয় তখন কোনও এইচটিএমএল উপাদান গ্রিড ধারক হয়ে যায়।

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The display Property:</h1>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

<p>Set the <em>display</em> property to <em>grid</em> to make a block-level grid container.</p>


</body>
</html>

গ্রিড আইটেমগুলির উল্লম্ব লাইনগুলিকে কলাম বলা হয়। গ্রিড আইটেমগুলির অনুভূমিক লাইনগুলিকে সারি বলা হয়। প্রতিটি কলাম/সারির মধ্যবর্তী স্থানগুলিকে gap বলে।

আপনি নীচের একটি বৈশিষ্ট্য ব্যবহার করে গ্যাপের আকারটি সামঞ্জস্য করতে পারেন:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

সূত্র: http://w3schools.com/

Leave a Comment