สร้างเลย์เอาต์ที่ทันสมัยได้อย่างง่ายดายด้วย Gridlex CSS Grid System
การพัฒนาส่วนหน้าได้รับการปรับปรุงอย่างรุนแรงด้วยการแนะนำ CSS flexbox. ทำให้ง่ายขึ้นมาก สร้างกริดและคอลัมน์ ซึ่งจะเปลี่ยนไปตามเค้าโครงที่ตอบสนองตามธรรมชาติ.
แทนที่จะเข้ารหัสตาราง flexbox ของคุณเองตั้งแต่เริ่มต้นคุณสามารถใช้เครื่องมือเช่น Gridlex. ไลบรารีเฟล็กบ็อกซ์โอเพนซอร์สนี้ฟรี ซุปเปอร์น้ำหนักเบา และมาก ง่ายต่อการปรับแต่ง.
สิ่งที่คุณทำคือ เพิ่มสไตล์ชีก Gridlex ไปยังหน้าเว็บของคุณและ ทำงานกับคลาสกริดของมัน. คอลัมน์ภายในใช้คลาส .เทือกเขา และคุณห่อสิ่งเหล่านี้เข้าไปข้างใน .ตะแกรง ภาชนะ สิ่งนี้จะกำหนดทุกคอลัมน์ ที่ความกว้างเท่ากัน และสร้างอินเตอร์เฟสที่เหมือนกัน.
ค่าเริ่มต้นนี้ สามารถแทนที่ได้ โดยการเพิ่ม การปรับขนาดคลาส ไปยังแต่ละคอลัมน์ วิธีนี้คุณสามารถมีหนึ่งคอลัมน์ที่ความกว้าง 70% และอีกคอลัมน์ที่ความกว้าง 30% (เช่นเนื้อหา / แถบด้านข้าง).
คุณจะพบมากมาย ตัวอย่างตาราง ในหน้าแรกของ Gridlex ด้วย การสาธิตสด และ ตัวอย่างโค้ด เพื่อคัดลอก / วางในเว็บไซต์ของคุณ มันเป็นห้องสมุดขนาดใหญ่ที่มีมากมาย คลาสตัวเลือก เพื่อช่วยคุณสร้างกริดที่ง่ายที่สุดสำหรับเว็บไซต์ใด ๆ.
กริดทั้งหมดรวมกันเป็น รวม 12 คอลัมน์มินิ, เพื่อให้คุณสามารถกำหนดจำนวนเนื้อที่แต่ละคอลัมน์ที่ควรใช้ นี่อาจดูสับสน แต่ก็สมเหตุสมผลเมื่อคุณเห็นการสาธิตด้วยสายตา.
นี่คือ ตัวอย่างรหัส ใช้สำหรับกริดขนาดใหญ่ที่มีความกว้างต่างกัน:
.........
สังเกตว่า .ตะแกรง ชั้นมีทุกอย่างและคอลัมน์พยายาม แบ่งออกเป็น 12 ส่วน (ในตัวอย่างนี้จะเป็นความกว้าง for สำหรับแต่ละรายการ) อย่างไรก็ตามคอลัมน์คงที่ ช่วง 2 และ 6 cols ตามลำดับดังนั้นคอลัมน์แรกมาก ใช้ความกว้างอัตโนมัติ ขึ้นอยู่กับสิ่งที่เหลืออยู่.
เมื่อใช้อีกสองคอลัมน์เราสามารถอนุมานได้ว่าจะมี 4 คอลัมน์ (12-6-2) เหลือไว้ให้ รวมเป็น 12. มันเป็นคณิตศาสตร์ที่ง่ายมาก แต่ชื่อชั้นเรียนอาจสร้างความสับสน เมื่อคุณเริ่มเล่นกับ Gridlex ในโครงการคุณจะรับระบบตั้งชื่อได้อย่างรวดเร็ว.
ปัจจุบัน Gridlex ในรุ่น 2.x และมัน การปรับปรุงอย่างต่อเนื่อง บน GitHub ในขณะที่การสนับสนุนเบราว์เซอร์เติบโตขึ้นฉันขอรับประกันว่าจะให้ความสนใจกับ flexbox มากขึ้นเนื่องจากมีไซต์จำนวนมากที่ใช้โมเดลนี้สำหรับกริดหน้า.
คุณยังสามารถหา แกลเลอรี่เต็มรูปแบบ ของเว็บไซต์ที่ใช้ Gridlex เพื่อดูว่ามีลักษณะเช่นนี้เมื่อนำไปใช้กับเว็บไซต์จริง.
หากคุณไม่เคยใช้ flexbox มาก่อน Gridlex อาจเป็นคลังความสนุกสำหรับเล่นกับมัน แต่ฉันยังแนะนำให้ฝึกเล่นเกม flexbox ก่อนเพื่อทดสอบความรู้ของคุณและช่วยให้คุณเข้าใจพื้นฐาน.
Gridlex นั้น ใช้ได้ฟรี ใน repo GitHub หรือคุณสามารถดึงมันผ่านทาง npm หรือ bower มันให้ เอกสารเต็มรูปแบบ บนไซต์หลักรวมถึงการสาธิตสำหรับคอลัมน์ที่มีความกว้างต่างกันและเคียวรีสื่อบันทึก.
คุณมี ควบคุมทั้งหมด เหนือการออกแบบ flexbox และมันเท่านั้น ใช้เวลาเรียน CSS ไม่กี่ เพื่อให้มันเกิดขึ้น! และหากคุณมีคำถามที่รวดเร็วหรือต้องการแบ่งปันเว็บไซต์ที่คุณสร้างขึ้นด้วย Gridlex คุณสามารถส่งข้อความถึงผู้สร้างบน Twitter ได้ที่ webdevlint.
