มูลนิธิกริด - อุปกรณ์กลาง
บทสุดท้ายที่เราแนะนำอุปกรณ์ขนาดเล็กที่เราใช้ .small-* ระดับการตั้งค่าอัตราส่วนตารางของ 25% / 75%:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
บนอุปกรณ์ขนาดกลางที่เราขอแนะนำให้อัตราส่วน 50% / 50%
เคล็ดลับ: ขนาดหน้าจอที่มีการกำหนดไว้ในขนาดกลางอุปกรณ์ 40.0625em เพื่อ 64.0624em ระหว่าง
ขนาดกลางอุปกรณ์ .medium-* หมวดหมู่
ตอนนี้เราเพิ่มสองบนอุปกรณ์ระดับกลาง:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
หรือไม่ในอินสแตนซ์ตั้งสองคอลัมน์อัตราส่วนคือ 25% และ 75% (มูลนิธิเป็นมือถือครั้งแรก: ถ้าไม่ได้ระบุอุปกรณ์ที่มีขนาดใหญ่จะได้รับมรดกรหัสระดับ .small):
สัดส่วนของอุปกรณ์ขนาดเล็ก% 25/75% ( .small-3 และ .small-9 ) อย่างไรก็ตามสัดส่วนของอุปกรณ์ขนาดกลางที่ใช้คือ% 50/50% ( .medium-6 และ .medium-6 )
ตัวอย่าง
<ระดับ Div = "ขนาดเล็ก 3 ขนาด 6 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> กวดวิชานี้ </ p>
</ div>
<div class = "เล็ก-9 ขนาด 6 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p> กวดวิชานี้ </ p>
</ div>
</ div>
ลอง»
 | หมายเหตุ: เพื่อให้แน่ใจว่าจำนวนของคอลัมน์เพิ่มขึ้นถึง 12! |
|---|
อุปกรณ์แน่นสำหรับใช้ในขนาดกลาง
ตัวอย่างต่อไปนี้เราระบุ .medium-6 ระดับ (ไม่ .small-* ) นี้แสดงให้เห็นว่าในอัตราส่วนอุปกรณ์ขนาดกลางหรือขนาดใหญ่ 50% / 50% แต่ในอุปกรณ์ขนาดเล็กที่ซ้อนกันในแนวนอน (กว้าง 100%):
ตัวอย่าง
<ระดับ Div = "ขนาด 6 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> กวดวิชานี้ </ p>
</ div>
<ระดับ Div = "ขนาด 6 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p> กวดวิชานี้ </ p>
</ div>
</ div>
ลอง»