কম্পিউটার

কিভাবে সিএসএস দিয়ে একটি 3-কলাম লেআউট গ্রিড তৈরি করবেন?


সিএসএস সহ একটি 3-কলাম লেআউট গ্রিড তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      padding: 1%;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   * {
      box-sizing: border-box;
   }
   .left, .right, .center {
      float: left;
      width: 33%;
      color: white;
      padding: 10px;
      height: 500px;
      text-align: center;
   }
   .left {
      background-color: tomato;
   }
   .right {
      background-color: teal;
   }
   .center {
      background-color: rgb(166, 71, 255);
   }
   .container:after {
      clear: both;
   }
</style>
</head>
<body>
<h1 style="text-align: center;">Three Column grid example</h1>
<div class="container">
<div class="left">
<h1>Some text on the left</h1>
</div>
<div class="center">
<h1>Some text in center</h1>
</div>
<div class="right">
<h1>Some text on the right</h1>
</div>
</div>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে সিএসএস দিয়ে একটি 3-কলাম লেআউট গ্রিড তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি মিশ্র কলাম লেআউট গ্রিড তৈরি করবেন?

  2. সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে কীভাবে একটি তালিকা গ্রিড ভিউ তৈরি করবেন?

  3. কিভাবে CSS এবং JavaScript দিয়ে একটি প্রসারিত গ্রিড তৈরি করবেন?

  4. কিভাবে CSS দিয়ে একটি 4-কলাম লেআউট গ্রিড তৈরি করবেন?