วิธีสร้างเค้าโครงกริด CSS สำหรับโมดูล Divi

สำหรับผู้ที่คุ้นเคยกับการสร้างเว็บไซต์ใน Divi อยู่แล้ว การสร้างเค้าโครงกริดแบบกำหนดเองถือเป็นส่วนสำคัญของ Divi Builder เพียงสร้างแถวและเลือกจากเค้าโครงคอลัมน์ที่มีอยู่แล้วภายในหลายแบบสำหรับแถวนั้น เมื่อวางเค้าโครงคอลัมน์แล้ว เราก็เพิ่มเนื้อหา/โมดูลที่เราต้องการในแต่ละคอลัมน์ แต่ถ้าเราต้องการโครงร่างกริดเพิ่มเติมสำหรับโมดูลเหล่านั้นล่ะ

ในบทช่วยสอนนี้ เราจะสำรวจวิธีขยายเค้าโครงกริดของ Divi โดยการสร้างเค้าโครงกริด CSS สำหรับโมดูล Divi ภายในคอลัมน์เดียว คุณสมบัติ CSS Grid (พร้อมกับ CSS Flex) เป็นวิธียอดนิยมในการสร้างเค้าโครงกริดที่คาดเดาได้และตอบสนองได้สำหรับเนื้อหาที่มี CSS เพียงไม่กี่บรรทัด ด้วยสิ่งนี้ เราสามารถจัดระเบียบโมดูลทั้งหมดในคอลัมน์ให้เป็นกริดที่ตอบสนองได้อย่างเต็มที่ คิดว่าเป็นเค้าโครงกริดเพิ่มเติมสำหรับโมดูลที่คุณสามารถเพิ่มลงในคอลัมน์ Divi ใดก็ได้ แต่สิ่งที่ดีที่สุดอย่างหนึ่งเกี่ยวกับเทคนิคนี้คือแต่ละโมดูลที่อยู่ติดกันจะมีความสูงและความกว้างเท่ากันโดยไม่ต้องยุ่งยากกับการพยายามทำเช่นนี้โดยใช้ค่าช่องว่างภายในที่กำหนดเองหรือค่าความสูงในแต่ละโมดูล

บางทีอาจเป็นการดีที่สุดที่เราเพียงแค่กระโดดเข้ามาและแสดงให้คุณเห็นว่ามันทำงานอย่างไร

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

และนี่คือการดูเทคนิคเดียวกันโดยใช้โมดูลและการออกแบบต่างๆ จาก Fitness Gym Layout Pack

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างเค้าโครงตาราง CSS ที่กำหนดเองสำหรับโมดูล Divi

ส่วนที่ 1: การเพิ่มโมดูลลงในคอลัมน์ Divi

ก่อนที่เราจะจัดระเบียบโมดูลของเราให้เป็นเลย์เอาต์กริด ก่อนอื่น ให้เพิ่มโมดูลทั้งหมดที่เราต้องการใช้ในคอลัมน์ของเราก่อน

ในการเริ่มต้น ให้สร้างแถวหนึ่งคอลัมน์ใหม่ไปยังส่วนปกติที่เป็นค่าเริ่มต้นใน Divi Builder

การสร้างโมดูล

ภายในคอลัมน์ของแถว ให้เพิ่มโมดูลข้อความใหม่ จากนั้นอัปเดตการตั้งค่าเนื้อหาของโมดูลดังนี้:

1. เพิ่มหัวข้อ H2 เหนือข้อความย่อหน้าของเนื้อหาเริ่มต้น
2. สีพื้นหลัง: #333333

จากนั้นอัปเดตการตั้งค่าการออกแบบดังนี้:

1. แบบอักษรของข้อความ: Poppins
2. สีข้อความ: เบา
3. เลือกแท็บ H2 ภายใต้ Heading Text
4. ส่วนหัว 2 รูปแบบตัวอักษร: TT
5. เบาะ: 10% บน, 10% ล่าง, 10% ซ้าย 10% ขวา

หมายเหตุ : เพื่อความเรียบง่าย เราจะใช้โมดูลข้อความหลายโมดูลที่มีสีพื้นหลังต่างๆ เพื่อแสดงความแตกต่างระหว่างแต่ละโมดูล แต่ตามที่ฉันจะอธิบายทีหลัง คุณสามารถใช้โมดูลต่างๆ ร่วมกันได้ตามต้องการ (โมดูล Blurb โมดูลการเรียกร้องให้ดำเนินการ โมดูลแบบฟอร์มการติดต่อ ฯลฯ)

เปิดมุมมองเลเยอร์ (ไม่บังคับ) และสร้างโมดูลข้อความถัดไปดังนี้:

1. ทำซ้ำโมดูลข้อความ
2. เปิดการตั้งค่าข้อความสำหรับโมดูลที่ซ้ำกัน
3. อัปเดตสีพื้นหลัง
   • สีพื้นหลัง: #4c6085

ทำซ้ำขั้นตอนนี้เพื่อสร้างโมดูลข้อความที่สามดังนี้:

1. ทำซ้ำโมดูลข้อความก่อนหน้า
2. เปิดการตั้งค่าข้อความสำหรับโมดูลที่ซ้ำกัน
3. อัปเดตสีพื้นหลัง
   • สีพื้นหลัง: #39a0ed

ทำซ้ำขั้นตอนนี้อีกครั้งเพื่อสร้างโมดูลข้อความที่สี่ดังนี้:

1. ทำซ้ำโมดูลข้อความก่อนหน้า
2. เปิดการตั้งค่าข้อความสำหรับโมดูลที่ซ้ำกัน
3. อัปเดตสีพื้นหลัง
   • สีพื้นหลัง: #13c4a3

ในการสร้างสี่โมดูลถัดไป ให้ใช้คุณสมบัติการเลือกหลายรายการเพื่อเลือกทั้งสี่โมดูล จากนั้นคัดลอกและวางโมดูลในคอลัมน์เดียวกันเพื่อสร้างโมดูลข้อความทั้งหมดแปดโมดูล

ส่วนที่ 2: การสร้าง CSS Grid Layout สำหรับโมดูล

เมื่อโมดูลของเราพร้อมแล้ว เราก็พร้อมที่จะสร้าง CSS Grid สำหรับโมดูลเหล่านั้น

การตั้งค่าแถว

สำหรับตัวอย่างนี้ เรากำลังใช้เค้าโครงแบบหนึ่งคอลัมน์ เพื่อให้เราสามารถแสดงตารางโมดูลของเราในรูปแบบเต็มความกว้าง ดังนั้น เราจะต้องอัปเดตการตั้งค่าแถวเพื่อให้แน่ใจว่าแถวนั้นขยายเต็มความกว้างของหน้า นอกจากนี้เรายังต้องนำความกว้างของรางน้ำเริ่มต้นออกเพื่อไม่ให้มีการเพิ่มระยะขอบเพิ่มเติมในโมดูลของเรา

เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

การเพิ่ม CSS Grid ให้กับคอลัมน์เพื่อสร้าง Grid Layout สำหรับโมดูล

นี่เป็นขั้นตอนสำคัญในบทช่วยสอนที่สร้างเลย์เอาต์สำหรับโมดูลโดยใช้คุณสมบัติ CSS Grid

ในการทำเช่นนี้ เราจะเพิ่ม CSS สามบรรทัดลงในคอลัมน์ ซึ่งจะกำหนดเลย์เอาต์ของโมดูลของเรา

เปิดการตั้งค่าคอลัมน์และภายใต้แท็บขั้นสูง ให้วาง CSS ต่อไปนี้ภายในองค์ประกอบหลัก:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

บรรทัดแรกของ CSS จะวางเนื้อหา (หรือโมดูล) ตามโมดูลกริด CSS

display:grid

บรรทัดที่สองของ CSS กำหนดเทมเพลตคอลัมน์ของกริด ในกรณีนี้ ตารางจะมีสี่คอลัมน์ที่มีความกว้างแต่ละ 25% (ดูภาพหน้าจอด้านบน)

ตารางเทมเพลตคอลัมน์: 25% 25% 25% 25%

บรรทัดที่สามของ CSS ระบุว่าแถวจะถูกสร้างขึ้นโดยอัตโนมัติตามความจำเป็นโดยตั้งค่าขนาด (หรือความสูง) เป็นอัตโนมัติ ซึ่งหมายความว่าความสูงของแต่ละแถวจะถูกกำหนดโดยความสูงแนวตั้งของเนื้อหา (หรือโมดูล) ภายในแถว (ดูภาพหน้าจอด้านบน)

กริดอัตโนมัติแถว: auto

ปรับเค้าโครงกริดบนมือถือ

เราจะต้องปรับเค้าโครงกริดบนอุปกรณ์มือถือตามความจำเป็น

ในการดำเนินการนี้ เราเพียงแค่ต้องเพิ่ม CSS เพิ่มเติมให้กับแต่ละแท็บเล็ตในมือถือที่เปลี่ยนจำนวนคอลัมน์และความกว้างของแต่ละคอลัมน์

ในตัวอย่างนี้ เราจะเปลี่ยนเค้าโครงกริดสำหรับโมดูลบนแท็บเล็ตให้เป็นสองคอลัมน์ที่มีความกว้างแต่ละ 50%

เปิดตัวเลือกการตอบสนองและเลือกแท็บแท็บเล็ตภายใต้องค์ประกอบหลักและวาง CSS ต่อไปนี้:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

สำหรับการแสดงโทรศัพท์ เราต้องการเค้าโครงแบบคอลัมน์เดียว ในการสร้างสิ่งนี้ ให้วาง CSS ต่อไปนี้ภายใต้องค์ประกอบหลักของแท็บโทรศัพท์:

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

ส่วนที่ 3: การเปลี่ยนแปลงรายการกริด (หรือโมดูล)

การเพิ่มโมดูลใหม่ให้กับกริดและปฏิกิริยาอย่างไร

เมื่อแต่ละโมดูลอยู่ในกริด CSS การเพิ่มโมดูลใหม่จะเป็นการผลักโมดูลอื่นๆ ไปทางขวา และสร้างแถวใหม่โดยอัตโนมัติตามต้องการ

เนื่องจากเราต้องการโมดูลอีกหนึ่งโมดูลสำหรับเลย์เอาต์นี้ ให้ทำซ้ำโมดูลข้อความแรกเพื่อดูว่าโมดูลอื่นๆ ปรับภายในกริดอย่างไร

วิธีที่ Grid ตอบสนองต่อโมดูลที่มีเนื้อหาต่างกัน

ขณะนี้ โมดูลข้อความทั้งหมดมีจำนวนเนื้อหาเท่ากัน ดังนั้นจึงเป็นเรื่องยากที่จะเห็นว่าเลย์เอาต์กริดจัดการกับโมดูลที่มีปริมาณเนื้อหาต่างกันอย่างไร หากต้องการดูวิธีการทำงาน ให้เปลี่ยนจำนวนข้อความย่อหน้าในแต่ละโมดูล โปรดสังเกตว่าโมดูลต่างๆ จะยังคงความสูงเท่าโมดูลที่มีเนื้อหาส่วนใหญ่อยู่ในแถวเดียวกัน และความสูงของแถวจะถูกกำหนดโดยโมดูลที่มีเนื้อหามากที่สุด (หรือความสูงในแนวตั้ง)

การเปลี่ยนตำแหน่งของโมดูล (หรือรายการกริด)

รายการ CSS Grid สามารถวางตำแหน่งได้โดยใช้ระบบกำหนดหมายเลขบรรทัดในตัวของโมดูลกริด แต่ละบรรทัดบนตารางแสดงถึงตัวเลข สำหรับคอลัมน์ หมายเลขบรรทัดเริ่มต้นที่ 1 และดำเนินการต่อในแนวนอน หมายเลขบรรทัดแต่ละบรรทัดอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของแต่ละคอลัมน์ ดังนั้น สำหรับโครงสร้างสี่คอลัมน์ของเรา หมายเลขบรรทัดเริ่มต้นที่ 1 ทางด้านซ้ายของคอลัมน์แรก และสิ้นสุดที่ 5 ทางด้านขวาของคอลัมน์ที่สี่ และเนื่องจากเรามีสามแถว หมายเลขบรรทัดสำหรับแถวจึงเริ่มต้นที่ 1 ที่ด้านบนสุดของแถวแรกและไปต่อที่ 4 ที่ด้านล่างของแถวที่สาม

ในการเปลี่ยนตำแหน่งของโมดูล (หรือรายการกริด) ใน CSS Grid เราสามารถกำหนดตำแหน่งที่ต้องการวางโมดูลบางตัวในกริดได้ การดำเนินการนี้จะแทนที่ตำแหน่งเริ่มต้นของโมดูลในกริด

สำหรับตัวอย่างนี้ เราจะย้ายโมดูลข้อความแรกไปยังตำแหน่งอื่น ในการดำเนินการนี้ เราต้องเพิ่ม CSS สองบรรทัดลงในโมดูล

เปิดการตั้งค่าสำหรับโมดูลข้อความแรกและวาง CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

grid-column: 2/4;
grid-row: 2/3;

บรรทัดแรกของ CSS กำหนดตำแหน่งของโมดูล (หรือรายการกริด) ในแนวนอนโดยบอกให้โมดูลเริ่มต้นในคอลัมน์บรรทัดที่ 2 และสิ้นสุดที่บรรทัดของคอลัมน์ 4

ตารางคอลัมน์: 2/4

บรรทัดที่สองของ CSS กำหนดตำแหน่งของโมดูล (หรือรายการกริด) ในแนวตั้งโดยบอกให้โมดูลเริ่มต้นที่บรรทัดที่ 2 และสิ้นสุดที่บรรทัดที่ 3

ตารางแถว: 2/3

สำหรับหน้าจอแท็บเล็ตและโทรศัพท์ เราต้องการนำโมดูลกลับไปยังตำแหน่งเดิม สิ่งนี้มีประโยชน์ในการรักษาส่วนหัวหลักของคุณไว้ที่ด้านบนสุดของหน้า

ในการดำเนินการนี้ ให้เลือกแท็บแท็บเล็ตภายใต้ตัวเลือกการตอบสนองสำหรับองค์ประกอบหลัก และวาง CSS ต่อไปนี้:

grid-column: auto;
grid-row: auto;

ตอนนี้ตำแหน่งของโมดูลจะกลับไปที่โฟลว์เดิม (อัตโนมัติ) ของรายการกริด

ไปข้างหน้าและวางตำแหน่งโมดูลอีกสองสาม (หรือรายการกริด) โดยใช้วิธีนี้

เราจะจัดตำแหน่งโมดูลข้อความที่สาม (ตอนนี้อยู่ในคอลัมน์ที่สองของแถวบนสุด) ที่ตำแหน่งชุดใหม่ภายในกริด ตำแหน่งใหม่นี้จะเริ่มต้นที่คอลัมน์บรรทัดที่ 1 และสิ้นสุดที่คอลัมน์บรรทัดที่ 2 และเริ่มต้นที่แถวบรรทัดที่ 2 และสิ้นสุดที่แถวที่ 4

ในการดำเนินการนี้ ให้เปิดการตั้งค่าสำหรับโมดูลข้อความที่สามแล้ววาง CSS ที่กำหนดเองต่อไปนี้ลงในองค์ประกอบหลัก:

grid-column: 1/2;
grid-row: 2/4;

ตอนนี้เราสามารถเปลี่ยนตำแหน่งกลับเป็นบนมือถือโดยเพิ่ม CSS ต่อไปนี้สำหรับแท็บเล็ต:

grid-column: auto;
grid-row: auto;

สำหรับการจัดวางตารางโมดูลแบบกำหนดเองขั้นสุดท้าย เราจะจัดตำแหน่งโมดูลข้อความที่เจ็ด (ตอนนี้อยู่ในคอลัมน์สุดท้ายของแถวที่สอง) ที่ตำแหน่งชุดใหม่ภายในกริด ตำแหน่งใหม่นี้จะเริ่มต้นที่คอลัมน์บรรทัดที่ 4 และสิ้นสุดในคอลัมน์บรรทัดที่ 5 และเริ่มต้นที่แถวบรรทัดที่ 2 และสิ้นสุดที่บรรทัดที่ 4

ในการดำเนินการนี้ ให้เปิดการตั้งค่าสำหรับโมดูลข้อความที่เจ็ด และวาง CSS ที่กำหนดเองต่อไปนี้ลงในองค์ประกอบหลัก:

grid-column: 4/5;
grid-row: 2/4;

จากนั้นวาง CSS ต่อไปนี้สำหรับการแสดงผลแท็บเล็ตเหมือนที่เราทำกับโมดูลก่อนหน้า

grid-column: auto;
grid-row: auto;

การจัดแนวเนื้อหาโมดูล (หรือรายการกริด) ให้อยู่ตรงกลาง

เราสามารถหยุดอยู่ตรงนั้นได้ แต่เราจะพลาดวิธีที่เป็นประโยชน์ในการจัดแนวเนื้อหาโมดูลของเรา (หรือจัดกึ่งกลาง) ในแนวตั้ง การมีเนื้อหาโมดูล (หรือรายการกริด) ที่กึ่งกลางแนวตั้งเป็นคุณลักษณะที่สะดวกของเค้าโครงกริด เนื่องจากจะทำให้ทุกอย่างมีความสมมาตรและสวยงามยิ่งขึ้น

ในการทำเช่นนี้ เราสามารถเพิ่มข้อมูลโค้ด CSS ที่ใช้คุณสมบัติ flex CSS เพื่อจัดแนวและปรับเนื้อหาให้อยู่ตรงกลาง เราจำเป็นต้องเพิ่มข้อมูลโค้ดนี้ในแต่ละโมดูล ในการทำเช่นนี้ เราสามารถใช้ multiselect เพื่อเลือกโมดูลทั้งหมด (หรือรายการกริด) ที่ยังไม่มี CSS แบบกำหนดเองไปยังองค์ประกอบหลัก (เราไม่ต้องการแทนที่โมดูลเหล่านั้นด้วยตำแหน่งที่กำหนดเอง) จากนั้นเปิดการตั้งค่าองค์ประกอบโดยเปิดการตั้งค่าสำหรับหนึ่งในโมดูลที่เลือก ภายใต้แท็บ Advanced ให้วาง CSS tot he Main Element ต่อไปนี้:

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

ตอนนี้ เราสามารถกลับไปที่อีกสามโมดูลของเรา (โมดูล #1, #3 และ #7) ทีละรายการ และเพิ่มข้อมูลโค้ด CSS เดียวกันนอกเหนือจาก CSS ที่ใช้เพื่อให้โมดูลมีตำแหน่งที่กำหนดเองบนกริด ตรวจสอบให้แน่ใจว่าได้เพิ่มข้อมูลโค้ด CSS ภายใต้ CSS ที่มีอยู่สำหรับทั้งเดสก์ท็อปและแท็บเล็ต

เพิ่ม CSS ให้กับโมดูลข้อความแรก

เพิ่ม CSS ไปยังโมดูลข้อความที่สาม

เพิ่ม CSS ให้กับโมดูลข้อความที่เจ็ด

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายของเค้าโครงกริด CSS ที่กำหนดเองสำหรับโมดูลข้อความของเรา

สังเกตว่าโมดูล (หรือรายการกริด) ปรับอย่างราบรื่นบนความกว้างของเบราว์เซอร์ต่างๆ เพื่อการออกแบบที่ตอบสนองได้ดี

ตัวอย่างการใช้โมดูลและการออกแบบต่างๆ

เป็นการยากที่จะเห็นศักยภาพเต็มที่ของการใช้กริด CSS เพื่อสร้างโครงร่างโมดูลโดยใช้โมดูลข้อความเท่านั้น ดังนั้น ฉันคิดว่าฉันจะแสดงให้คุณเห็นการออกแบบที่ฉันสร้างขึ้นโดยใช้ขั้นตอนเดียวกันในบทช่วยสอนนี้ โดยใช้โมดูลและองค์ประกอบการออกแบบต่างๆ จาก Fitness Gym Layout Pack ของเรา

นี่มัน…

ฉันได้รวมเลย์เอาต์นี้พร้อมกับเลย์เอาต์โมดูลข้อความพร้อมการดาวน์โหลดฟรีที่จุดเริ่มต้นของโพสต์นี้

รู้สึกอิสระที่จะหมุน!

ความคิดสุดท้าย

ในบทช่วยสอนนี้ เราแสดงวิธีสร้างเค้าโครงกริด CSS สำหรับโมดูล Divi แม้ว่ากระบวนการจะใช้ CSS ที่กำหนดเอง แต่ก็ไม่น่าแปลกใจมากนักเมื่อพิจารณาถึงผลลัพธ์ที่ทรงพลัง เป็นเรื่องดีที่สามารถควบคุมเลย์เอาต์ของโมดูลทั้งหมดของคุณที่ระดับคอลัมน์เมื่อจำเป็นสำหรับเลย์เอาต์ Divi ที่ไม่เหมือนใคร สำหรับข้อมูลเพิ่มเติมเกี่ยวกับกริด CSS คุณควรอ่านคู่มือฉบับสมบูรณ์นี้เพื่อพิจารณาความเป็นไปได้เพิ่มเติม

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!