# Grid คืออะไร ?

## **Grid คืออะไร ?**

&#x20;    Grid คือ เส้นที่ทำขึ้นมาเป็นตารางเพื่อช่วยในการจัดองค์ประกอบต่าง ๆ ของชิ้นงานที่เราออกแบบ แต่ก่อนที่เราจะไปถึงหัวข้อของ Grid System ที่ใช้ในงานออกแบบเว็บไซต์ เรามาทำความรู้จักกับส่วนประกอบของ grid ในความรู้พื้นฐานกันก่อน

![](https://lh5.googleusercontent.com/VaSaUBKm0EU4vm8YJCF2ZNqQSN7kOEu5zqWSyoQBM76e0ciyM5UyW4A_actoq6ZseFUf2Dx8iy2kgmhz0llAYEpHQ-EnXKH12etylBOMULEmMozklNo3npYDYkeriFTNEm7MHKL5)

* **Column** คือ แถวที่อยู่ในตำแหน่งแนวตั้งของ Grid โดยจะมีขนาดพอดีตั้งแต่บนสุดถึงล่างสุด ของ Margins
* **Margins** คือ พื้นที่ว่างที่อยู่ข้างนอก Columns และ Rows โดยตัว Margins จะเป็นตัวกำหนดระยะห่างระหว่างขอบของ Artboard และ Element (ภายในเว็บ)
* **Rows** คือ แถวแนวนอนที่อยู่ใน Grid โดย Columns และ Rows ที่รวมกันอยู่ใน Grid จะเรียกว่า Modules
* **Modules** คือ ช่องที่เกิดจากการแบ่งเส้นของ Columns และ Rows
* **Spatial Zone** คือ การรวมตัวของ Modules ทั้งในแนวตั้งและแนวนอน เกิดเป็นพื้นที่ขนาดใหญ่ใน Grid
* **Gutter หรือ Gaps** คือ ช่องว่างสำหรับแบ่งแยก Rows และ Columns
* **Markers** เป็นส่วนที่อยู่มุมฝั่งใดฝั่งหนึ่งของ Header และ Footer โดยตัว Markers จะไว้ใช้ระบุหรือบอกตำแหน่งของเนื้อหาในทุกๆหน้า เช่น บอกจำนวนหน้าของหนังสือ หรือบอกชื่อของหนังสือ
