{"id":136997,"date":"2024-10-11T13:04:43","date_gmt":"2024-10-11T07:34:43","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136997"},"modified":"2024-10-16T14:38:11","modified_gmt":"2024-10-16T09:08:11","slug":"allowing-nested-elements-to-take-part-in-the-grid-layout-with-css-grid","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/allowing-nested-elements-to-take-part-in-the-grid-layout-with-css-grid\/","title":{"rendered":"Allowing nested elements to take part in the Grid | Layout with CSS Grid"},"content":{"rendered":"\n

Nested grids allow you to create complex and flexible layouts by placing grid containers within other grid containers. This can be useful for creating hierarchical structures or for adapting to different screen sizes.<\/p>\n\n\n\n

Basic Syntax<\/strong><\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<div class=”container”><\/p>\n\n\n\n

  <div class=”header”>Header<\/div><\/p>\n\n\n\n

  <div class=”main”><\/p>\n\n\n\n

    <div class=”item”>Item 1<\/div><\/p>\n\n\n\n

    <div class=”item”>Item 2<\/div><\/p>\n\n\n\n

  <\/div><\/p>\n\n\n\n

  <div class=”footer”>Footer<\/div><\/p>\n\n\n\n

<\/div><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.container {<\/p>\n\n\n\n

  display: grid;<\/p>\n\n\n\n

  grid-template-rows: 100px 1fr 100px;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.main {<\/p>\n\n\n\n

  display: grid;<\/p>\n\n\n\n

  grid-template-columns: 1fr 1fr;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

In this example, we have a nested grid within the .main container. This allows us to create a more complex layout with two columns within the main content area.<\/p>\n\n\n\n

Best Practices for Nested Grids<\/strong><\/p>\n\n\n\n