Grid.css - ระบบกริดที่น้อยที่สุดสำหรับนักพัฒนาเว็บ

กรอบส่วนหน้าขนาดใหญ่เช่น Bootstrap มาพร้อมกับพวกเขา ตั้งค่ากริดเอง. แต่พวกเขายัง มาพร้อมกับสัมภาระมากมาย ในรูปแบบขององค์ประกอบของหน้าและองค์ประกอบ JavaScript ที่ออกแบบไว้ล่วงหน้า.

หากคุณกำลังมองหาระบบกริดที่เล็กลงและคล่องตัวมากขึ้นคุณจะหลงรัก Grid.css.

ไลบรารี่โอเพนซอร์สนี้มาพร้อมกับแพ็คเกจดั้งเดิม ระบบกริด 12-col ที่คุณสามารถสร้างโครงสร้างสำหรับเค้าโครงใด ๆ CSS นั้นใช้งานง่ายและเป็นไฟล์เอง วัดได้เพียง 560 ไบต์ (นั่นคือครึ่ง KB!)

การเริ่มต้นนั้นง่ายมากและคุณเพียงแค่ต้องการ หนึ่งไฟล์ CSS เพิ่มไปยังส่วนหัวของคุณ.

คุณสามารถค้นหา ลิงค์ดาวน์โหลดโดยตรง บนหน้าแรกของ Grid.css หรือใน repo อย่างเป็นทางการของ GitHub คุณสามารถใช้ รุ่น CDN ดิบ เพื่อฝังไฟล์นี้โดยตรงจาก GitHub โดยไม่ต้องโฮสต์ด้วยตัวคุณเอง.

ตอนนี้คุณสามารถตั้งค่าโครงสร้างคอลัมน์ของคุณ ใช้องค์ประกอบใด ๆ ที่คุณต้องการ (divs, ส่วน ฯลฯ ).

โดยทั่วไปรวมถึง .แถว องค์ประกอบ (ภาชนะ) พร้อมกับหลาย ๆ องค์ประกอบคอลัมน์ภายใน. คลาสคอลัมน์ ใช้ตัวเลข เพื่อกำหนดพื้นที่ทั้งหมดภายในคอนเทนเนอร์ดังนั้นตัวอย่างเช่น, .col4 ใช้เวลาสี่คอลัมน์ของผลรวมทั้งหมดสิบสอง.

นี่คือ ตัวอย่างข้อมูล จากการสาธิต:

คุณสามารถใช้การรวมกันของคลาสคอลัมน์ที่คุณต้องการตราบใดที่พวกเขา เพิ่มได้สูงสุด 12.

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

ตามธรรมชาติแล้วห้องสมุดนี้คือ ฟรี 100% และ โอเพ่นซอร์ส, ดังนั้นคุณสามารถแก้ไขได้ตามต้องการ.

ผู้สร้าง Ahmed Tarek, ก็ทำให้บุทส์ ซึ่งเป็นตัวแปรของชุด UI ของปุ่มจำนวนมากออกมี มัน จับคู่อย่างกับ Grid.css, ดังนั้นพวกเขาจึงเป็นทั้งห้องสมุดที่ยอดเยี่ยมในการรับเมื่อเริ่มต้นโครงการเว็บใหม่.