รู้เบื้องต้นเกี่ยวกับเค้าโครงตาราง CSS วิธีสร้างเค้าโครงตาราง CSS ที่ตอบสนอง
ประมาณปี 2012 หรือ 2013 ฉันได้รับการแนะนำให้รู้จักกับการพัฒนาเว็บไซต์ ฉันเริ่มศึกษาทิศทางนี้ทีละน้อยด้วยตัวเอง ในไม่ช้าฉันก็รู้ว่า CSS ทำให้หลาย ๆ อย่างมีความหมาย แต่ก็ไม่ได้สร้างมาร์กอัปที่เพียงพอ มีแฮ็กมากมายจนยากเกินไปที่จะเข้าใจ นั่นคือเหตุผลที่มาตรฐานสมัยใหม่ซึ่งจะกล่าวถึงในบทความนี้จึงให้ความสนใจเป็นพิเศษกับการทำงานกับมาร์กอัป
สิ่งที่คุณจะได้เรียนรู้จากบทความนี้:
- วิธีที่คุณเคยทำงานกับมาร์กอัป CSS
- ความแตกต่างระหว่างแนวทางที่ล้าสมัยและมาตรฐานสมัยใหม่
- วิธีเริ่มต้นกับมาตรฐานใหม่ (Flexbox และ Grid)
- เหตุใดคุณจึงควรสนใจมาตรฐานสมัยใหม่เหล่านี้
เราเคยทำงานกับมาร์กอัป CSS อย่างไร
งาน
เรามาจำลองปัญหาที่ค่อนข้างมาตรฐานกัน: จะสร้างเพจที่มีสองส่วน - แถบด้านข้างและพื้นที่เนื้อหาหลัก - ให้มีความสูงเท่ากัน โดยไม่คำนึงถึงขนาดของเนื้อหาได้อย่างไร
นี่คือตัวอย่างสิ่งที่เราตั้งเป้าไว้:
แถบด้านข้างและพื้นที่เนื้อหาหลักมีความสูงเท่ากัน ไม่ว่าเนื้อหาจะมีขนาดเท่าใดก็ตาม
ก่อนอื่น ฉันจะแสดงให้คุณเห็นวิธีแก้ปัญหานี้โดยใช้แนวทางแบบเดิม
1. สร้าง div ด้วยสององค์ประกอบ
ตัวอย่างเช่น,
แน่นอนว่า main มีข้อความมากกว่า
เรามาเน้นสีกันเพื่อให้แยกแยะได้ง่ายขึ้น:
นอกเหนือ ( color: #fff; สีพื้นหลัง: #8cacea; )
2. วางทั้งสองส่วนไว้เคียงข้างกัน
เมื่อต้องการทำเช่นนี้ เราจะเขียนสิ่งต่อไปนี้:
นอกเหนือ main( float: left; )
สไตล์นี้แบ่งพื้นที่ว่างตามสัดส่วนที่ต้องการและจัดสรรไว้และหลักลอย
สองช่วงตึกตั้งอยู่ติดกัน
สำหรับผู้ที่ไม่คุ้นเคยกับโฟลต นี่เป็นวิธีค่อนข้างเก่าในการเคลื่อนย้ายองค์ประกอบไปทางซ้ายหรือขวา
ดังที่คุณเห็นในภาพด้านบน งานยังไม่เสร็จสมบูรณ์ - ความสูงของแถบด้านข้างไม่ตรงกับความสูงของพื้นที่หลัก มาแก้ไขปัญหานี้กัน
3. ใช้จอแสดงผล: เคล็ดลับตาราง
เพื่อแก้ปัญหานี้ คุณต้องใช้ display: table
หากคุณไม่คุ้นเคย ต่อไปนี้คือสิ่งที่คุณต้องทำ:
- เราสร้างคอนเทนเนอร์หลัก (ในกรณีของเราคือองค์ประกอบ body) เป็น table: body ( display: table; )
- เราลบโฟลตออกและทำให้องค์ประกอบลูกอยู่ด้านข้างและเซลล์ตารางหลัก: ด้านข้าง, หลัก( display: table-cell; )
เมื่อเราทำสิ่งนี้เสร็จแล้วก็สามารถพิจารณาแก้ไขปัญหาได้ อย่างน้อยนั่นก็เป็นวิธีที่จะแก้ไขได้ก่อนหน้านี้
ตอนนี้ทั้งสองบล็อกมีความสูงเท่ากัน
ความแตกต่างระหว่างแนวทางแบบเดิมและมาตรฐานสมัยใหม่
ตอนนี้คุณคงพอเข้าใจแล้วว่าที่ผ่านมาปัญหาได้รับการแก้ไขอย่างไร มาดูกันว่า Flexbox และ Grid ทำอะไรได้บ้าง
Flexbox และ Grid เป็นโซลูชันที่สมบูรณ์แบบสำหรับมาร์กอัป CSS และเป็นมาตรฐานสมัยใหม่ หากคุณต้องการเขียนโค้ด CSS ในระดับที่ดี อย่าลืมศึกษาโค้ดเหล่านั้นด้วย
การแก้ปัญหาโดยใช้ Flexbox
บริบทการจัดรูปแบบ Flexbox เริ่มต้นได้โดยการสร้างคอนเทนเนอร์แบบยืดหยุ่น.
องค์ประกอบหลักคือ body ประกอบด้วยแถบด้านข้างและพื้นที่หลัก สร้างคอนเทนเนอร์:
ร่างกาย ( จอแสดงผล: ดิ้น; )
การทำงานของ Flexbox
อย่าลืมเรื่องสัดส่วน:
นอกเหนือ (กว้าง: 25%; ) หลัก (กว้าง: 75%; )
แก้ไขปัญหาแล้ว
คุณสามารถทำสิ่งต่าง ๆ มากมายด้วย Flexbox:
และฉันได้สัมผัสเพียงปลายยอดภูเขาน้ำแข็งเฟล็กบ็อกซ์เท่านั้น
Flexbox มีอยู่ในเบราว์เซอร์ที่รองรับส่วนใหญ่ สามารถใช้งานได้เต็มรูปแบบใน Firefox ตั้งแต่เวอร์ชัน 28, Chrome จากเวอร์ชัน 29, Safari จากเวอร์ชัน 6.1 และ Edge ตั้งแต่เวอร์ชัน 12
บันทึก การแปล
เราจะช่วยให้คุณเข้าใจ Flexbox
การแก้ปัญหาโดยใช้กริด
ต่างจาก Flexbox ซึ่งส่วนใหญ่จะทำงานในมิติเดียว โดย CSS Grid คุณสามารถใช้ทั้งแถวและคอลัมน์ได้ เรามาดูวิธีแก้ปัญหาของเราด้วยความช่วยเหลือ
ทุกอย่างเริ่มต้นในลักษณะเดียวกับในกรณีของ Flexbox สร้างคอนเทนเนอร์:
ร่างกาย ( จอแสดงผล: ตาราง; )
นี่คือ CSS ทั้งหมด:
ร่างกาย ( display: grid; background-color: #eeeeee; ) กัน ( color: #fff; background-color: #8cacea; )
และนี่คือสิ่งที่เราได้รับ:
ตัวเลือกหลัก
Grid ใช้งานได้ในเบราว์เซอร์ส่วนใหญ่ที่รองรับ แม้ว่าจะมีปริมาณน้อยกว่าก็ตาม สามารถใช้งานได้เต็มรูปแบบใน Firefox เวอร์ชัน 52, Chrome เวอร์ชัน 57, Safari เวอร์ชัน 10.1 และ Edge เวอร์ชัน 16
ภาพล่าสุดของเรายังคงไม่แตกต่างจากภาพก่อนหน้า แล้วเวทย์มนตร์คืออะไร?
นอกเหนือ (กว้าง: 25%; ) หลัก (กว้าง: 75%; )
จะเกิดอะไรขึ้นถ้าเราแบ่งสัดส่วนความกว้างเหมือนเมื่อก่อน:
ใช่ผลลัพธ์แตกต่างออกไปแต่มันไม่เหมาะกับเรา แถบด้านข้างยังไม่ได้อยู่ที่ด้านข้างของพื้นที่หลัก
เรามาถึงแก่นแท้ของมาร์กอัปกริดแล้ว หลังจากเริ่มต้นคอนเทนเนอร์ Grid ด้วย display: grid แล้ว คุณจะต้องกำหนดแถวและแถวภายในคอนเทนเนอร์นั้น
ต่อไปนี้เป็นวิธีดำเนินการ:
เนื้อความ ( ตารางเทมเพลตคอลัมน์: 30% 70%; )
โซลูชันแบบบรรทัดเดียวนั้นสวยงามใช่ไหม grid-template-columns กำหนดสัดส่วนของคอลัมน์ในตาราง
แก้ไขปัญหาแล้ว
แต่คุณสามารถทำอะไรได้มากกว่านั้นกับกริด
ก่อนอื่น เรามาเพิ่มสีเล็กๆ น้อยๆ ให้กับบล็อกหลักเพื่อทำให้ตัวอย่างชัดเจนยิ่งขึ้น:
หลัก ( สีพื้นหลัง: rgba(39,174,96,1); สี: #fff; )
นี่คือสิ่งที่เราควรได้รับ:
เติมสีให้กับพื้นที่เนื้อหาหลัก
มาดูกันว่ากริดมีข้อดีอะไรบ้าง:
- คุณสามารถกำหนดช่องว่างระหว่างคอลัมน์: body ( grid-column-gap: 15px; )
นี่คือผลลัพธ์:
มันดูเรียบร้อยกว่ามากโดยมีช่องว่างระหว่างคอลัมน์
ไม่จำเป็นต้องเพิ่มช่องว่างภายในและบล็อกหลัก: grid-column-gap ทำอย่างนั้น
- คุณสามารถสร้างคอลัมน์ได้มากเท่าที่คุณต้องการ ตัวอย่างข้างต้นใช้เพียงองค์ประกอบเดียวและ main ขอเพิ่มอีกสอง:
Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ริดิคูลัส มัส Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem นัลลา คอนซีกวอต มัสซา คิส เอนิม. Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ริดิคูลัส มัส Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem นัลลา คอนซีกวอต มัสซา คิส เอนิม.
Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. เอเนียน มาสซ่า. Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem นัลลา คอนซีกวอต มัสซา คิส เอนิม.
เพิ่มตัวแบ่งบรรทัด
- เพื่อให้สิ่งต่าง ๆ ง่ายขึ้น คุณสามารถใช้ทางลัด: grid-gap: 15 px แทน grid-row-gap และ grid-column-gap
คุณสามารถกำหนดขนาดแถว: body ( grid-template-rows: 200px 300px 400px; )
ความสูงของแถวที่แตกต่างกัน
ตอนนี้ความสูงของบรรทัดแรก สอง และสามคือ 200, 300 และ 400 พิกเซล ตามลำดับ
นี่เพียงพอแล้วสำหรับการเริ่มต้น - แต่นี่ยังไม่ใช่ทั้งหมด
จะเริ่มต้นกับมาตรฐานใหม่ได้อย่างไร?
คุณได้เห็นตัวอย่างแล้วว่า Flexbox และ Grid มอบโซลูชันเค้าโครงที่ดีกว่าได้อย่างไร แล้วจะเริ่มต้นอย่างไร?
เหตุใดคุณจึงควรใส่ใจเกี่ยวกับมาตรฐานเหล่านี้
- หากคุณยังไม่เข้าใจว่าเหตุใด Flexbox และ Grid จึงคุ้มค่าที่จะใช้ ต่อไปนี้เป็นปัญหาบางประการที่คุณอาจพบในวิธีแก้ปัญหาก่อนหน้านี้:
- ด้วยการวางตำแหน่งที่แน่นอน องค์ประกอบสามารถทับซ้อนกันได้
- การใช้จอแสดงผล: ตารางทิ้งมาร์กอัปที่ไม่จำเป็นไว้มากมาย
- เมื่อใช้ inline-block จะมีปัญหากับพื้นที่ว่าง
ฉันคิดว่าคุณรู้อยู่แล้วว่า Grid นั้นเหนือกว่า Flexbox ในการสร้างเลย์เอาต์ แต่แล้วเลย์เอาต์ที่ตอบสนองล่ะ? Flexbox หรือ Grid ไหนดีกว่ากัน? ทั้งสองสามารถทำงานกับเค้าโครงที่ตอบสนองได้ คุณอาจคิดว่า Flexbox เหมาะสมกว่า เพราะรายการ Flex สามารถยืด หด เปลี่ยนทิศทาง ฯลฯ แต่จริงๆ แล้ว Grid มีเทคนิคใหม่ๆ บางอย่างที่จะช่วยคุณประหยัดเวลาและปัญหาสำหรับเลย์เอาต์แบบตอบสนองได้มาก
ฟังก์ชั่นขั้นต่ำแม็กซ์
เครื่องมือ Grid ใหม่อันโดดเด่นตัวแรกคือฟังก์ชัน minmax ซึ่งช่วยให้เราสามารถกำหนดช่วงสำหรับคอลัมน์และแถวในเลย์เอาต์ของเราได้ ในตัวอย่างนี้ เรามีแถบด้านข้างสีส้ม และเราต้องการให้ความกว้างอย่างน้อย 100 พิกเซล แต่ไม่เกิน 30% ของความกว้างของคอนเทนเนอร์ ความกว้างของคอนเทนเนอร์คือ 500 พิกเซล ดังนั้นแถบด้านข้างของเราจึงใช้งานได้ถึง 30% (150 พิกเซล)
นี่คือรหัสเดียวกันทุกประการ แต่ความกว้างของคอนเทนเนอร์น้อยกว่า 150px ตอนนี้ค่าต่ำสุดของเราเริ่มทำงานแล้วและทำให้แถบด้านข้างสีส้มมีขนาดไม่เล็กกว่า 100px
วิธีการทำงานของฟังก์ชัน minmax นั้นน่าทึ่งมาก โดยส่วนใหญ่แล้วคุณไม่จำเป็นต้องใช้คำสั่งสื่อด้วยซ้ำ
เราสามารถบรรลุผลที่คล้ายกันได้โดยใช้ Flexbox แต่ต้องใช้การทำงานและโค้ดเพิ่มขึ้นอีกเล็กน้อย เราต้องใช้การรวมกันของ flex-grow, min-width, max-width:
วิธีกริดมีความยืดหยุ่นและปรับเปลี่ยนได้ง่ายกว่า รหัสน้อยกว่าเกือบสองเท่า
กฎข้อเดียวสำหรับทุกองค์ประกอบ
หากคุณต้องการคำสั่งสื่อ ด้วยเค้าโครงตารางก็ทำได้ง่าย สมมติว่าเราต้องการเปลี่ยนเค้าโครงนี้บนมือถือเป็นคอลัมน์เดียว ด้วย Flexbox เราจะต้องเปลี่ยนทุกองค์ประกอบในเค้าโครงเพื่อแทนที่ความกว้างขั้นต่ำ ไม่จำเป็นต้องแทนที่ความกว้างสูงสุด เนื่องจากความกว้างขั้นต่ำจะมีความสำคัญกว่า
หากคุณมีเลย์เอาต์ที่เรียบง่าย วิธีนี้ใช้ได้ผลค่อนข้างดี แต่ยิ่งเลย์เอาต์ของคุณซับซ้อนมากขึ้นเท่าไร คุณก็ยิ่งต้องกำหนดองค์ประกอบใหม่ผ่านการสืบค้นสื่อมากขึ้นเท่านั้น ด้วยความช่วยเหลือของกริด ปัญหานี้จึงแก้ไขได้ง่ายขึ้นมาก
สวัสดีทุกคน! วันนี้เราจะมาพูดถึง ระบบกริดคืออะไร?หรือเพียงแค่ กริดที่ยืดหยุ่นในรูปแบบที่ปรับเปลี่ยนได้.
ก่อนอื่นเรามากำหนดว่ามันคืออะไร ระบบกริด.
ระบบกริด- ชุดของสไตล์ตามคลาสที่อนุญาตให้ผู้ใช้ควบคุมเค้าโครงหน้าโดยใช้ระบบแถวและคอลัมน์
สมมติว่าเรามีหน้าบล็อก แบ่งออกเป็น 2 คอลัมน์: ส่วนหลักทางด้านซ้าย และแถบด้านข้างทางด้านขวา เรามาลองสร้างกริดแบบยืดหยุ่นสำหรับเพจดังกล่าวกัน
ก่อนอื่นเราต้องทำอะไรขั้นพื้นฐานก่อน แต่... htmlเครื่องหมาย
ที่นี่เรามีบล็อกที่มีทั้งหน้า ประกอบด้วยบล็อกที่มีบล็อกซึ่งมี 2 บล็อก: ส่วนหลักของหน้าและแถบด้านข้าง
ดังนั้นทั้งหน้าของเราก็จะมีขนาดเท่ากัน 960px- ตารางทั้งหมดแบ่งออกเป็น 12 คอลัมน์ 69px- แต่ละ. ส่วนบล็อกจะกว้าง 900px- ส่วนหลักของหน้าจะเป็น 566px, แถบด้านข้าง - 331px.
นี่คือสิ่งที่เราได้รับในที่สุด
#หน้าหนังสือ (
ระยะขอบ: 36px อัตโนมัติ;
ความกว้าง: 960px;
}
บล็อก (
ระยะขอบ: 0 อัตโนมัติ 53px;
ความกว้าง: 900px;
}
บล็อก.หลัก (
ลอย: ซ้าย;
ความกว้าง: 566px;
}
บล็อก .แถบด้านข้าง (
ลอย: ขวา;
ความกว้าง: 331px;
}
ทุกอย่างจะเรียบร้อยดี แต่อย่างที่คุณเห็น ทั้งหมดนี้เป็นแบบคงที่ซึ่งกำหนดเป็นพิกเซล เราต้องการให้ตารางของเราเปลี่ยนขนาดขึ้นอยู่กับหน้าจอที่ดูหน้าเว็บ ดังนั้นเราจึงจำเป็นต้องตั้งค่าทุกอย่าง เปอร์เซ็นต์- มาทำสิ่งนี้กันเถอะ
ด้วยเหตุนี้จึงมีสูตรเดียวกันกับแบบอักษร
เป้าหมาย / บริบท = ผลลัพธ์
มาแปลงบล็อกของทั้งหน้าจากพิกเซลเป็นเปอร์เซ็นต์กัน
#หน้าหนังสือ (
ระยะขอบ: 36px อัตโนมัติ;
ความกว้าง: 90%;
}
90% ที่เลือกเพราะในกรณีนี้เราก็จะมีรอยเยื้องตามขอบตลอดด้วย 5% - อย่างไรก็ตาม คุณสามารถเลือกค่าอื่นได้
เราใช้สูตรของเรา: 900 / 960 = 0.9357
ลองคูณผลลัพธ์ด้วย 100 เพื่อรับดอกเบี้ยและเราจะลงทะเบียนไว้ในของเรา ซีเอสเอส.
บล็อก (
ระยะขอบ: 0 อัตโนมัติ 53px;
ความกว้าง: 93.75%;
}
จำเป็นต้องทำสิ่งเดียวกันกับคอลัมน์ แต่สังเกตว่าบริบทมีการเปลี่ยนแปลง เพราะ คอลัมน์อยู่ภายในบล็อกที่มีคลาส .บล็อกจากนั้นมันจะเป็นบริบท มาทำคณิตศาสตร์กัน
566 ۞ 900 = .628888889
331 ۞ 900 = .367777778
เราแปลงทุกอย่างเป็นเปอร์เซ็นต์แล้วเขียนลงในสไตล์ชีต
บล็อก.หลัก (
ลอย: ซ้าย;
ความกว้าง: 62.8888889%;
}
บล็อก .แถบด้านข้าง (
ลอย: ขวา;
ความกว้าง: 36.7777778%;
}
แค่นั้นแหละ! ตอนนี้เรามีตารางที่ยืดหยุ่นและสามารถใช้เป็นเค้าโครงได้
อย่างที่คุณเห็นทุกอย่างง่ายมาก พื้นฐานของกริดแบบยืดหยุ่น เช่น ฟอนต์แบบยืดหยุ่น นั้นเป็นสูตรเดียวกัน โดยจำไว้ว่าคุณสามารถสร้างเว็บไซต์แบบตอบสนองได้อย่างง่ายดาย
บันทึก!อย่างที่คุณเห็น เราได้ค่าเปอร์เซ็นต์ที่ค่อนข้างยาว บางคนอาจแนะนำให้คุณปัดเศษมัน แต่คุณไม่ควรทำเช่นนี้! จดจำ!
นั่นคือทั้งหมดสำหรับฉัน ขอบคุณสำหรับความสนใจและเลย์เอาต์ที่ปรับเปลี่ยนได้สำเร็จ!
บทความนี้แสดงวิธีการทำงานของเทคโนโลยีที่ค่อนข้างใหม่นี้ วิธีการทำงานอย่างชัดเจน ไม่ใช่แค่คำอธิบายคุณสมบัติพร้อมตัวอย่างผิวเผิน
บทความนี้เป็นการแปลแบบเพิ่มการตอบสนองของ CSS Grid Tutorial
โมดูล CSS Grid ได้รับการพัฒนาโดยคณะทำงาน CSS เพื่อมอบวิธีที่ดีที่สุดในการสร้างเทมเพลตใน CSS รวมอยู่ใน Candidate Recommendation ในเดือนกุมภาพันธ์ 2017 และเบราว์เซอร์หลักๆ เริ่มรองรับในเดือนมีนาคม 2017
CSS Grid จะกลายเป็นส่วนสำคัญของชุดเครื่องมือของนักพัฒนาส่วนหน้าในไม่ช้า และถ้าคุณเป็นหนึ่งในนั้น คุณจะต้องเรียนรู้ CSS Grid — ซึ่งเกือบจะเป็นทักษะที่ไม่สามารถต่อรองได้สำหรับตำแหน่งการพัฒนาส่วนหน้า
ด้วยฟังก์ชันการทำงานอันทรงพลังและไวยากรณ์ที่ใช้งานง่าย เทมเพลตกริดจะเปลี่ยนวิธีการสร้างเว็บอย่างไม่ต้องสงสัย
การแนะนำ
CSS Grid คือโมเดลเทมเพลตใหม่ที่ปรับให้เหมาะกับเทมเพลต 2D เป็นโมเดลในอุดมคติสำหรับเทมเพลตเว็บไซต์ แบบฟอร์ม แกลเลอรี และทุกสิ่งที่ต้องการตำแหน่งที่แม่นยำและตอบสนองได้ดี
ด้วยการพัฒนาเว็บในช่วงไม่กี่ปีที่ผ่านมา การพัฒนาเทมเพลตเว็บไซต์จึงกลายเป็นเรื่องยากมากขึ้น ในช่วงปีแรก ๆ ของเว็บ ตาราง HTML มักใช้สำหรับเทมเพลต แบบฟอร์ม ฯลฯ แบบหลายคอลัมน์ แต่วิธีนี้ก็มีข้อเสียอยู่ ซึ่งหมายความว่าจะต้องนำเสนอในระดับมาร์กอัป ดังนั้นจึงไม่มีความแตกต่างระหว่างการนำเสนอและเนื้อหา ในความเป็นจริง ตารางถูกสร้างขึ้นเพื่อให้มีข้อมูลแบบตาราง ไม่ใช่เพื่อสร้างเทมเพลต และหากไม่มีการพูดถึงปัญหาด้านความหมาย เทมเพลตตารางจะไม่ถูกสร้างขึ้นสำหรับการออกแบบแบบตอบสนอง
ในที่สุด Floats ก็เข้ามาแทนที่เทมเพลตตารางซึ่งเป็นวิธีที่เป็นที่ยอมรับในระดับสากลและแนะนำในการสร้างเทมเพลต เนื่องจากช่วยให้เราสามารถวางตำแหน่งองค์ประกอบต่างๆ โดยไม่คำนึงถึงเค้าโครง อย่างไรก็ตาม แม้ว่าวิธีนี้จะถือเป็นการปรับปรุงที่สำคัญกว่ารูปแบบตาราง แต่ก็มีข้อจำกัดเช่นกัน โฟลตได้รับการออกแบบสำหรับเทมเพลตเอกสารเป็นหลัก และไม่เหมาะกับเทมเพลตแอปพลิเคชันที่ซับซ้อนซึ่งปัจจุบันพบเห็นได้ทั่วไปบนเว็บ องค์ประกอบแบบลอยเป็นเรื่องยากที่จะควบคุม โดยเฉพาะบนอุปกรณ์และวิวพอร์ตที่มีขนาดต่างกัน สิ่งนี้นำไปสู่การแฮ็กแบบตารางต่างๆ ซึ่งกลายเป็นเรื่องปกติ ส่วนใหญ่ต้องใช้มาร์กอัปเพิ่มเติม ซึ่งเบี่ยงเบนไปจากแนวคิดทั้งหมดในการแยกเนื้อหา ดังนั้นคณะทำงาน CSS จึงมองหาโซลูชันที่ดีกว่า
โมเดล CSS Grid แก้ไขปัญหาเหล่านี้และอื่นๆ อีกมากมาย ช่วยให้คุณสร้างเทมเพลตขั้นสูงโดยใช้เวลาเพียงเล็กน้อยกับฟลีตและเขียนโค้ดน้อยลง
แต่แน่นอน คุณสามารถใช้ค่าที่แตกต่างกันสำหรับสิ่งนี้ เช่น 100px, 7em, 30% และอื่นๆ คุณยังสามารถกำหนดชื่อให้กับสตริงพร้อมกับขนาดของมันได้
ตารางเทมเพลตคอลัมน์: 1fr 1fr 1fr
เช่นเดียวกับข้างต้น กำหนดเฉพาะคอลัมน์ในกริดเท่านั้น
เผยให้เห็นช่องว่าง นั่นคือช่องว่างระหว่างองค์ประกอบตาราง ที่นี่เราใช้หน่วยความยาว vw ซึ่งสัมพันธ์กับความกว้างของวิวพอร์ต แต่เรายังสามารถใช้ 10px, 1em เป็นต้น คุณสมบัติ grid-gap เป็นการจดชวเลขสำหรับ grid-row-gap และ grid-column-gap คุณสมบัติ.
อีกส่วนหนึ่งของโค้ดเพียงกำหนดสไตล์ที่แตกต่างให้กับองค์ประกอบกริด
#กริด >
ทำซ้ำ() ฟังก์ชัน
คุณสามารถใช้ฟังก์ชันทำซ้ำ() เพื่อประกาศค่าขนาดขององค์ประกอบซ้ำได้ ตัวอย่างเช่น แทนที่จะทำสิ่งนี้:
ตารางเทมเพลตแถว: 1fr 1fr 1fr 1fr 1fr;
เราสามารถทำได้:
ตารางเทมเพลตแถว: ทำซ้ำ (5, 1fr);
ซึ่งจะช่วยลดจำนวนโค้ดที่คุณต้องเขียนลงอย่างมาก โดยเฉพาะอย่างยิ่งหากคุณทำงานกับกริดขนาดใหญ่และซ้ำกัน
การสร้างเทมเพลตเว็บไซต์ด้วย CSS Grid
ตารางมีไวยากรณ์ "กราฟิก ASCII" ที่ใช้งานง่าย ซึ่งคุณสามารถ "ดู" เทมเพลตในโค้ดได้เสมือนจริง ทำให้ง่ายต่อการสร้างและแก้ไขเทมเพลตของคุณ แม้แต่การเปลี่ยนแปลงที่สำคัญก็สามารถทำได้ภายในไม่กี่วินาที ไวยากรณ์ที่ใช้งานง่ายนี้ยังช่วยในการออกแบบเว็บแบบตอบสนองอีกด้วย การสร้างเทมเพลตที่แตกต่างกันสำหรับอุปกรณ์ต่างๆ จะกลายเป็นเรื่องง่ายเมื่อใช้กริด
ตอนนี้เรามาสร้างเทมเพลตเว็บไซต์ที่มีลักษณะดังนี้:
และนี่คือโค้ดสำหรับเทมเพลตนี้:
มาดูโค้ดของเรากันดีกว่า มาร์กอัป HTML มีลักษณะดังนี้:
และเราจะทำอย่างนั้น
คอนเทนเนอร์กริด ดังนั้นองค์ประกอบอื่นๆ ทั้งหมดจึงกลายเป็นองค์ประกอบกริดตอนนี้เรามาดูกราฟิก ASCII ที่เราพูดถึงก่อนหน้านี้กันดีกว่า
พื้นที่เทมเพลตกริด: “ส่วนหัวส่วนหัว” “โฆษณาบทความนำทาง” “ส่วนท้ายส่วนท้าย”;
งานชิ้นนี้จะกำหนดเทมเพลตของเรา เพียงดูโค้ดเราจะเห็นว่าเป็นตารางขนาด 3x3 (สามแถวและสามคอลัมน์) สิ่งนี้ทำให้เรามีพื้นที่กริดห้าเซลล์บนเซลล์กริดเก้าเซลล์ เนื่องจากพื้นที่กริดบางส่วนขยายหลายเซลล์
นอกจากนี้เรายังเห็นว่าส่วนหัวกินพื้นที่แถวแรกทั้งหมดจากสามเซลล์ และส่วนท้ายกินพื้นที่แถวล่างทั้งหมด ซึ่งกินพื้นที่ถึงสามเซลล์เช่นกัน ส่วนการนำทาง เนื้อหา และการโฆษณาทั้งหมดใช้พื้นที่ร่วมกันในแถวที่สอง โดยที่แต่ละองค์ประกอบเหล่านี้จะมีเซลล์เดียว
ตอนนี้เราสามารถกำหนดพื้นที่ตารางให้กับแต่ละองค์ประกอบได้แล้ว:
#pageHeader ( grid-area: header; ) #pageFooter ( grid-area: footer; ) #mainArticle ( grid-area: article; ) #mainNav ( grid-area: nav; ) #siteAds ( grid-area: ads; )
คุณสมบัติพื้นที่ตารางเป็นคุณสมบัติชวเลขที่ช่วยให้คุณวางองค์ประกอบตารางบนตาราง ในกรณีของเรา เราเพียงแต่อ้างถึงชื่อที่เราระบุไว้ก่อนหน้านี้ในพื้นที่เทมเพลตกริด
เทมเพลตส่วนใหญ่เสร็จสมบูรณ์แล้ว โค้ดที่เหลือจะเกี่ยวข้องกับมิติ ช่องว่าง และความสูง โดยทั่วไปจะเป็นพื้นที่ตกแต่งมากกว่า
รหัสต่อไปนี้ให้ขนาดของแถวและคอลัมน์:
ตารางเทมเพลตแถว: 60px 1fr 60px;
ตารางเทมเพลตคอลัมน์: 20% 1fr 15%;
บรรทัดแรกและบรรทัดที่สามมีความสูง 60px ทั้งคู่ และบรรทัดที่สองใช้พื้นที่ที่เหลือทั้งหมด
คอลัมน์แรกคือ 20% และคอลัมน์ที่สามคือ 15% อันที่สองใช้พื้นที่ที่เหลือทั้งหมด
การเปลี่ยนเทมเพลต
คุณสามารถเปลี่ยนเทมเพลตได้ง่ายๆ โดยการจัดเรียงพื้นที่กริดใหม่ใน grid-template-areas
ดังนั้นหากเราเปลี่ยนเป็นสิ่งนี้:
พื้นที่เทมเพลตกริด: “ส่วนหัวของส่วนหัวของ nav” “โฆษณาบทความของ nav” “โฆษณาส่วนท้ายของ nav”;
ด้วยเหตุนี้เราจึงได้เทมเพลตต่อไปนี้:
อย่างไรก็ตาม คุณอาจต้องปรับขนาดหากคุณย้ายตารางที่เล็กลงไปยังตำแหน่งที่ใหญ่ขึ้น
ตัวอย่างเช่น เมื่อต้องการทำสิ่งนี้:
ขณะนี้การนำทางใช้พื้นที่ที่มีเนื้อหา ดังนั้นขนาดจึงได้รับการปรับขนาด ไม่เช่นนั้นเราจะมีเนื้อหาที่แคบและมีการนำทางที่กว้าง ดังนั้นโค้ดตอนนี้จะเป็นแบบนี้
Grid-template-areas: “header header header” “article nav ads” /* ก่อนหน้านี้มี “nav article ads” */ “footer footer footer”;
ตารางเทมเพลตแถว: 60px 1fr 60px;
ตารางเทมเพลตคอลัมน์: 1fr 20% 15%; /* ก่อนหน้านี้คือ '20% 1fr 15%' */
นี่คือผลลัพธ์:
การสร้างกริดแบบปรับเปลี่ยนได้
เทมเพลตกริดมีค่าต่างๆ เช่น การเติมอัตโนมัติและการปรับพอดีอัตโนมัติ ซึ่งช่วยให้คุณสร้างกริดที่มีแทร็กหลายขนาดในคอนเทนเนอร์ได้ ซึ่งอาจหมายความว่าตารางมีการตอบสนอง ซึ่งหมายความว่าองค์ประกอบจะเปลี่ยนตำแหน่งเมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์
ในนั้นคอลัมน์จะมีขนาดขั้นต่ำ 150px และพื้นที่ว่างสูงสุดสูงสุด รางดังกล่าวจะถูกทำซ้ำหลาย ๆ ครั้งตามความจำเป็นเพื่อให้พอดีกับคอนเทนเนอร์
ฟังก์ชัน Repeat() จะทำซ้ำคำจำกัดความของแทร็กตามจำนวนครั้งที่ระบุโดยพารามิเตอร์แรก การใช้การเติมอัตโนมัติจะทำให้แทร็กทำซ้ำได้มากที่สุดเท่าที่จะเป็นไปได้จนกว่าจะเต็มคอนเทนเนอร์
ขนาดของแทร็กเหล่านี้ระบุไว้ในพารามิเตอร์ตัวที่สอง ในกรณีของเรา เราใช้ minmax(150px, 1fr) เพื่อระบุว่าขนาดคอลัมน์ขั้นต่ำคือ 150px และขนาดสูงสุดคือ 1fr
ปรับให้พอดีอัตโนมัติ
การปรับพอดีอัตโนมัติทำงานเหมือนกับการเติมอัตโนมัติ ข้อแตกต่างเพียงอย่างเดียวคือ การปรับให้พอดีอัตโนมัติจะดึงแทร็กว่างทั้งหมดที่ส่วนท้ายของตำแหน่งมารวมกัน ในขณะที่การป้อนอัตโนมัติไม่ดึงมารวมกัน วิธีที่ดีที่สุดคือการสาธิตพร้อมการเปรียบเทียบ
การใช้องค์ประกอบตารางเล็กๆ สองรายการที่นี่จะช่วยแสดงแนวคิดทั้งหมดของงาน การเติมอัตโนมัติจะปล่อยแทร็กว่างไว้ที่ส่วนท้ายตามขนาดที่ระบุ และการปรับพอดีอัตโนมัติจะขยายแทร็กว่าง ซึ่งส่งผลให้แทร็กถูกเติมด้วยองค์ประกอบที่ยืดออกเพื่อเติมเต็มพื้นที่
กริดที่มีการสืบค้นสื่อ
จุดแข็งประการหนึ่งของกริดคือคุณสามารถสร้างเทมเพลตที่แตกต่างไปจากเดิมอย่างสิ้นเชิงได้ภายในไม่กี่วินาที
ทำให้กริดเหมาะสำหรับการสืบค้นสื่อ เราสามารถกำหนดค่าใหม่ในกราฟิก ASCII และรวมผลลัพธ์ไว้ในคิวรีสื่อได้
นี่คือเทมเพลตสามคอลัมน์บนวิวพอร์ตขนาดใหญ่ และบีบอัดเป็นเทมเพลตคอลัมน์เดียวบนอุปกรณ์ขนาดเล็ก ดังนั้นตัวอย่างนี้จะดูแตกต่างออกไปขึ้นอยู่กับขนาดหน้าจอ ไม่ว่าในกรณีใด นี่คือโค้ดที่เกี่ยวข้องสำหรับเทมเพลตสามคอลัมน์สำหรับวิวพอร์ตแบบกว้าง
พื้นที่เทมเพลตกริด: “ส่วนหัวส่วนหัว” “โฆษณาบทความนำทาง” “ส่วนท้ายส่วนท้าย”;
และนี่คือรหัสที่เกี่ยวข้องสำหรับเวอร์ชันมือถือ:
พื้นที่เทมเพลตกริด: “ส่วนหัว” “บทความ” “โฆษณา” “นำทาง” “ส่วนท้าย”;
ดังนั้นประเด็นทั้งหมดคือการกำหนดค่าใหม่ในคุณสมบัติ grid-template-areas
ในกรณีของเรา เราได้รวมเวอร์ชันสำหรับมือถือไว้ในคิวรีสื่อ เช่นนี้
@media ทั้งหมด และ (ความกว้างสูงสุด: 575px) ( body ( grid-template-areas: “header” “article” “ads” “nav” “footer”; grid-template-rows: 80px 1fr 70px 1fr 70px; grid- เทมเพลตคอลัมน์: 1fr;
โปรดทราบว่าเราได้ปรับค่าใน grid-template-rows และ grid-template-columns เพื่อให้ตรงกับเทมเพลตใหม่ โดยเฉพาะอย่างยิ่งควรมีเพียงคอลัมน์เดียวและควรใช้พื้นที่ว่างทั้งหมด และเนื่องจากองค์ประกอบกริดทั้งหมดจะอยู่ในฮีปเดียว เราจะกำหนด 5 แถวและกำหนดความสูงของพวกมัน
การรวมกริดเข้ากับบล็อก
ไม่มีอะไรหยุดคุณจากการเปลี่ยนเวอร์ชันมือถือเพื่อแสดง: block ทั้งนี้ขึ้นอยู่กับข้อกำหนดของเทมเพลตของคุณ ชอบที่นี่:
@media all และ (ความกว้างสูงสุด: 575px) ( body ( display: block; ) )
ซึ่งจะทำงานเหมือนกับในตัวอย่างด้านบน แต่โดยค่าเริ่มต้น องค์ประกอบจะปรากฏในลำดับเดิม ในตัวอย่างข้างต้น เวอร์ชันมือถือจะมีการนำทางอยู่ใต้โฆษณา แต่ถ้าเราใช้ display: block การนำทางก็จะอยู่เหนือโฆษณา
นอกจากนี้ หากใช้วิธีนี้ คุณอาจต้องเพิ่มช่องว่างภายในเพื่อชดเชยการไม่มีช่องว่างที่รวมอยู่ในเวอร์ชันกริด
กริดที่ชัดเจนและโดยนัย
CSS Grid ใช้แนวคิดของกริดที่ชัดเจนและกริดโดยนัย นี่เป็นแนวคิดหลักที่คุณต้องระมัดระวังเมื่อสร้างกริด ไม่เช่นนั้นคุณจะพบแถวและคอลัมน์มากมายที่คุณไม่เคยคาดคิดมาก่อน
ตารางที่ชัดเจนคือตารางที่คุณกำหนดในตารางเทมเพลตแถว ตารางเทมเพลตคอลัมน์ และพื้นที่เทมเพลตกริด
อย่างไรก็ตาม คุณอาจยังมีองค์ประกอบที่ไม่พอดีกับตารางที่กำหนด "อย่างชัดเจน" ตัวอย่างเช่น คุณได้กำหนดตารางที่สามารถเก็บองค์ประกอบได้เพียงหกองค์ประกอบ แต่แท้จริงแล้วตัวคอนเทนเนอร์นั้นประกอบด้วยองค์ประกอบเก้ารายการ มีเพียงหกองค์ประกอบเท่านั้นที่จะพอดีกับตารางที่ชัดเจน และอีกสามองค์ประกอบจะยังคงอยู่ และนั่นคือที่มาของกริดโดยนัย
กริดโดยนัยจะถูกสร้างขึ้นโดยอัตโนมัติโดยคอนเทนเนอร์กริดเมื่อใดก็ตามที่องค์ประกอบของกริดอยู่นอกกริดที่ชัดเจน คอนเทนเนอร์สร้างแทร็กกริดโดยนัยโดยการเพิ่มแถวโดยนัยลงในกริด เส้นเหล่านี้ร่วมกับกริดที่ชัดเจน ก่อให้เกิดเส้นโดยนัย นี่คือตัวอย่าง:
ในตัวอย่างนี้ เรากำหนดสองแถวและสองคอลัมน์อย่างชัดเจน ซึ่งจะรองรับองค์ประกอบตารางสี่รายการ อย่างไรก็ตาม มีองค์ประกอบตารางอยู่หกรายการ ดังนั้นจึงมีการสร้างตารางโดยนัยขึ้นเพื่อรองรับองค์ประกอบเพิ่มเติมทั้งสองรายการ
และนั่นเป็นสิ่งที่ดีมาก หากไม่มีการสร้างกริดโดยนัย องค์ประกอบเพิ่มเติมทั้งสองก็จะสร้างความยุ่งเหยิงในกริดโดยสิ้นเชิง
การตั้งค่าขนาดแทร็กสำหรับกริดโดยนัย
คุณอาจสังเกตเห็นว่าแถวพิเศษไม่สูงเท่ากับสองแถวก่อนหน้า เนื่องจากเราตั้งค่าความสูงของแถวในคุณสมบัติ grid-template-rows แต่จะใช้ได้กับกริดที่ชัดเจนเท่านั้น ต้องตั้งค่าความสูงของแถวบนกริดโดยนัยโดยใช้คุณสมบัติ grid-auto-rows แต่เนื่องจากเราไม่ได้ทำสิ่งนี้ ปรากฎว่าแถวโดยนัยใช้ขนาดแทร็กอัตโนมัติ ซึ่งขึ้นอยู่กับเนื้อหา นี่คือลักษณะที่ตั้งของคุณสมบัติสำหรับการตั้งค่าขนาดแทร็ก:
โดยทั่วไปจะเป็นดังนี้:
ตารางที่ชัดเจนใช้ grid-template-rows และ grid-template-columns
ตารางโดยนัยใช้ grid-auto-rows และ grid-auto-columns
ในกรณีนี้ เราไม่จำเป็นต้องระบุค่าสิ้นสุดในองค์ประกอบแรกเนื่องจากจะครอบคลุมเพียงแทร็กเดียวเท่านั้น เช่นเดียวกันอาจกล่าวได้เกี่ยวกับองค์ประกอบตารางที่สอง ตามค่าเริ่มต้น หากคุณไม่ระบุบรรทัดสิ้นสุด องค์ประกอบจะขยายเพียงแทร็กเดียว
ที่จริงแล้ว เราไม่จำเป็นต้องระบุตำแหน่งใดๆ สำหรับองค์ประกอบกริดแรก เนื่องจากองค์ประกอบกริดแรกนั้นอยู่ในตำแหน่งใดตำแหน่งหนึ่ง ยังไงซะมันก็คงจะอยู่ที่นั่นอยู่แล้ว แต่ถ้าเราไม่ได้ระบุตำแหน่งขององค์ประกอบที่สอง ก็จะตั้งอยู่ถัดจากองค์ประกอบแรกทันที โดยมีเพียง 1 แทร็กเท่านั้น
การตั้งชื่อเส้นกริด
คุณยังสามารถตั้งชื่อเส้นตารางเพื่อให้อ้างอิงได้ง่ายขึ้น ซึ่งสามารถทำได้โดยการตั้งค่าคุณสมบัติ grid-template-rows และ grid-template-columns เช่นที่นี่:
#grid ( display: grid; /* ตั้งค่าแทร็กและตั้งชื่อบรรทัด */ grid-template-rows: 50px 1fr 80px ; grid-template-columns: 120px 1fr 80px ; grid-gap: 5px; height: 90vh; ) .. /* ตอนนี้อ้างถึงบรรทัดที่มีชื่อเหล่านั้น */ #item2 ( grid-row-start: row3-start; grid-column-start: col2-start; grid-row-end: row3-end; grid-column-end : col3 -end)
บรรทัดที่มีชื่ออาจเป็นได้ทั้งแบบชัดแจ้งหรือโดยนัย เส้นที่มีชื่อโดยนัยจะถูกสร้างขึ้นเมื่อใดก็ตามที่คุณสร้างพื้นที่กริดที่มีชื่อโดยใช้ grid-template-areas
ชื่อนี้นำมาจากพื้นที่กริดโดยเพิ่ม -start และ -end ต่อท้าย ขึ้นอยู่กับว่าเป็นจุดเริ่มต้นหรือจุดสิ้นสุดของบรรทัด
ดังนั้น สำหรับแต่ละพื้นที่กริดที่มีชื่อส่วนหัว จะมีการสร้างบรรทัดโดยนัยสี่บรรทัด สองชื่อมีชื่อว่า header-start และ column-start ในพื้นที่กริดที่มีชื่อ และอีกสองชื่อมีชื่อว่า header-end ตามลำดับ
ตั้งชื่อพื้นที่กริด
พื้นที่กริดสามารถตั้งชื่อได้ในคุณสมบัติ grid-template-areas ของคอนเทนเนอร์กริดเอง นี่คือสิ่งที่เราทำก่อนหน้านี้เมื่อเราสร้างเทมเพลตไซต์ หากต้องการคืนค่าสิ่งนี้ในหน่วยความจำ ดูเหมือนว่านี้:
#grid ( display: grid; /* ตั้งชื่อพื้นที่กริด */ grid-template-areas: “a a” “b c”; ... ) ... /* ตอนนี้ใช้แต่ละองค์ประกอบกริดกับพื้นที่กริดที่มีชื่อ */ # a ( พื้นที่ตาราง: a; ) #b ( พื้นที่ตาราง: b; ) #c ( พื้นที่ตาราง: c; )
คุณสามารถระบุเซลล์ว่างได้โดยใช้จุด (.) หรือชุดของจุดที่ไม่มีช่องว่าง ตัวอย่างเช่น:
พื้นที่เทมเพลตกริด: “a a” “ ข";
หรือตารางเทมเพลตพื้นที่: “ส่วนหัวส่วนหัว” “... เนื้อหา”;
มีคุณสมบัติสั้นสามประการที่สามารถใช้แทนคุณสมบัติเค้าโครงกริดแบบยาวที่กล่าวถึงในตัวอย่างด้านบน นี่คือที่ที่พวกเขาทั้งหมดพอดี
grid-area - คุณสมบัตินี้เป็นชวเลขสำหรับ:
grid-column - คุณสมบัตินี้เป็นชวเลขสำหรับ:
grid-column-start — ระบุว่าบรรทัดคอลัมน์ใดขององค์ประกอบกริดที่กำลังเริ่มต้นและจำนวนแทร็กที่ขยายไปถึง
grid-column-end — ระบุว่าองค์ประกอบตารางสิ้นสุดที่บรรทัดคอลัมน์ใดและขยายไปถึงกี่แทร็ก
grid-row — คุณสมบัตินี้เป็นชวเลขสำหรับ:
grid-row-start — ระบุว่าองค์ประกอบกริดเริ่มต้นจากบรรทัดใดและขยายไปถึงกี่แทร็ก
grid-row-end - ระบุว่าแถวใดจะเป็นบรรทัดสุดท้ายสำหรับองค์ประกอบและจำนวนแทร็กที่จะยืดออก
คุณยังสามารถใช้คุณสมบัติ grid-auto-flow ซึ่งถูกกล่าวถึงในบทก่อนหน้านี้ได้ โดยระบุวิธีการวางองค์ประกอบตารางโดยอัตโนมัติในตาราง องค์ประกอบที่วางโดยอัตโนมัติคือองค์ประกอบที่ไม่ได้วางอย่างชัดเจนโดยใช้คุณสมบัติใดๆ ข้างต้น
สร้างตารางที่ซ้อนกัน
องค์ประกอบกริดสามารถกลายเป็นกริดใน CSS Grid ได้ นั่นคือ คุณสามารถซ้อนองค์ประกอบกริดภายในองค์ประกอบกริดอื่นได้ ซึ่งจะเป็นการสร้างกริดที่ซ้อนกัน
หากต้องการสร้างกริดแบบซ้อน สิ่งที่คุณต้องทำคือใช้ display: grid (หรือ display: inline-grid) กับองค์ประกอบกริด และองค์ประกอบจะกลายเป็นกริดเอง คุณยังสามารถใช้ display: subgrid เพื่อสร้าง subgrid มันเกิดขึ้นได้อย่างไร
มรดก
คุณสมบัติกริดส่วนใหญ่ไม่ได้รับการสืบทอด ซึ่งหมายความว่ากริดที่ซ้อนกันของคุณจะไม่สืบทอดค่าของกริดหลัก ซึ่งช่วยให้คุณทำการเปลี่ยนแปลงตารางหลักได้โดยไม่ส่งผลกระทบต่อตารางลูกโดยไม่ได้ตั้งใจ
ตัวอย่างเช่น คุณตั้งค่าคอลัมน์ grid-auto-flow: บนกริดหลัก แต่คุณไม่ได้ตั้งค่าคุณสมบัติบนกริดที่ซ้อนกัน ในกรณีนี้ ตารางที่ซ้อนกันจะถูกตั้งค่าเป็นแถวเนื่องจากนั่นคือค่าเริ่มต้นสำหรับคุณสมบัตินี้
โปรดทราบว่าบนตารางหลัก ตัวเลขจะเรียงตามคอลัมน์ในแนวตั้ง แทนที่จะเป็นแนวนอนตามแถว แต่ตารางที่ซ้อนกันจะยังคงเรียงตามแนวนอนตามแนวแถว
กริดย่อย
โมดูล CSS Grid ตั้งค่า subgrid สำหรับคุณสมบัติการแสดงผล อย่างไรก็ตาม เบราว์เซอร์บางประเภทยังไม่รองรับ ค่านี้น่าจะมีประโยชน์มาก
Subgrid เป็นกริดแบบซ้อน แต่มี display: subgrid ซึ่งทำให้เป็นคอนเทนเนอร์กริดชนิดพิเศษที่มีส่วนร่วมในการตั้งค่าขนาดกริดของคอนเทนเนอร์กริดหลัก กล่าวอีกนัยหนึ่ง เนื้อหาของตารางย่อยมีอิทธิพลต่อขนาดของกริดหลัก ซึ่งช่วยให้เนื้อหาสามารถกระจายไปทั่วสองกริดได้ ด้านล่างนี้คือตัวอย่างจุดที่คุณสมบัตินี้อาจมีประโยชน์
นี่คือรายการองค์ประกอบ:
และนี่คือ CSS โดยที่รายการเป็นตาราง และองค์ประกอบรายการเป็นตารางย่อย
Ul ( จอแสดงผล: grid; grid: auto-flow / auto 1fr; ) li ( จอแสดงผล: subgrid; grid-column: span 2; Margin: 0.5em; border: solid; padding: 0.5em; ) label ( grid-column: 1; ) อินพุต (ตาราง-คอลัมน์: 2; )
ตัวอย่างนี้จะแสดงป้ายกำกับและการป้อนข้อมูลในแถว โดยมีเส้นขอบล้อมรอบแต่ละรายการ การให้แต่ละองค์ประกอบรายการเป็นตารางย่อยหมายความว่าไม่ควรมีปัญหาใดๆ กับการจัดตำแหน่งของแบบฟอร์มอินพุต เนื่องจากแต่ละองค์ประกอบรายการจะมีส่วนร่วมในการกำหนดขนาดของตารางหลัก
แบบฟอร์มการจัดตำแหน่งอัตโนมัติ
คุณสามารถใช้กริดที่ชัดเจนเป็นข้อได้เปรียบในการสร้างแบบฟอร์มหรือคอลเลกชันองค์ประกอบอื่นๆ ที่ต้องมีการจัดแนวกริด ตัวอย่างเช่น คุณสามารถใช้กริดที่ชัดเจนเพื่อสร้างแบบฟอร์มดังนี้:
และเมื่อคุณเพิ่มองค์ประกอบของแบบฟอร์มให้กับมาร์กอัปของคุณ ตารางที่ชัดเจนจะเพิ่มแถวเพื่อรองรับองค์ประกอบเหล่านั้น ดังนั้นเพื่อสร้างรูปร่างที่อยู่ด้านบน เราจำเป็นต้องมีมาร์กอัปนี้
ไม่จำเป็นต้องทำเครื่องหมายเพิ่มเติมเพื่อจัดเรียงทุกอย่างถูกต้อง และยังไม่จำเป็นต้องเพิ่มคลาสเพิ่มเติมสำหรับองค์ประกอบของแบบฟอร์มอีกด้วย เรากำลังเพิ่มเพียงคลาสเดียวสำหรับ
คุณสามารถเพิ่มองค์ประกอบแบบฟอร์มใหม่ได้โดยอัตโนมัติ และองค์ประกอบเหล่านั้นจะปรับเข้ากับองค์ประกอบอื่นๆ โดยอัตโนมัติ เนื่องจากองค์ประกอบเหล่านั้นจะถูกวางไว้ในตารางที่ชัดเจน
สิ่งนี้เป็นไปได้เนื่องจากเราสร้างฟอร์มให้เป็นกริด (จอแสดงผล: กริดนำไปใช้กับ .myForm) จากนั้นพวกเขาระบุว่าป้ายกำกับอยู่ในคอลัมน์หนึ่งและตัวควบคุมในอีกคอลัมน์หนึ่ง
นี่เป็นอีกตัวอย่างหนึ่ง คราวนี้มีองค์ประกอบเพิ่มเติม:
เมื่อตารางย่อยแพร่หลายในหมู่เบราว์เซอร์ จะเป็นไปได้ที่จะจัดองค์ประกอบแบบฟอร์มที่ไม่ใช่ทายาทโดยตรง