ระบบและกรอบงานกริด HTML5/CSS3 21 อันดับแรก

วิธีการออกแบบแบบดั้งเดิมเมื่อไม่กี่ปีที่ผ่านมาหมายความว่าคุณต้องออกแบบหน้าแรกทั้งหมดด้วยตัวเอง ต่อเฟรมเรตและกล่องเนื้อหาเข้าด้วยกัน แล้วหวังว่าจะดีที่สุด แต่เทคนิคนี้ค่อยๆ หายไป และวิธีการใหม่ที่ทันสมัยกว่า ในการพัฒนาเว็บไซต์อย่างรวดเร็ว ได้เกิดขึ้น สิ่งที่น่าสังเกตมากที่สุดคือ CSS3 ได้แนะนำ Flex-box ซึ่งเป็นฟังก์ชันกริดที่ใช้งานง่ายซึ่งคุณสามารถใช้เพื่อสร้างเค้าโครงเนื้อหาได้ แต่ยังคงมีบางส่วนที่ต้านทานได้ ในขณะที่บางรุ่นใช้แนวทางที่ซับซ้อนยิ่งขึ้นเพื่อความแม่นยำในการออกแบบอย่างแท้จริง

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

ต้องการเฟรมเวิร์กเพิ่มเติมหรือไม่ ลองบทสรุปอื่นๆ ของเรา:

• JavaScript Frameworks
• กรอบงาน HTML5
• CSS3 Frameworks
• Node.js Frameworks

ไม่จำเป็นต้องพูดว่าการออกแบบเหล่านี้สามารถปรับให้เข้ากับทุกสถานการณ์ ดังนั้นคุณสามารถช่วยตัวเองให้พ้นจากความปวดหัวที่ต้องแก้ไขข้อบกพร่องของเลย์เอาต์การออกแบบ และแทนที่จะเน้นไปที่การเติมเต็มกล่องกริดด้วยเนื้อหาที่คุณต้องการ ที่จะวางที่นั่น มีรูปแบบที่หลากหลายและแตกต่างกันมากมายที่คุณจะพบได้ในระบบกริดเหล่านี้ ใช้เวลาสักครู่เพื่อไปที่หน้าสาธิต และอาจถึงกับจดสิ่งที่คุณกำลังมองหาเพื่อให้คุณมีเวลาในการค้นหาเฟรมเวิร์กที่ตรงกันได้ง่ายขึ้น สำหรับความต้องการของคุณ

Dead Simple Grid

กริดไม่ควรจะซับซ้อน โดยแท้จริงแล้ว พวกมันเป็นเพียงองค์ประกอบ HTML ที่รวมการออกแบบโดยรวมเข้าด้วยกัน และ Vladimir Agafonkin เป็นหนึ่งในนักพัฒนาที่น้อมรับแนวคิดนั้น กรอบงานกริดของเขา Dead Simple Grid มีโค้ด CSS เพียงสองร้อยไบต์เท่านั้น นั่นคือรหัสจำนวนน้อยที่สุด หน้าเว็บของคุณจะไม่ได้สังเกตว่ามี.. คุณสามารถแยกตารางเพื่อให้มีพื้นที่เนื้อหาหลักและแถบด้านข้างที่ยืดหยุ่นได้หากต้องการ กริดประเภทนี้จะเหมาะกับบล็อกและเลย์เอาต์ของโฮมเพจทั่วไปที่ต้องการการออกแบบขั้นต่ำ การออกแบบที่ตอบสนองตามอุปกรณ์ถูกรวมเข้าด้วยกันด้วยข้อความค้นหาของสื่อ ดังนั้นตารางจะดูไร้ที่ติบนอุปกรณ์ใดๆ ที่ใช้งาน

Bourbon Neat

Bourbon เป็นไลบรารีมิกซ์อินที่ประสบความสำเร็จอย่างมากสำหรับตัวประมวลผลล่วงหน้า SASS แน่นอนว่าสิ่งนี้ทำให้ Neat เป็นตัวเลือกที่น่าสนใจสำหรับผู้ที่ใช้ Bourbon และ SASS แล้ว Neat ช่วยให้นักพัฒนาสามารถเข้าถึงระบบกริดของไหลที่เร็วและง่ายพอที่จะตั้งค่าในไม่กี่นาที แต่มีความยืดหยุ่นจนถึงจุดที่การเปลี่ยนแปลงและการปรับเปลี่ยนไม่จำกัดจะไม่กลายเป็นปัญหา

Grd

Grd เป็นระบบกริด CSS ที่ใช้ Flexbox เป็นเครื่องมือแบ็กเอนด์สำหรับการสร้างเลย์เอาต์ที่ตอบสนองที่ยืดหยุ่นและทันสมัย การใช้ Live Demo คุณสามารถเล่นกับการตั้งค่าและการปรับแต่งการออกแบบต่างๆ เพื่อดูว่า Grd สามารถแก้ปัญหาของคุณในการรับองค์ประกอบการออกแบบเฉพาะที่รวมอยู่ในเวิร์กโฟลว์ที่มีอยู่ของคุณหรือไม่ เราพบว่าการสร้างส่วนหัว ส่วนท้าย และพื้นที่เนื้อหาทั่วไปทำได้ง่ายโดยใช้การตั้งค่าแบบดรอปดาวน์

โครงสร้าง

โครงสร้างซึ่งอิงตาม Flexbox เช่นกัน ใช้รูปแบบไวยากรณ์ที่ประกาศ (คล้ายกับใน Angular.js) เพื่อกำหนดส่วนและพารามิเตอร์เค้าโครง นักพัฒนาบางคนบ่นว่ามาร์กอัปสุดท้ายของหน้านั้นไม่สามารถตรวจสอบได้ แต่แนวคิดก็คือการใช้โครงสร้างคุณสามารถสร้างตารางประกาศที่ไม่ยุ่งกับแอตทริบิวต์ CSS ดั้งเดิม เช่น คลาสและชื่อรหัส

ระบบกริด 960

เว็บไซต์หลายแสนแห่งใช้ 960 Grid System ของ Nathan Smith เพื่อขับเคลื่อนเลย์เอาต์การออกแบบ เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการปรับปรุงเวิร์กโฟลว์ของนักพัฒนาเว็บที่ทำงานหนัก ด้วยการเลือกเค้าโครงคอลัมน์ที่แตกต่างกันสองแบบ (12 และ 16 ตามลำดับ) นักพัฒนาสามารถบูตสแตรปหน้าแรกได้อย่างรวดเร็วซึ่งจะสนับสนุนอินพุตแบบไดนามิกและแบบคงที่ทุกประเภท คุณสามารถเพิ่มคอลัมน์ได้ แต่คุณจะต้องทำงานกับเอกสารประกอบเพื่อทำความเข้าใจการใช้งานให้ชัดเจนยิ่งขึ้น

ไม่มีความหมาย

Unsemantic คือเวอร์ชันที่ตามมาของกริด 960 ที่ให้ความสามารถในการออกแบบที่ตอบสนองได้อย่างเต็มที่ นักพัฒนาสามารถจัดเรียงเลย์เอาต์ของเพจที่พวกเขากำลังสร้างใหม่ผ่านคลาสดึงที่ไม่ซ้ำใคร ซึ่งอาจช่วยโปรโมตและแสดงเนื้อหาที่สำคัญที่สุดในเวลาใดก็ตาม ซึ่งเป็นกลยุทธ์ที่เป็นที่รู้จักเพื่อช่วยให้เครื่องมือค้นหาเข้าใจวัตถุประสงค์ขององค์ประกอบเนื้อหาแต่ละรายการได้ดียิ่งขึ้น Unsemantic ยังเป็นผู้ใช้ที่น่าภาคภูมิใจของ Media Queries ดังนั้นฟรอนต์เอนด์ที่พัฒนาแล้วจะไม่มีเวลายากเย็นในการปรับแต่งเฟรมเวิร์กกริดนี้สำหรับความต้องการของพวกเขาเอง

กริดอย่างง่าย

ดังนั้นชื่อ Simple Grid จึงเหมาะสำหรับทุกคนที่ต้องการความเรียบง่ายและใช้งานง่าย เลย์เอาต์ตอบสนองได้ เข้ากันได้กับสมาร์ทโฟน แท็บเล็ต และคอมพิวเตอร์เดสก์ท็อป กล่าวอีกนัยหนึ่ง ประสิทธิภาพของโครงการของคุณจะอยู่ในระดับสูงสุดโดยไม่ต้องสงสัย มันสอดคล้องกับหน้าจอขนาดใหญ่และความละเอียดสูงกว่าเช่นกัน นอกจากนี้ Simple Grid เป็นเพียงตารางที่ไม่มีองค์ประกอบเพิ่มเติม ซึ่งทำให้มีน้ำหนักเบามาก ด้วยโครงสร้าง 12 คอลัมน์ที่สะดวกสบาย คุณมีอิสระในการสร้างเลย์เอาต์ตามที่คุณต้องการ คุณสามารถแบ่งคอลัมน์ออกเป็นสอง สาม สี่หรือหกคอลัมน์ได้อย่างไม่มีที่ติ

csswizardry-grids

ด้วยตาราง HTML เช่น csswizardry-grid คุณสามารถประหยัดเวลาและพลังงานได้ เป็นเครื่องมือที่มีประสิทธิภาพที่คุณสามารถใช้กับเนื้อหาในหัวใจของคุณได้อย่างแม่นยำ เป็นมิตรกับผู้ใช้และมีโครงสร้างที่ง่าย ทำให้แน่ใจว่านักพัฒนาเว็บทุกระดับจะได้รับประโยชน์สูงสุดจากมัน ในภาพหน้าจอด้านบน คุณสามารถดูรูปแบบต่างๆ ทั้งหมดที่ csswizardry-grids รองรับได้ คุณสามารถจัดเรียงสิ่งของใหม่ได้อย่างอิสระ เพื่อให้ตรงกับความต้องการของคุณกับเสื้อยืด ทำกิจกรรมของคุณโดยหลีกเลี่ยงการทำสิ่งต่างๆ ตั้งแต่ต้นจนจบด้วย csswizardry-grids ตอนนี้และเริ่มต้นอย่างถูกต้อง

กริดอันล้ำลึก

อิสระที่ Deep Grid มอบให้คุณนั้นเหนือกว่า คุณสามารถใช้ระบบกริดที่ยืดหยุ่นและขยายได้นี้สำหรับเลย์เอาต์คงที่และแบบไหล ผลลัพธ์จะทำงานบนอุปกรณ์ที่ทันสมัยทั้งหมดอย่างราบรื่นเมื่อแกะกล่อง คุณสามารถสร้างโครงสร้างที่ต้องการได้โดยการเปลี่ยน ลบ หรือเพิ่มคอลัมน์ตามที่คุณต้องการ คุณสามารถตรวจสอบตัวอย่างบางส่วนก่อนเพื่อดูว่าเป็นไปได้ด้วย Deep Grid นอกจากนี้ ด้วยระยะขอบติดลบเมื่อคำนวณคอลัมน์ ตารางที่ลึกซึ้งรับประกันว่าเค้าโครงแบบไหลจะปรากฏเหมือนกันโดยไม่คำนึงถึงขนาดหน้าจอและเว็บเบราว์เซอร์

แผ่นเหล็ก

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

CSS สมาร์ทกริด

CSS Smart Grid ปฏิบัติตามแนวโน้มและข้อบังคับล่าสุดเพื่อให้แน่ใจว่าเข้ากันได้กับอุปกรณ์ต่างๆ กล่าวโดยย่อ เครื่องมือนี้มีน้ำหนักเบา ตอบสนองได้ดี และเน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก เพื่อให้คุณสร้างสิ่งที่ยิ่งใหญ่ด้วยเครื่องมือนี้ ไม่ว่าจะใช้สมาร์ทโฟนหรือหน้าจอเดสก์ท็อปขนาดใหญ่ CSS Smart Grid จะทำให้แน่ใจว่าเลย์เอาต์ทำงานบนทั้งสองอย่างโดยไม่มีปัญหา สำหรับข้อมูลของคุณ แม้ว่าจะมีบางคนใช้ฟีเจอร์โฟนเพื่อท่องอินเทอร์เน็ต แต่โปรเจ็กต์ของคุณที่อิงตาม CSS Smart Grid ก็ใช้งานได้เช่นกัน - ด้วยมุมมองคอลัมน์เดียว ที่เว็บไซต์อย่างเป็นทางการ คุณยังมีวิธีการที่รวดเร็ว ดังนั้นคุณจึงไม่มีปัญหาเมื่อใช้เครื่องมือ

Gridlex

Gridlex โดดเด่นด้วยดีไซน์ที่โดดเด่นและใช้งานง่าย ความเรียบง่ายของเฟรมเวิร์กกริดที่ใช้ Flexbox นี้น่าทึ่งมาก วิสัยทัศน์นั้นเรียบง่าย — รวมคอลัมน์ของคุณไว้ในกริดของคุณ และหากจำเป็นต้องปรับแต่งเพิ่มเติมใดๆ เพื่อทำให้การออกแบบขั้นสุดท้ายของคุณดูไม่อาจต้านทานได้ เพียงแค่ดูการสาธิตของเว็บไซต์ที่ใช้ Gridlex ก็เห็นได้ชัดว่านี่เป็นระบบไลน์กริดอันดับต้น ๆ และคุณจะไม่ผิดหวังกับสิ่งที่สามารถทำได้สำหรับโครงการและเวิร์กโฟลว์ของคุณเอง

ระบบกริดแบบตอบสนอง

ระบบ Responsive Grid มีประโยชน์หลายอย่าง ไม่ว่าจะเป็นชื่อโดเมนที่สมบูรณ์แบบ วิสัยทัศน์ที่ชัดเจน และเครื่องมือที่จำเป็นเพื่อทำให้การออกแบบตารางตอบสนองเป็นเรื่องง่าย! Grid Generator ให้อินพุตแบบฟอร์มง่ายๆ ซึ่งคุณสามารถระบุจำนวนคอลัมน์ที่คุณต้องการใช้ และระยะขอบที่คุณต้องการดูระหว่างคอลัมน์เหล่านั้น .. คลิกส่ง และคุณมีผลลัพธ์โค้ดที่พร้อมใช้งาน ของเลย์เอาต์กริดที่ตอบสนองครั้งต่อไปของคุณ ผู้เขียน Graham ยินดีที่จะทำงานอย่างหนักทั้งหมดให้คุณหากต้องการ คุณสามารถติดต่อกับเขาได้ที่ส่วนท้ายของหน้า

Gridly

นักพัฒนาซอฟต์แวร์สร้าง Gridly ให้เป็นระบบเค้าโครงกริดขั้นต่ำเพื่อรองรับเบราว์เซอร์ที่ทันสมัยที่สุดในปัจจุบัน โครงสร้างน้ำหนักเบาช่วยให้นักพัฒนามีเวลาง่ายๆ ในการจัดวางโครงร่างกริด/คอลัมน์และทำงานโดยไม่ยุ่งยากมากเกินไป โดยรวมแล้ว ขนาดที่เล็กที่สุดอย่างไร้เหตุผลของไลบรารีนี้จะทำให้คุณต้องการโครงการเพิ่มเติมในอนาคต

ฟอร์มสโตน

Formstone ไม่ใช่ระบบกริดที่มีการจัดการเพียงระบบเดียว แต่จริง ๆ แล้วเป็นไลบรารีสำหรับนักพัฒนาส่วนหน้าที่ต้องการส่วนประกอบและองค์ประกอบเว็บที่ปรับแต่งได้สูงซึ่งประกอบเป็นหน้าเว็บแบบดั้งเดิมที่คุณพบในแต่ละวัน การเป็นไลบรารีแบบแยกส่วน ตอบสนอง และอัตโนมัติ — Formstone สามารถใช้ได้ไม่เพียงเพื่อวัตถุประสงค์ในการปรับขนาดโครงการเว็บไซต์ขนาดใหญ่เท่านั้น แต่ยังสำหรับการใช้เค้าโครงกริดด้วย

Bootstrap

Bootstrap จะอยู่ที่ไหนในวันนี้หากไม่ใช่เพราะเป็นระบบกริดที่ทุกอย่างถูกสร้างขึ้น เรายังคงรออย่างใจจดใจจ่อรอให้ Bootstrap 4 มาถึง แต่ในระหว่างนี้.. คุณไม่สามารถปฏิเสธได้ว่าใช่กับเฟรมเวิร์กที่จัดการเพื่อสร้างตัวเองให้เป็นหนึ่งในเฟรมเวิร์กส่วนหน้าที่โดดเด่นที่สุดของศตวรรษนี้ เว็บไซต์หลายล้านแห่งขับเคลื่อนโดยคุณสมบัติของ Bootstrap แต่คงเป็นไปไม่ได้หากไม่ใช่เพราะกริดเฟรมเวิร์กที่รวมเข้ากับแกนหลักของ Bootstrap

พื้นฐาน

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

โครงกระดูก

โครงกระดูกมีการออกแบบที่สวยงามและเป็นธรรมชาติที่จะทำให้คุณอยากได้มากกว่านี้ ผู้สร้างได้สร้างแนวคิดเบื้องหลัง Skeleton เพื่อเป็นทางเลือกที่ดีที่สุดสำหรับโปรเจ็กต์ขนาดเล็ก นอกจากนี้ คุณสามารถใช้มันกับโปรเจ็กต์ที่คุณไม่ต้องการใช้เฟรมเวิร์กที่เต็มเปี่ยมได้ Skeleton จัดเตรียมสิ่งจำเป็นที่จำเป็นสำหรับการสร้างต้นแบบเว็บไซต์และใช้งาน เลย์เอาต์กริด ตัวเลือกการพิมพ์สำหรับหัวเรื่องและส่วน องค์ประกอบปุ่มสำหรับทุกความต้องการในฟอร์มของคุณ และในความเป็นจริงแล้ว ฟอร์มที่กำหนดเอง คุณจึงประหยัดเวลาในการต้องเขียนโค้ดของคุณเอง การเพิ่มรายการ ตารางและไวยากรณ์โค้ด และสื่อที่ดี กรอบข้อความค้นหาเพื่อให้การออกแบบของคุณตอบสนองได้อย่างเต็มที่!

ระบบกริดแบบตอบสนอง 2

Responsive Grid System (เวอร์ชัน 2) เป็นระบบกริดสำหรับมือถือซึ่งมีขนาดเล็กมาก แต่มีสไตล์ที่มีประสิทธิภาพสูง คุณสามารถเลือกจากเค้าโครงคอลัมน์แบบต่างๆ (24, 16, 12) คุณยังสามารถปรับแต่งระยะขอบและช่องว่างภายในระหว่างคอลัมน์ และใช้โพลีฟิลเพื่อสร้างเลย์เอาต์การออกแบบที่เป็นตัวเอก

ระบบกริดที่ตอบสนองสำหรับโครงการต่อไปของคุณ

Responsive Grid System สำหรับ Next Project ของคุณใช้คลาสเดียวกับระบบกริด 960 มันสร้างขึ้นเพื่อให้บริการผู้เยี่ยมชมมือถือเป็นอันดับแรก และจัดเตรียมต้นแบบสำหรับการจัดการส่วนหัว นักพัฒนาได้ทดสอบเบราว์เซอร์ที่ทันสมัยทั้งหมดเพื่อให้คุณอยู่ในมือที่ดี คุณสามารถใช้สิ่งนี้เป็นระบบกริดพื้นฐานที่จะช่วยคุณสร้างการออกแบบเว็บที่ตอบสนองได้ สิ่งนี้จะรักษาความสามารถที่มีอยู่ของคุณเหนือระบบกริดยอดนิยม

HTML5 Boilerplate

HTML5 Boilerplate เป็นเฟรมเวิร์กสำเร็จรูป (เทมเพลต) สำหรับนักพัฒนาส่วนหน้า เหมาะสำหรับนักพัฒนาที่ต้องการเริ่มต้นโครงการโดยไม่ต้องยุ่งยากกับเฟรมเวิร์กที่ใหญ่กว่า เช่น Bootstrap หรือ Foundation