CSS With Grid Systems

ผมคิดว่าเพื่อน ๆ หลายคนคงเคยใช้ grid system ร่วมกับการ design หน้า web page กันบ้างแล้วนะครับ ซึ่งการคำนวณ grid ใน design ของเรานั้นก็จะได้จาก สูตรนี้

• Canvas = ขนาดหน้าจอที่คุณต้องการออกแบบ อาทิ 1024 จะต้อง design ที่ 960px หรือ 940px
• Total Unit = ช่องที่เราจะสามารถวาง object ของงาน design ลงไปในบริเวณนั้น ๆ ได้
• Gutter = ช่องว่างระหว่าง Unit สามรถใช้เป็นระยะ ห่างระหว่าง object ต่าง ๆ ที่อยู่บน Unit เพราะฉะนั้นจะไม่มีการ วาง object ลงไปคาบเกี่ยวบนช่องของ Gutter
• Unit = ความกว้างต่ำสุด ของ unit

เนื่องจาก designer บางท่านอาจจะไม่สันทัษเท่าไรนักในเรื่องการ coding อาจจะทำให้เกิด case ที่ผิดพลาดขึ้นได้ เช่น วาง object ไม่พอดี กับ บริเวณที่ Unit อยู่ ไปเกยอยู่ใน บริเวณของ Gutter ซึ่งเมื่อนำไปเขียน CSS นั้นจะมีปัญหา

อาจจะต้องทำการแก้ไขกัน (หรือ อาจจะเกิดการทะเลาะวิวาทกัน ระหว่าง coder และ designer ได้) ผมเลยพยายามยกตัวอย่างให้พอเห็นภาพกันก่อนเพื่อให้เกิด wired frame และ นำไปสู่การกำหนด framework เพื่อความเข้าใจตรงกันในทุกฝ่าย

ตัวอย่าง ผมจะลองกำหนดการรองรับค่าต่าง ๆ ไว้ เพื่อให้เกิดการเข้าใจในทิศทางเดียวกันในการกำหนด wire frames และ framework ในงานงานหนึ่ง หากผมต้องการ 1 Unit จะได้เท่ากับกี่ pixel และ ถ้า 2 Units จะได้เท่ากับกี่ pixel

ผมจะนำมาคำนวณ เพื่อ หาค่าของ Unit ที่ผมจะสามารถ นำไปใช้ ดังนี้:
(Unit * Count Unit) + ((Count Unit - 1) * Gutter) = VALUE
Unit = ค่าความกว้างของ unit
Count Unit = จำนวน unit ที่ต้องการใช้
VALUE = ค่าที่จะได้ของแต่ละ box ในการรวมกันของ unit

เช่น (70 * 2) + ((2 - 1) * 10) = 150

เมื่อได้ ผลลัพธ์แล้ว แน่นอนว่าในการ design ขนาดของ box, panel หรือ container ต่าง ๆ ใน หน้าเวปขนาดย่อมแตกต่างกันไปตามการใช้งานอยู่แล้ว

จะทำอย่างไร ให้บาง object ที่น่าจะกำหนด class เป็น class เดียวสามารถเรียกมาใช้งานได้ ใน container ที่กำหนดที่อยู่ได้อย่างอิสระ

เช่น .boomboxAds ถ้ามาอยู่ #sideBar มันจะต้องไม่ float แต่ถ้าไปอยู่ใน #toc มันจะต้อง float: right; ผมก็เลยลองคิดวิธีแก้ปัญหาของผมออกมาดังนี้ครับ

• ให้ property ของclass ตัวนึงเป็นตัวที่แสดงความเป็นอกลัษณ์ของ panel นั้น ๆ

  เช่น background, border, float, padding ตลอดจน element ที่ขึ้นต่อ panel ตัวนั้น
  แต่ก็อย่าลืมในเรื่องของ property ที่เป็น border, padding ก็จะต้องมีการลดค่า ปรับค่า ความกว้าง

• และ class อีกหนึ่งตัวก็คือเป็นตัวที่กำหนด property ค่ากริดใว้ โดยจะเรียกใช้ร่วมกัน

  เช่น (ในทีนี้กำหนดมาเฉพาะที่ต้องใช้นะครับไม่ได้กำหนดให้รองรับทั้งหมด)
  .grid2 {width: 150px;}
  .grid3 {width: 230px;}
  .grid4 {width: 310px;}
  .grid6 {width: 470px;}
  .grid12 {width: 950px;}

ตัวอย่างการเขียน CSS With Grid Systems

ก็จะได้เป็นตัวอย่างการวางแผนด้วย wire frames และ มองเห็นภาพ frameworks ตรงกันทั้งสองฝ่ายครับ

หวังว่าคงเป็นประโยชน์ไม่มากก็น้อยครับ ขอบคุณครับ

ขอบคุณ: @DjFunkyDog, @pornAntha และ @radiz สำหรับไอเดียเรื่อง Wire Frames และ Frame Work ครับ