CSS Grid-এ গ্যাপ আকার সমাবেশ করুন (grid-gap, grid-column-gap, grid-row-gap)

CSS Grid-এ সারি ও কলামের মাঝপথে গ্যাপ সেট করতে তিনটি প্রোপার্টি রয়েছে:

grid-column-gap প্রোপার্টি

কলামগুলোর মাঝপথে গ্যাপ সেট করে।

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        background-color: green; 
        grid-template-columns: auto auto; 
        padding: 20px; 
        grid-column-gap: 20px; 
      } 
      .ele { 
        background-color: orange; 
        border: 2px solid gray; 
        padding: 35px; 
        font-size: 30px; 
        text-align: center; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Game Board</h1> 
    <div class="container"> 
      <div class="ele">1</div> 
      <div class="ele">2</div> 
      <div class="ele">3</div> 
      <div class="ele">4</div> 
      <div class="ele">5</div> 
      <div class="ele">6</div> 
    </div> 
  </body> 
</html>

grid-row-gap প্রোপার্টি

সারি গুলোর মাঝপথে গ্যাপ সেট করে।

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        background-color: green; 
        grid-template-columns: auto auto; 
        padding: 20px; 
        grid-column-gap: 20px; 
        grid-row-gap: 20px; 
      } 
      .ele { 
        background-color: orange; 
        border: 2px solid gray; 
        padding: 35px; 
        font-size: 30px; 
        text-align: center; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Game Board</h1> 
    <div class="container"> 
      <div class="ele">1</div> 
      <div class="ele">2</div> 
      <div class="ele">3</div> 
      <div class="ele">4</div> 
      <div class="ele">5</div> 
      <div class="ele">6</div> 
    </div> 
  </body> 
</html>

grid-gap প্রোপার্টি (শর্টহ্যান্ড)

সারি এবং কলাম দুটোর গ্যাপ একসাথে সেট করে। আধুনিক সিনট্যাক্স: gap।

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        background-color: green; 
        grid-template-columns: auto auto; 
        padding: 20px; 
        grid-gap: 20px 20px; 
      } 
      .ele { 
        background-color: orange; 
        border: 2px solid gray; 
        padding: 35px; 
        font-size: 30px; 
        text-align: center; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Game Board</h1> 
    <div class="container"> 
      <div class="ele">1</div> 
      <div class="ele">2</div> 
      <div class="ele">3</div> 
      <div class="ele">4</div> 
      <div class="ele">5</div> 
      <div class="ele">6</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: grid-gap: <row-gap> <column-gap>। এক মান দিলে দুটোই একই হয়। আধুনিক ব্রাউজারগুলতে gap প্রোপার্টি গ্রিড এবং ফ্লেক্সবক্স উভয়েই সমর্থিত।