GCSS CSS frame work.

ระบบกริด (Grid system)

กริด (Grid) เป็นคุณสมบัติเด็ดอย่างหนึ่งของ GCSS เนื่องจากการใช้กริดจะช่วยให้เราควบคุมและจัดการแสดงผลได้อย่างง่ายๆ และยังสามารถช่วยในการจัดลำดับเมื่อแสดงผลในแบบ Responsive ได้อีกด้วย

สำหรับ GCSS ได้แบ่งกริดออกทั้งหมดเป็นจำนวนสูงสุดถึง 12 คอลัมน์ และยังประกอบไปด้วยกริดอีก 2 แบบ

  1. กริดทั่วไป ซึ่งจะแสดงผลโดยมีการเว้นช่องว่างระหว่างกริดแต่ละอัน
  2. กริดแบบ collapse ซึ่งกริดแบบนี้จะไม่เว้นช่องว่างระหว่างกริดเลยครับ

12 Cloumns Grid

1 2 3 4 5 6 7 8 9 10 11 12
1 2 3 4 2
8 3 1
1 3 8
2 4 6
12

12 Cloumns Grid (collapse)

1 2 3 4 5 6 7 8 9 10 11 12
1 2 3 4 2
8 3 1
1 3 8
2 4 6
12

ตัวอย่างการใช้งาน Grid

โดยทั่วไปกริดจะถูกใช้สำหรับการแบ่งเว็บเป็นคอลัมน์ ซึ่งกริดจะมีข้อดีที่ความยืดหยุ่น เนื่องจากกริดจะปรับขนาดตามขนาดของหน้าจอโดยอัตโนมัติ เพื่อรักษาจำนวนคอลัมน์ที่ต้องการแสดงผลไว้ และที่สำคัญเมื่อแสดงผลในอุปกรณ์มือถิอ หรือ Tablet ที่มีหน้าจอขนาดเล็ก กริดจะปรับสภาพเป็นบล๊อค (Block) แทน เพื่อให้สามารถแสดงผลเนื้อหาทั้งหมดได้

Lorem Ipsum

Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16

อ่านต่อ...

Lorem Ipsum

Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16

อ่านต่อ...

Lorem Ipsum

Lorem Ipsum คือ เนื้อหาจำลองแบบเรียบๆ ที่ใช้กันในธุรกิจงานพิมพ์หรืองานเรียงพิมพ์ มันได้กลายมาเป็นเนื้อหาจำลองมาตรฐานของธุรกิจดังกล่าวมาตั้งแต่ศตวรรษที่ 16

อ่านต่อ...

<div class="ggrid [collapse]"> <==ถ้ามี class collapse อยู่ด้วย จะเป็นกริดแบบ collapse <article class="block4 float-left"> <==ประกอบด้วย block1-block12 และควรมี float-left หรือ float-right ร่วมด้วย ..... </article> <article class="block4 float-left"> ..... </article> </div>