Grid ถือเป็นตัวเลือกนึงที่ช่วยเราในการจัด layout ของเว็ปไซต์หรือโปรเจคต่างๆของเรา ในที่นี้เราจะมาลองใช้ css grid ของ material ui กัน ถือเป็นตัวนึงที่ใช้งานง่าย เข้าใจได้ไม่ยาก
เริ่มแรกเลย เรามาสร้างโปรเจคของเรากัน ในที่นี้ผมจะใช้ next JS ในการเขียน คุณสามารถใช้ตัวอื่นแช่น ReactJS ก็ได้เช่นกัน
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -1 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-1.png)
เราจะทำการ add 3 packages ด้วยกัน คือ @mui/material, @emotion/react และ @emotion/styled
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -2 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-2.png)
ถึงชื่อจะเป็น grid แต่ในนี้เราจะใช้เป็น Box ให้เราทำการ import Box เข้ามา
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -3 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-3.png)
ใน component Box เราจะใส่ sx ซึ่งคล้ายกับการใส่ style เราจะใส่ object display เป็น grid
Gap ก็จะใส่ size ความห่างระหว่าง item ใน Box
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -4 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-4.png)
gridTemplateColumns ก็จะเป็นการ repeat ต่อเฟรม เช่น 2, 1fr ก็คือจะ render 2 items ต่อหนึ่งแถว แบบในรูป
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -5 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-5.png)
ข้อดีอีกแบบนึงคือเรายังสามารถยัด grid อันใหม่เข้าไปใน grid ได้อีกด้วย ในที่นี่ผมจะสร้าง gid อีกชั้นนึงข้างใน grid เดิม
ในที่นี้ผมจะให้ render เป็น 4 items ต่อหนึ่งเฟรม
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -6 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-6.png)
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -7 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-7.png)
อีกวิธีนึงที่ช่วยเราก็จะเป็นการประกาศ area ภายใน grid ด้วย gridTemplateAreas โดยใส่ ชื่อ area ตามจำนวนที่เราใส่ใน gridTemplateColumn แบบในรูป
จากนั้น ภายใน grid ก็จะมี gridArea เป็น items ด้านใน โดยตั้งชื่อให้ตรงกับ gridtemplateArea แล้วก็จะได้ตามรูป
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -8 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-8.png)
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -9 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-9.png)
ปรับแต่งเพิ่มเติมเป็นแบบนี้ก็ได้เช่นกัน
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -10 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-10.png)
![จัด layout อย่างง่ายด้วย CSS Grid Material UI -11 จัด layout อย่างง่ายด้วย CSS Grid Material UI](http://www.frevation.com/wp-content/uploads/2021/11/จัด-layout-อย่างง่ายด้วย-CSS-Grid-Material-UI-11.png)
นี่คือ css grid ของ material ui จากที่ลองใช้ถือว่าใช้งานได้ไม่ยากเลย ทีนี้ก็ไม่ต้องปวดหัวในการจัด style ให้ตรงกันแล้ว นี่คือตัวอย่างง่ายๆเท่านั้น คุณก็ลองเอาไปเล่นกันดูได้เช่นกัน
ผู้เขียน Tanapat Limtemsap
วันที่ 19 พฤศจิกายน พ.ศ.2564