สอบถามวิธีการใช้งาน grid ของ html

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

สอบถามวิธีการใช้งาน grid ของ html

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

สอบถามการใช้งาน grid ของ html ค่ะ ว่าสามารถทำให้ช่อง grid ซ้อนทับกับเนื้อหา ได้ยังไงได้บ้างคะ
โดบผลลัพธ์ที่อยากได้ จะ เป็น ลักษณะนี้ คือส่วนของ grid จะเป็นเหมือน bg ไม่เกี่ยวข้องกับ ส่วนของเนื้อหาที่เราใส่ไป
HTML CSS-1.png
HTML CSS-1.png (13.31 KiB) Viewed 1546 times
  • โดยที่ทำตอนนี้ คือ ถ้าเราใส่เนื้อหานอก gird ข้อมูลก็จะอยู่ใต้ gird

    โค้ด: เลือกทั้งหมด

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_billing_note_print </TITLE>
            <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <style>
            body {
                margin-left: auto;
                margin-right: auto;
            }
            .page {
              width: 21cm;
              min-height: 29.7cm;
              padding: 2cm;
              margin: auto;
              border-radius: 5px;
            }
            font{
              font-size: 10px;
              font-family:THNiramitAS;
            }
            .footer {
              position: fixed;
              bottom: 0px;
              left: 0px;
              padding: 10px;
              text-align: center;
              width: 100%;
             }
            table { 
              border: 2px solid rgb(0, 0, 0);
            }
            .grid-container {
              display: grid;
              grid-template-columns: auto auto auto auto auto auto auto auto auto;
              background-color: #000000;
              padding: 2px;
            }
            .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>
        <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>
    ทดสอบบ้อมูล
        </BODY>
        </HTML>
    ผลลัพธ์ที่ได้
    HTML CSS-4.png
    HTML CSS-4.png (10.34 KiB) Viewed 1546 times
  • หรือลองทำแบบบนี้ ใส่ข้อมูล ในช่อง grid ก็จะช่องไม่เท่ากัน ไม่ใช่แบบที่ต้องการ

    โค้ด: เลือกทั้งหมด

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_billing_note_print </TITLE>
            <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        <style>
            body {
                margin-left: auto;
                margin-right: auto;
            }
            .page {
              width: 21cm;
              min-height: 29.7cm;
              padding: 2cm;
              margin: auto;
              border-radius: 5px;
            }
            font{
              font-size: 10px;
              font-family:THNiramitAS;
            }
            .footer {
              position: fixed;
              bottom: 0px;
              left: 0px;
              padding: 10px;
              text-align: center;
              width: 100%;
             }
            table { 
              border: 2px solid rgb(0, 0, 0);
            }
            .grid-container {
              display: grid;
              grid-template-columns: auto auto auto auto auto auto auto auto auto;
              background-color: #000000;
              padding: 2px;
            }
            .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>
        <div class="grid-container">
          <div class="grid-item">ทดสอบข้อมูล</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>
    
        </BODY>
        </HTML>
    ผลจะเป็นแบบนี้ค่ะ
    HTML CSS-5.png
    HTML CSS-5.png (12.98 KiB) Viewed 1546 times
สามารถสร้าง gird ไว้เป็นเหมือน bg ได้ไหมคะ และต้องการให้ grid ที่ทำนั้น เต็มทั้งแผ่นเลยค่ะ
you're the only one treasure💎
ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

Re: สอบถามวิธีการใช้งาน grid ของ html

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

ดูเรื่องการใช้ absolute เพิ่มเติมในการทำเรื่องนี้
you're the only one treasure💎
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 86