ตัวอย่างมูลนิธิกริด
ด้านล่างนี้เราได้เก็บรวบรวมตัวอย่างบางส่วนของตารางที่พบบ่อย
สามคอลัมน์เท่ากัน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างสามคอลัมน์เท่ากับ (33.3% / 33.3% / 33.3%) การแสดงสามคอลัมน์ในขนาดกลางและขนาดใหญ่อุปกรณ์ซ้อนอัตโนมัติบนอุปกรณ์ขนาดเล็ก:
ตัวอย่าง
<ระดับ Div = "ขนาด 4 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> .medium-4 </ p>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p> .medium-4 </ p>
</ div>
<ระดับ Div = "ขนาด 4 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> .medium-4 </ p>
</ div>
</ div>
ลอง»
คอลัมน์สามที่ไม่เท่ากัน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะสร้างสามคอลัมน์ไม่เท่ากัน (25% / 50% / 25%) การแสดงสามคอลัมน์ในขนาดกลางและขนาดใหญ่อุปกรณ์ซ้อนอัตโนมัติบนอุปกรณ์ขนาดเล็ก:
ตัวอย่าง
<ระดับ Div = "ขนาด 3 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> .medium-3 </ p>
</ div>
<ระดับ Div = "ขนาด 6 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p> .medium-6 </ p>
</ div>
<ระดับ Div = "ขนาด 3 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> .medium-3 </ p>
</ div>
</ div>
ลอง»
สองคอลัมน์ที่เท่าเทียมกัน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างสองคอลัมน์เท่ากัน (50% / 50%) สัดส่วนของขนาดเล็กขนาดกลางขนาดใหญ่และอุปกรณ์อยู่เสมอสูงกว่า 50% / 50%:
ตัวอย่าง
<ระดับ Div = "ขนาดเล็ก 6 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> .small-6 </ p>
</ div>
<div class = "ขนาดเล็ก 6 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p> .small-6 </ p>
</ div>
</ div>
ลอง»
สองคอลัมน์ที่ไม่เท่ากัน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างสองคอลัมน์ที่ไม่เท่ากัน (33.3% / 66.6%) สัดส่วนของขนาดเล็กขนาดกลางขนาดใหญ่และอุปกรณ์อยู่เสมอดังกล่าวข้างต้น 33.3% / 66.6%
ตัวอย่าง
<ระดับ Div = "ขนาดเล็ก 8 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;">
<p> .small-8 </ p>
</ div>
<div class = "ขนาดเล็ก 4 คอลัมน์" style = "สีพื้นหลังสีชมพู;">
<p> .small-4 </ p>
</ div>
</ div>
ลอง»
ปรับเปลี่ยนลำดับของคอลัมน์
โดยใช้ .small|medium|large-push-* และ .small|medium|large-pull-* ระดับการปรับเปลี่ยนลำดับของคอลัมน์นี้
ตัวอย่าง
<ระดับ Div = "ขนาดเล็ก 4 คอลัมน์เล็ก ๆ -8-ดัน" style = "พื้นหลังสี: สีเหลือง;">
<p> .small-4 .small- 8 ผลักดัน </ p>
</ div>
<ระดับ Div = "ขนาดเล็ก 8 คอลัมน์เล็ก ๆ -4-ดึง" style = "สีพื้นหลังสีชมพู;">
<p> .small-8 .small- 4 ดึง </ p>
</ div>
</ div>
ลอง»
คอลัมน์ที่ซ้อนกัน
คุณสามารถใช้กริดที่ซ้อนกัน (คอลัมน์แทรกคอลัมน์):
ตัวอย่าง
<div class = "ขนาดเล็ก 8 คอลัมน์"> .small-8
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 8 คอลัมน์"> .small-8 ที่ซ้อนกัน
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 8 คอลัมน์"> .small-8 ที่ซ้อนกันอีกครั้ง </ div>
<div class = "ขนาดเล็ก 4 คอลัมน์"> .small-4 </ div>
</ div>
</ div>
<div class = "ขนาดเล็ก 4 คอลัมน์"> .small-4 </ div>
</ div>
</ div>
<div class = "ขนาดเล็ก 4 คอลัมน์"> .small-4 </ div>
</ div>
ลอง»
ผสม: มือถือ, สก์ท็อป
ระบบมูลนิธิตารางมีสามคอลัมน์: .small-* (โทรศัพท์มือถือ) .medium-* (แบน) และ .large-* (สก์ท็อป) ชั้นเรียนเหล่านี้สามารถนำมาใช้ในการรวมกันแบบไดนามิกให้รูปแบบที่มีความยืดหยุ่นมากขึ้น:
เคล็ดลับ: แต่ละชั้นสามารถขยายถ้าคุณต้องการความกว้างของอุปกรณ์หน้าจอขนาดเล็กและขนาดใหญ่ที่สามารถตั้งค่าตามที่ระบุไว้ .small-*
ตัวอย่าง
<div class = "เล็ก-6 ขนาดใหญ่ 8 คอลัมน์"> .small-6 .large-8 </ div>
<div class = "เล็ก-6 ขนาดใหญ่ 4 คอลัมน์"> .small-6 .large-4 </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "เล็ก-2 ขนาดใหญ่ 4 คอลัมน์"> .small-2 .large-2 </ div>
<div class = "เล็ก-4 ขนาดใหญ่ 4 คอลัมน์"> .small-4 .large-2 </ div>
<div class = "เล็ก-6 ขนาดใหญ่ 4 คอลัมน์"> .small-6 .large-2 </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดเล็ก 3 ขนาดใหญ่ 5 คอลัมน์"> .small-3 .large-5 </ div>
<div class = "เล็ก-9 ขนาดใหญ่ 7 คอลัมน์"> .small-9 .large-7 </ div>
</ div>
ลอง»
ผสม: มือถือแท็บเล็ตและอุปกรณ์สก์ท็อป
ตัวอย่าง
<div class = "ขนาด 6 ขนาดใหญ่ 8 คอลัมน์"> .medium-6 .large-8 </ div>
<div class = "ขนาด 6 ขนาดใหญ่ 4 คอลัมน์"> .medium-6 .large-4 </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "เล็ก-4 ขนาดขนาดใหญ่ 3-7 คอลัมน์"> .small-4-3 .medium .large-7 </ div>
<div class = "เล็ก-4 ขนาด 6 ขนาดใหญ่ 3 คอลัมน์"> .small-4-6 .medium .large-3 </ div>
<div class = "เล็ก-4 ขนาด 3 ขนาดใหญ่ 2 คอลัมน์"> .small-4-3 .medium .large-2 </ div>
</ div>
ลอง»
คอลัมน์กลาง
คุณสามารถใช้ศูนย์คอลัมน์ .small-centered ระดับ ขนาดกลางและอุปกรณ์ขนาดใหญ่สามารถสืบทอดศูนย์กลางอุปกรณ์ขนาดเล็ก แต่คุณจะต้องตั้งชั้นเรียนเป็นศูนย์กลางในอุปกรณ์ขนาดใหญ่ .large-centered
ตัวอย่าง
<div class = "เล็ก-4 ขนาดเล็กเป็นศูนย์กลางคอลัมน์"> ขนาดเล็กขนาดเล็ก 4 เป็นศูนย์กลาง </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "เล็ก-6 ขนาดเล็กเป็นศูนย์กลางคอลัมน์"> ขนาดเล็กขนาดเล็ก 6 เป็นศูนย์กลาง </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "เล็ก-6 ที่มีขนาดใหญ่เป็นศูนย์กลางคอลัมน์"> ขนาดเล็กขนาดใหญ่ 6 เป็นศูนย์กลาง </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "เล็ก-8 ขนาดเล็กเป็นศูนย์กลางคอลัมน์ขนาดใหญ่ uncentered"> ขนาดเล็กขนาดเล็ก 8 เป็นศูนย์กลางขนาดใหญ่ uncentered </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "เล็ก-10 ขนาดเล็กเป็นศูนย์กลางคอลัมน์"> ขนาดเล็ก-10 ขนาดเล็กเป็นศูนย์กลาง </ div>
</ div>
ลอง»
คอลัมน์ Offset
คุณสามารถใช้ .large-offset-* (หรือ .small-offset-* ) ชั้นตั้งคอลัมน์ทางด้านขวา จำนวนของคอลัมน์ในระยะขอบซ้ายของการควบคุมโดยใช้เครื่องหมายดอกจัน:
ตัวอย่าง
<div class = "ขนาดใหญ่ 1 คอลัมน์"> 1 </ div>
<ระดับ Div = "ขนาดใหญ่ 11 คอลัมน์"> 11 </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 1 คอลัมน์"> 1 </ div>
<div class = "ขนาดใหญ่-10 ขนาดใหญ่ชดเชย-1 คอลัมน์"> 10 ชดเชย 1 </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 1 คอลัมน์"> 1 </ div>
<div class = "ขนาดใหญ่ 9 ขนาดใหญ่ชดเชย 2 คอลัมน์"> 9 ชดเชย 2 </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาดใหญ่ 1 คอลัมน์"> 1 </ div>
<div class = "ขนาดใหญ่-8 ขนาดใหญ่ชดเชย 3 คอลัมน์"> 8 ชดเชย 3 </ div>
</ div>
ลอง»
คอลัมน์ที่ไม่สมบูรณ์
ถ้าจำนวนคอลัมน์ของแถวและไม่ 12 มูลนิธิโดยอัตโนมัติจะเป็นคนสุดท้ายที่จะลอยที่เหมาะสมและว่างเปล่าในการกรอกข้อมูลในคอลัมน์ที่เหลือ
ตัวเลือก .end หมวดองค์ประกอบสำหรับที่ผ่านมาชุดหนึ่งที่จะลอยด้านซ้าย:
ตัวอย่าง
<div class = "ขนาด 3 คอลัมน์"> .medium-3 </ div>
<div class = "ขนาด 3 คอลัมน์"> .medium-3 </ div>
<div class = "ขนาด 3 คอลัมน์"> .medium-3 </ div>
</ div>
<ระดับ Div = "แถว">
<div class = "ขนาด 3 คอลัมน์"> .medium-3 </ div>
<div class = "ขนาด 3 คอลัมน์"> .medium-3 </ div>
<ระดับ Div = "ขนาด 3 คอลัมน์จบ"> .medium-3 .end </ div>
</ div>
จอไวด์สกรีน
กริด ( .row ) ขนาดสูงสุด (ความกว้างสูงสุด) เป็น 62.5rem บนจอไวด์สกรีนขนาดอาจจะมีขนาดใหญ่กว่า 62.5rem คอลัมน์นี้จะไม่กรอกหน้าแม้ว่าความกว้างที่ถูกกำหนดเป็น 100% แต่เราสามารถตั้งค่าใหม่ความกว้างสูงสุดผ่านทาง CSS:
หากคุณต้องการใช้สูงสุดเริ่มต้นของความกว้าง แต่สีพื้นหลังของหน้าทั้งหมดระหว่างนั้นคุณใช้ในองค์ประกอบภาชนะ .row ชั้นเรียนและคุณจะต้องระบุสีพื้นหลัง:
ตัวอย่าง
<ระดับ Div = "แถว">
<ระดับ Div = "ขนาดเล็ก 6 คอลัมน์" style = "พื้นหลังสี: สีเหลือง;"> .small-6 </ div>
<div class = "ขนาดเล็ก 6 คอลัมน์" style = "สีพื้นหลังสีชมพู;"> .small-6 </ div>
</ div>
</ div>
ลอง»