กริด CSS ที่ซ้อนกัน
ในระบบกริด มีความเป็นไปได้ที่จะเพิ่มกริดใหม่ที่ซ้อนกันเข้าไปในโครงข่ายที่เราสร้างขึ้น กริดที่ซ้อนกันถูกใช้งานอย่างกว้างขวางในการจัดวางองค์ประกอบขนาดเล็กภายในบล็อกของเว็บไซต์
เพื่อที่จะใช้ความสามารถนี้ จำเป็นต้องตั้งค่าคุณสมบัติ
display ให้มีค่าเป็น grid ในองค์ประกอบลูกนั้นเอง
ตัวอย่างเช่น ลองสร้างกริดอีกอันหนึ่งขึ้นภายในหนึ่งในเซลล์ของกริด:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
สมมติว่าคุณมีกริดซึ่งประกอบด้วยองค์ประกอบห้าชิ้น จัดวางตามคอลัมน์สามคอลัมน์ สร้างกริดที่ซ้อนกันภายในองค์ประกอบที่สอง ซึ่งในกริดที่ซ้อนกันนั้นจะมีองค์ประกอบลูกสามชิ้น
ปรับเปลี่ยนโจทย์ข้อก่อนหน้า เพื่อให้ในกริดที่ซ้อนกันมีองค์ประกอบลูกห้าชิ้น
สร้างกริดที่ซ้อนกันในองค์ประกอบที่หนึ่งและที่สาม โดยแต่ละกริดมีองค์ประกอบลูกสามชิ้น
