কম্পিউটার

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


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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: Arial;
      color: white;
   }
   .left, .right {
      height: 50%;
      width: 50%;
      position: fixed;
      overflow-x: hidden;
      padding-top: 20px;
   }
   .left {
      left: 0;
      background-color: rgb(36, 0, 95);
   }
   .right {
      right: 0;
      background-color: rgb(56, 1, 44);
   }
   .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
   }
   .centered img {
      width: 150px;
      border-radius: 50%;
   }
</style>
</head>
<body>
<h1 style="color: black;">Two column layout grid example</h1>
<div class="left">
<h1>Some random text on the left</h1>
</div>
<div class="right">
<h1>Some random text on the right</h1>
</div>
</body>
</html>

আউটপুট

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

তৈরি করবে

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


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

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

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

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