มูลนิธิ - กริด

คำอธิบาย

ระบบกริดฐานรากปรับขนาดได้ถึง 12 คอลัมน์ในหน้า ระบบกริดใช้เพื่อสร้างเค้าโครงหน้าผ่านชุดแถวและคอลัมน์ที่เก็บเนื้อหาของคุณ

ตัวเลือกกริด

ตารางต่อไปนี้จะบอกสั้น ๆ เกี่ยวกับการทำงานของระบบกริดพื้นฐานในอุปกรณ์หลายเครื่อง

	โทรศัพท์ขนาดเล็ก (<640px)	แท็บเล็ตอุปกรณ์ขนาดกลาง (> = 640px)	อุปกรณ์ขนาดใหญ่แล็ปท็อปและเดสก์ท็อป (> = 1200px)
พฤติกรรมกริด	แนวนอนตลอดเวลา	ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก	ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก
คำนำหน้าชั้นเรียน	.small- *	.medium- *	.ใหญ่-*
จำนวนคอลัมน์	12	12	12
Nestable	ใช่	ใช่	ใช่
ออฟเซ็ต	ใช่	ใช่	ใช่
ลำดับคอลัมน์	ใช่	ใช่	ใช่

โครงสร้างพื้นฐานของ Foundation Grid

ต่อไปนี้เป็นโครงสร้างพื้นฐานของกริดรากฐาน -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

• ขั้นแรกสร้างคลาสแถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน

• ควรวางเนื้อหาไว้ในคอลัมน์และมีเพียงคอลัมน์เท่านั้นที่สามารถเป็นลูกของแถว

• คอลัมน์กริดถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่สิบสองคอลัมน์ที่คุณต้องการขยาย ตัวอย่างเช่นสำหรับสี่คอลัมน์ที่เท่ากันเราจะใช้ . large-3

ต่อไปนี้เป็นสามคลาสที่ใช้ในระบบกริดพื้นฐาน -

ซีเนียร์	คลาส Grid พื้นฐานและคำอธิบาย
1	ใหญ่ * ขนาดใหญ่ชั้นเรียนจะใช้สำหรับอุปกรณ์ขนาดใหญ่
2	ปานกลาง กลาง *ชั้นถูกนำมาใช้สำหรับอุปกรณ์ขนาดกลาง
3	เล็ก small- * class ใช้สำหรับอุปกรณ์ขนาดเล็ก

กริดขั้นสูง

ต่อไปนี้เป็นรูปแบบกริดขั้นสูงที่ใช้ใน Foundation

ซีเนียร์	กริดขั้นสูงและคำอธิบาย
1	คอลัมน์ / แถวรวม คอลัมน์และแถวที่เรียนถูกนำมาใช้ในองค์ประกอบเดียวที่จะได้รับคอลัมน์เต็มความกว้างที่จะใช้เป็นภาชนะ
2	การทำรัง เราสามารถซ้อนคอลัมน์กริดภายในคอลัมน์อื่นได้
3	ออฟเซ็ต การใช้คลาสlarge-offset- *หรือsmall-offset- *คุณสามารถย้ายคอลัมน์ไปทางขวา
4	แถวที่ไม่สมบูรณ์ ฐานรากจะลอยองค์ประกอบสุดท้ายไปทางขวาโดยอัตโนมัติเมื่อแถวไม่รวมคอลัมน์ถึง 12
5	ยุบ / ไม่ยุบแถว การใช้ขนาดคิวรีสื่อคลาสการยุบและยกเลิกการยุบจะรวมอยู่ในองค์ประกอบแถวเพื่อแสดงการพาย
6	คอลัมน์กึ่งกลาง การรวมคลาสที่มีขนาดเล็กเป็นศูนย์กลางในคอลัมน์ทำให้คุณสามารถทำให้คอลัมน์อยู่ตรงกลางได้
7	การสั่งซื้อแหล่งที่มา คลาสการสั่งซอร์สใช้เพื่อเลื่อนคอลัมน์ระหว่างเบรกพอยต์
8	บล็อกกริด Block-grid ใช้เพื่อแยกเนื้อหา

การสร้างความหมาย

การใช้ชุดของ SASS mixins จะสร้างตาราง CSS ซึ่งใช้ในการสร้างตารางความหมายของคุณเอง สำหรับข้อมูลเพิ่มเติมคลิกที่นี่

การอ้างอิง SASS

ต่อไปนี้เป็นข้อมูลอ้างอิง SASS สำหรับกริดที่ใช้ใน Foundation

ซีเนียร์	กริดพื้นฐานและคำอธิบาย
1	ตัวแปร การใช้ตัวแปร sass เราสามารถปรับเปลี่ยนรูปแบบเริ่มต้นของส่วนประกอบนี้ได้
2	มิกซ์ ผลลัพธ์สุดท้ายของ CSS คือการสร้างโดยใช้ mixin