แถวที่มีความสูงเท่ากันใน CSS Grid Layout

ฉันรวบรวมว่าสิ่งนี้เป็นไปไม่ได้ที่จะใช้ Flexbox เนื่องจากแต่ละแถวมีความสูงเพียงเล็กน้อยเท่านั้นที่จำเป็นเพื่อให้พอดีกับองค์ประกอบ แต่สามารถทำได้โดยใช้ CSS Grid ที่ใหม่กว่าหรือไม่

เพื่อความชัดเจนฉันต้องการความสูงเท่ากันสำหรับองค์ประกอบทั้งหมดในตารางในทุกแถวไม่ใช่แค่ต่อแต่ละแถว โดยทั่วไป "เซลล์" ที่สูงที่สุดควรกำหนดความสูงของเซลล์ทั้งหมดไม่ใช่เฉพาะเซลล์ที่อยู่ในแถวเท่านั้น

คำตอบสั้น ๆ

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

• ตั้งค่าคอนเทนเนอร์เป็น grid-auto-rows: 1fr

มันทำงานอย่างไร

เค้าโครงกริดจัดเตรียมหน่วยสำหรับสร้างความยาวที่ยืดหยุ่นในคอนเทนเนอร์แบบกริด นี่คือfrหน่วย ออกแบบมาเพื่อกระจายพื้นที่ว่างในคอนเทนเนอร์และค่อนข้างคล้ายคลึงกับflex-growคุณสมบัติใน flexbox

หากคุณตั้งค่าแถวทั้งหมดในคอนเทนเนอร์กริด1frให้สมมติว่าดังนี้

grid-auto-rows: 1fr;

... จากนั้นแถวทั้งหมดจะมีความสูงเท่ากัน

มันไม่สมเหตุสมผลจริงๆเพราะfrควรจะกระจายพื้นที่ว่าง และหากหลายแถวมีเนื้อหาที่มีความสูงต่างกันเมื่อมีการกระจายพื้นที่บางแถวก็จะเล็กลงและสูงขึ้นตามสัดส่วน

ยกเว้นฝังลึกในข้อมูลจำเพาะของกริดคือนักเก็ตตัวน้อยนี้:

7.2.3. ความยาวที่ยืดหยุ่น: fr หน่วย

...

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

ขนาดที่ใช้ของแทร็กกริดขนาดเฟล็กซ์แต่ละแทร็กจะคำนวณโดยการกำหนดmax-contentขนาดของแทร็กกริดขนาดเฟล็กซ์แต่ละแทร็กและหารขนาดนั้นด้วยแฟกเตอร์เฟล็กซ์ตามลำดับเพื่อกำหนด " 1fr ขนาดสมมุติ"

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

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

ความสูงของแต่ละแถวจะถูกกำหนดโดยmax-contentรายการตารางที่สูงที่สุด ( )

1frความสูงสูงสุดของแถวเหล่านั้นจะกลายเป็นความยาวของ

นั่นคือวิธี1frสร้างแถวที่มีความสูงเท่ากันในคอนเทนเนอร์กริด

เหตุใด flexbox จึงไม่ใช่ตัวเลือก

ตามที่ระบุไว้ในคำถามไม่สามารถใช้ flexbox แถวความสูงเท่ากันได้

รายการ Flex สามารถมีความสูงเท่ากันในแถวเดียวกัน แต่ไม่สามารถข้ามหลายแถวได้

พฤติกรรมนี้กำหนดไว้ในข้อมูลจำเพาะของ flexbox:

6. เส้น Flex

ในคอนเทนเนอร์เฟล็กซ์แบบหลายบรรทัดขนาดกากบาทของแต่ละบรรทัดคือขนาดต่ำสุดที่จำเป็นในการบรรจุรายการเฟล็กซ์ในบรรทัด

กล่าวอีกนัยหนึ่งคือเมื่อมีหลายบรรทัดในคอนเทนเนอร์เฟล็กซ์ตามแถวความสูงของแต่ละบรรทัด ("ขนาดกากบาท") คือความสูงต่ำสุดที่จำเป็นในการบรรจุรายการเฟล็กซ์ในบรรทัด

คำตอบสั้น ๆ คือการตั้งค่าgrid-auto-rows: 1fr;บนคอนเทนเนอร์กริดช่วยแก้ปัญหาที่ถามได้

https://codepen.io/Hlsg/pen/EXKJba