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

เมื่อได้ ผลลัพธ์แล้ว แน่นอนว่าในการ 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 ครับ

Back to Top

4 Responses to CSS With Grid Systems

  1. pornantha

    ปล. ไม่เกี่ยวกับบทความ
    สแปมจะเยอะไปไหนเนี่ย

    Reply

  2. iMenn

    เห็นมีคนบ่นใน Twitter ว่าไม่มีใครคอมเม้นท์ กระผมก็ขอเจิมหน่อยละกัน

    ส่วนตัวแล้วชอบ 960.gs นะ เพราะ
    1. ระยะ 20px ที่เกิดขึ้นนั้น งามแล้วสำหรับระยะห่างของกรอบทั้งหลาย

    2. คอลัมภ์ที่เกิดขึ้น มันไม่ค่อยพ้น 3 หรือ 4 คอลัมภ์ใน 1 แถว ดังนั้น การให้ container 12 กับ container 16 มานั้น เรียกว่าเหลือเฟือพอสมควร จะจัดกลุ่มใช้ยังไงก็ลงตัวอยู่

    แต่ข้อเสียของระบบ Grid ก็คือ มันจะเกิด div และ class ขึ้นมาเยอะแยะ ถ้าเป็นพวกดีไซเนอร์เรื่องมาก เขียนโค้ดได้งูๆ ปลาๆ เช่นผม จะรู้สึกรำคาญ และพาลจะยกเลิกเสีย ขอ div/class น้อยๆ และชื่อมีความหมาย จะชอบกว่า (ในขณะที่ เพื่อนผู้เป็นโปรแกรมเมอร์ อยากจะสร้าง class อันครอบจักรวาลและพลิกแพลงผสมผสานได้หลากหลาย ผมกับว่า จะไปเข้าอีหรอบเขียน inline HTML อ่ะดิ)

    Reply

  3. MP3WizarD

    โดยส่วนตัวผมชอบ concept ของ 960.gs เช่นกัน และด้วยการใช้ framework ตัวนี้จช่วยลดความไม่จำเป็นในการเขียน code css ไปได้เยอะ แต่ก็อย่างที่คุณเม่นบอก สุดท้ายอาจจะต้องเขียน inline แทน ซึ่งผมก็เห็นว่า เรามาเขียนเป็นใส่ 2 หรือ 3 class ใน div เดียวไม่ดีกว่าหรอ Y_Y แล้วค่อยเพิ่มส่วนที่จำเป็นใน class ที่ 2 หรือ 3 เป็นอันๆ ไป

    เพราะจากที่ผมเคยเขียน css ให้เว็บ social network แห่งหนึ่ง ทำให้รู้ถึงความโหดร้ายของมันอย่างมาก กับ css แบบย่อ ประมาณ พันกว่าบรรทัดใน file เดียว (เปิด file ที editor โหลด color syntax กันบานเลย…)

    แต่ปัญหาที่หนักหนายิ่งกว่ามันไม่ได้อยู่ที่มือ coding เท่าไรหรอกครับ แต่มันหนักที่มือ designer เก่าและใหม่ที่ไม่ยอมเรียนรู้เทคโนโลยีที่เป็นระบบใหม่ๆ ฤาจะด้วยความอาร์ตตัวพ่อ(แม่) หรือไม่ก็ตาม หรือการทำงานที่อิสระทางความคิดจนไม่สนใจการใช้ grid ในการออกแบบก็ตาม… ยากครับ ยาก… การเปลี่ยนรูปแบบการทำงานของ graphic designer เป็นสิ่งที่ยากกว่าเหลือหลายจริงๆ ยิ่งพวกที่ไม่รู้จักคำว่า \"เชี๊ยะ\" (http://www.usably.net/2009/02/perfect-and-neat-1px-100percent/) ยิ่งเละใหญ่เลย -\’\’-

    Reply

  4. czarft

    แวะมาอ่านบ้างอยากรู้ 55+

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top