ตอนที่4 : เจาะลึกระบบGrid

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

มาเริ่มกันที่ Grid System แบบใหม่ของ bootstrap 4 กันเลย

นั้นก็คือ !!!!! ระบบ grid แบบ flexbox นั้นเอง ~

แต่เอ๊ะ ? แล้วทำไมต้องเป็นแบบ flexbox ?

นั้นก็เพราะว่า flexbox หรือ flexible box มันถูกออกแบบมาให้มีความยืดหยุ่นเพื่อรองรับกับอุปกรณ์ต่าง ๆ ได้อย่างหลากหลายและมีประสิทธิภาพนั้นเอง ไม่ว่าอุปกรณ์ของเราจะมีความกว้างแตกต่างกันแค่ไหน ก็ไม่ใช่ปัญหาอีกต่อไป ถ้าเราใช้ flexbox เป็น … ดังนั้น !!!! ไปลุยกันเลยคร๊าบ ~

✎ Grid options

หน่วยที่จะใช้กำหนดขนาดของส่วนประกอบต่าง ๆ ใน bootstrap จะนิยมใช้เป็น em หรือ rem ครับ ส่วนหน่วย px จะถูกนิยมใช้กำหนด breakpoint (กำหนดความกว้างของ grid) ที่เป็นแบบนี้เพราะว่าความกว้างของ viewport ใช้หน่วย px นั้นเอง

✎ Auto-layout columns

อีกหนึ่งความร้ายกาจของ flexbox นั้นก็คือการปรับความกว้างcolumnsให้เท่ากันครับ

เพียงแค่ใส่ความกว้างขั้นต่ำในแต่ละ breakpoint ที่เราต้องการ columnsแต่ละอันของเราก็จะมีความกว้างเท่ากันทันที ดังตัวอย่างด้านล่างนี้ครับ

✎ Setting column width

นอกจากนั้นแล้วเรายังสามารถปรับขนาดความกว้างของ columns ได้โดยใช้ col — (ความกว้าง grid)

ตัวอย่างเช่น

✎ Variable width content

เราสามารถใช้ col-{breakpoint}-auto เพื่อให้ columns มีความยืดหยุ่นตามความกว้างของเนื้อหาได้ครับ

วันนี้เราก็ได้รู้จักการใช้ grid system กันมากขึ้นแล้วนะครับ แต่เนื้อหายังไม่จบอยู่เพียงเท่านี้ เพราะยังมีส่วนประกอบอื่นๆอีกมากมายที่เราสามารถเลือกมาใช้เพื่อให้การพัฒนาเว็บของเรามีประสิทธิภาพมากขึ้น ยกตัวอย่างเช่น Media object , component และ utilities เป็นต้นครับ แต่สำหรับวันนี้ผมก็จะขอจบเพียงเท่านี้นะครับบบ ขอตัวไปก่อนล่ะ ฟิ้ววววววว~~~

References : https://v4-alpha.getbootstrap.com/