แถบด้านข้าง + เค้าโครงตาราง CSS เนื้อหา
ออกแบบเค้าโครง CSS Grid ด้วยสายตา: ตั้งค่าคอลัมน์ แถว และช่องว่าง จากนั้นพิมพ์ชื่อพื้นที่ลงในเซลล์เพื่อสร้างพื้นที่เทมเพลตกริด พร้อมการแสดงตัวอย่างแบบเรียลไทม์และ CSS และ HTML ที่คัดลอกได้
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างกริดที่มีเค้าโครงหนึ่งแถวสองคอลัมน์ที่ตั้งชื่อไว้แล้ว: คอลัมน์แถบด้านข้างขนาด 200px ถัดจากคอลัมน์เนื้อหาที่ยืดหยุ่นซึ่งใช้พื้นที่ที่เหลือ ทั้งสองพื้นที่จะมองเห็นได้ในตัวอย่างสดทันที โดยให้สีและติดป้ายกำกับเพื่อให้เห็นการแยกได้ชัดเจน
นี่คือรูปแบบการนำทางบวกเนื้อหาที่พบบ่อยที่สุดบนเว็บ หน้าการตั้งค่า ไซต์เอกสารประกอบ และแดชบอร์ดของผู้ดูแลระบบล้วนวางอยู่บนรางที่มีความกว้างคงที่ข้างพื้นที่หลักที่ลื่นไหล เนื่องจากคอลัมน์แถบด้านข้างใช้ค่าพิกเซลและคอลัมน์เนื้อหาใช้ 1fr แถบด้านข้างจึงมีความกว้างคงที่ ในขณะที่คอลัมน์เนื้อหาดูดซับทุกพิกเซลที่เกินมาของวิวพอร์ต
เปลี่ยนชื่อพื้นที่ เปลี่ยนความกว้างของคอลัมน์ หรือเพิ่มแถวสำหรับส่วนหัวเหนือการแยก — เอาต์พุต CSS และ HTML ด้านล่างจะติดตามการแก้ไขทุกครั้งแบบเรียลไทม์ เครื่องมือนี้ฟรีและทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ของคุณ โดยไม่ต้องอัปโหลดและไม่มีบัญชี