เค้าโครงตาราง CSS วิธีใช้ minmax ()

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

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

วากยสัมพันธ์

ไวยากรณ์ของ MinMax () ฟังก์ชั่นค่อนข้างง่ายใช้เวลา สองข้อโต้แย้ง: ค่าต่ำสุดและค่าสูงสุด:

 minmax (นาที, สูงสุด) 

นาที ราคา จะต้องมีขนาดเล็กลง กว่า สูงสุด, มิฉะนั้น สูงสุด ถูกเบราว์เซอร์ถูกละเว้น.

เราสามารถใช้ MinMax () ฟังก์ชั่นเป็น ค่าของ ตารางแม่แบบคอลัมน์ หรือ ตารางแม่แบบแถว คุณสมบัติ (หรือทั้งสองอย่าง). ในตัวอย่างของเราเราจะใช้ชื่อเดิมเนื่องจากเป็นกรณีที่ใช้บ่อยกว่า.

 .คอนเทนเนอร์ display: grid; ตารางเทมเพลตคอลัมน์: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100px 100px 100px; กริดช่องว่าง: 10px;  

ในตัวอย่าง Codepen ด้านล่างคุณสามารถค้นหา โค้ด HTML และ CSS เราจะใช้ตลอดบทความ.

เราสามารถใช้ คุณค่าที่แตกต่าง ข้างใน MinMax () ฟังก์ชั่นทั้งหมดขึ้นอยู่กับประเภทของกริดแบบกำหนดเองที่เราต้องการสร้าง.

ค่าความยาวคงที่

มีวิธีการพื้นฐานสองวิธีที่เราสามารถใช้ MinMax () ฟังก์ชั่นด้วย ค่าความยาวคงที่.

ประการแรกเราสามารถใช้ MinMax () สำหรับคอลัมน์กริดเดียวเท่านั้น และกำหนดความกว้างของคอลัมน์อื่น ๆ ให้เป็นค่าคงที่แบบง่าย (พิกเซลที่นี่).

 ตารางเทมเพลตคอลัมน์: minmax (100px, 200px) 200px 200px; 

ในตัวอย่าง gif ด้านล่างคุณจะเห็นว่ารูปแบบนี้คือ ไม่ตอบสนอง, อย่างไรก็ตามคอลัมน์แรกมี ความยืดหยุ่นบางอย่าง. คอลัมน์ที่สองและคอลัมน์ที่สามรักษาความกว้างคงที่ (200px) ในขณะที่คอลัมน์แรกมีช่วงตั้งแต่ 100px ถึง 200px, ขึ้นอยู่กับพื้นที่ว่าง.

ประการที่สองเราสามารถกำหนดความกว้างของ มากกว่าหนึ่งคอลัมน์กริด การใช้ MinMax (). ค่า min และ max เป็นค่าคงที่ดังนั้นโดยค่าเริ่มต้นกริดคือ ไม่ตอบสนอง. อย่างไรก็ตามคอลัมน์เหล่านั้นคือ คล่องตัว, แต่จะอยู่ระหว่าง 100px ถึง 200px พวกเขา เติบโตและหดตัวพร้อมกัน ในขณะที่เราเปลี่ยนขนาดวิวพอร์ต.

 ตารางเทมเพลตคอลัมน์: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

โปรดทราบว่าเรายังสามารถ ใช้ ซ้ำ () ฟังก์ชัน ด้วย MinMax (). ดังนั้นข้อมูลโค้ดก่อนหน้านี้สามารถเขียนได้เช่นนี้

 ตารางเทมเพลตคอลัมน์: ทำซ้ำ (3, minmax (100px, 200px)); 

ค่าความยาวแบบไดนามิก

นอกเหนือจากค่าคงที่ MinMax () ฟังก์ชั่นยังยอมรับ หน่วยเปอร์เซ็นต์ และ หน่วยเศษส่วนใหม่ (fr) เป็นข้อโต้แย้ง โดยใช้พวกเขาเราสามารถบรรลุกริดที่กำหนดเองที่มีทั้ง อ่อนไหว และ เปลี่ยนขนาดของพวกเขา ตามพื้นที่ว่าง.

โค้ดด้านล่างส่งผลให้เกิดกริดซึ่งความกว้างของคอลัมน์แรก ช่วงระหว่าง 50% ถึง 80% ในขณะที่สองและสาม แบ่งปันพื้นที่ที่เหลืออย่างเท่าเทียมกัน.

 ตารางเทมเพลตคอลัมน์: minmax (50%, 80%) 1fr 1fr; 

เมื่อเราใช้ค่าแบบไดนามิกกับ MinMax () ฟังก์ชั่นมันเป็นสิ่งสำคัญในการตั้งค่า กฎที่เหมาะสม. ให้ฉันแสดงตัวอย่างที่ กริดแยกกัน:

 ตารางเทมเพลตคอลัมน์: minmax (1fr, 2fr) 1fr 1fr; 

กฎนี้ไม่มีเหตุผลใด ๆ เนื่องจากเบราว์เซอร์เป็น ไม่สามารถตัดสินใจได้ ค่าที่จะกำหนดให้กับ MinMax () ฟังก์ชัน ค่าต่ำสุดจะนำไปสู่ 1fr 1fr 1fr ความกว้างคอลัมน์ในขณะที่สูงสุดถึง 2fr 1fr 1fr. แต่ทั้งคู่เป็นไปได้แม้ในหน้าจอที่เล็กมาก มี ไม่มีสิ่งใดเกี่ยวข้องกับเบราว์เซอร์.

นี่คือผลลัพธ์:

รวมค่าคงที่และแบบไดนามิก

มันเป็นไปได้ที่จะ รวมค่าคงที่และแบบไดนามิก. ตัวอย่างเช่นในตัวอย่าง Codepen ด้านบนฉันใช้ minmax (100px, 200px) 1fr 1fr; กฎที่ส่งผลให้ในตารางที่คอลัมน์แรก ช่วงระหว่าง 100px และ 200px และพื้นที่ที่เหลืออยู่คือ แบ่งปันอย่างเท่าเทียมกันระหว่างอีกสองรายการ.

 ตารางเทมเพลตคอลัมน์: minmax (100px, 200px) 1fr 1fr; 

มันน่าสนใจที่จะสังเกตว่าเมื่อวิวพอร์ตเติบโตขึ้นอันดับแรกคอลัมน์แรกจะเติบโตจาก 100px เป็น 200px อีกสองคนถูกปกครองโดยหน่วย fr เริ่มเติบโต หลังจากที่คนแรกถึงความกว้างสูงสุด. นี่เป็นเหตุผลเนื่องจากเป้าหมายของหน่วยเศษส่วนคือการแบ่งพื้นที่ว่าง (เหลือ) ที่มีอยู่.

นาทีเนื้อหา, สูงสุดเนื้อหา, และ รถยนต์ คำหลัก

มี คุณค่าประเภทที่สาม เราสามารถกำหนดให้ MinMax () ฟังก์ชัน นาทีเนื้อหา, สูงสุดเนื้อหา, และ รถยนต์ คำหลักที่เกี่ยวข้องกับขนาดของแทร็กกริดกับ มันมีเนื้อหา.

สูงสุดเนื้อหา

สูงสุดเนื้อหา คำหลัก นำเบราว์เซอร์ที่คอลัมน์กริดจำเป็นต้องใช้ กว้างเท่ากับองค์ประกอบที่กว้างที่สุดที่มีอยู่.

ในตัวอย่างด้านล่างฉันวาง รูปภาพขนาดกว้าง 400px ภายในแทร็กกริดแรกและใช้กฎ CSS ต่อไปนี้ (คุณสามารถค้นหาตัวอย่าง Codepen ด้วยรหัสที่แก้ไขเต็มในตอนท้ายของบทความ):

 .คอนเทนเนอร์ กริดเทมเพลตคอลัมน์: max-content 1fr 1fr; / ** * เหมือนกันกับเครื่องหมาย minmax (): * grid-template-columns: minmax (max-content, max-content) 1fr 1fr; * / 

ฉันไม่ได้ใช้ MinMax () สัญกรณ์ยัง แต่ในความคิดเห็นรหัสข้างต้นคุณสามารถดูว่ารหัสเดียวกันจะมีลักษณะอย่างไรกับมัน (แม้ว่ามันจะฟุ่มเฟือยที่นี่).

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

นาทีเนื้อหา

นาทีเนื้อหา คำหลัก นำเบราว์เซอร์ที่คอลัมน์กริดจำเป็นต้องมีความกว้างเท่ากับ องค์ประกอบที่แคบที่สุดประกอบด้วย, ในทางที่ ไม่นำไปสู่การล้น.

เรามาดูกันว่าการสาธิตก่อนหน้านี้กับภาพนั้นเป็นอย่างไรถ้าเราเปลี่ยนค่าของคอลัมน์แรกเป็น นาทีเนื้อหา:

 .คอนเทนเนอร์ กริดเทมเพลตคอลัมน์: min-content 1fr 1fr; / ** * เหมือนกันกับเครื่องหมาย minmax (): * grid-template-columns: minmax (min-content, min-content) 1fr 1fr; * / 

ฉันออกจากพื้นหลังสีเขียวด้านล่างภาพเพื่อให้คุณเห็นขนาดเต็มของเซลล์กริดแรก.

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

หากเซลล์กริดมีสตริงข้อความ, นาทีเนื้อหา อยากจะเป็น เท่ากับความกว้างของคำที่ยาวที่สุด, เนื่องจากเป็นองค์ประกอบที่เล็กที่สุดที่ไม่สามารถลดขนาดลงได้หากไม่มีการล้น นี่คือบทความที่ยอดเยี่ยมโดย BitsOfCode ที่คุณสามารถดูได้ นาทีเนื้อหา และ สูงสุดเนื้อหา ทำงานเมื่อเซลล์กริดมีสตริงข้อความ.

การใช้ นาทีเนื้อหา และ สูงสุดเนื้อหา ด้วยกัน

ถ้าเรา ใช้ นาทีเนื้อหา และ สูงสุดเนื้อหา ด้วยกัน ข้างใน MinMax () ฟังก์ชั่นเราจะได้รับคอลัมน์กริดที่:

1. ตอบสนองได้
2. ไม่มีล้น
3. ไม่เติบโตกว้างกว่าองค์ประกอบที่กว้างที่สุด

 .คอนเทนเนอร์ กริดเทมเพลตคอลัมน์: minmax (เนื้อหาขั้นต่ำเนื้อหาสูงสุด) 1fr 1fr;  

เรายังสามารถใช้ นาทีเนื้อหา และ สูงสุดเนื้อหา คำหลัก พร้อมกับค่าความยาวอื่น ๆ ข้างใน MinMax () ฟังก์ชั่นจนกระทั่งกฎทำให้รู้สึก ตัวอย่างเช่น, minmax (25%, เนื้อหาสูงสุด) หรือ minmax (เนื้อหาขั้นต่ำ 300px) จะเป็นทั้งกฎที่ถูกต้อง.

รถยนต์

ในที่สุดเราก็สามารถใช้ รถยนต์ คำหลัก เป็นข้อโต้แย้งของ MinMax () ฟังก์ชัน.

เมื่อ รถยนต์ คือ ใช้เป็นค่าสูงสุด, ค่าของมันจะเหมือนกับ สูงสุดเนื้อหา.

เมื่อไหร่ ใช้เป็นขั้นต่ำ, ค่าของมันถูกระบุโดย นาทีความกว้าง / นาทีความสูง กฎซึ่งหมายความว่า รถยนต์ บางครั้งก็เหมือนกันกับ นาทีเนื้อหา, แต่ ไม่เสมอ.

ในตัวอย่างก่อนหน้าของเรา, นาทีเนื้อหา ไม่เท่ากับ รถยนต์, เนื่องจากความกว้างน้อยที่สุดของคอลัมน์กริดแรกนั้นเล็กกว่าความสูงขั้นต่ำเสมอ ดังนั้นกฎ CSS ที่เป็นของ:

 .คอนเทนเนอร์ กริดเทมเพลตคอลัมน์: minmax (เนื้อหาขั้นต่ำเนื้อหาสูงสุด) 1fr 1fr;  

สามารถเขียนได้เช่นนี้

 .คอนเทนเนอร์ กริดเทมเพลตคอลัมน์: minmax (อัตโนมัติ, อัตโนมัติ) 1fr 1fr;  

รถยนต์ คำหลักสามารถ ใช้ร่วมกับหน่วยนิ่งและไดนามิกอื่น ๆ (พิกเซลหน่วย fr เปอร์เซ็นต์ ฯลฯ ) ภายใน MinMax () ฟังก์ชั่นเช่น minmax (อัตโนมัติ, 300px) จะเป็นกฎที่ถูกต้อง.

คุณสามารถทดสอบวิธีการ นาทีเนื้อหา, สูงสุดเนื้อหา, และ รถยนต์ คำหลักทำงานร่วมกับ MinMax () ฟังก์ชั่นในการสาธิต Codepen ต่อไปนี้: