Nested grid

can we remove the nested grid out from its grid to its parent grid ?

11 Replies

we want to implement one of the nested grids item to span the parent grid column how can we achieve could anyone pls help?

MarkBoots•2mo ago

although fairly new, you could use subgrid (88% browser support) or maybe just display: contents on the nested grid But it all depends on what the actual layout is. Without seeing an example, it's a guessing game.

Vandana•2mo ago

https://codepen.io/abcretrograde/pen/rKOgWw

Stephen Lee

CodePen

Assorted cards & images (CSS Grid + BEM)

A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent)....

Vandana•2mo ago

i have designed for mobile approach but due to nested grid unable to level up the nested grid pls review my code

Vandana•2mo ago

https://github.com/kvandana451/Assorted-Cards-images

GitHub

GitHub - kvandana451/Assorted-Cards-images: A card layout with vari...

A card layout with various sizes, containing images and/or text. - kvandana451/Assorted-Cards-images

MarkBoots•2mo ago

i don't see a nested grid here. It's not really clear for me what you want to acchieve

Vandana•2mo ago

in the above code the container is a grid,the div items are displayed grid for the mobile view

MarkBoots•2mo ago

an example with subgrid

.main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 10px;
}
.subgrid {
  grid-column: 1/-1; /* span over all columns */
  display: grid;
  grid-template-columns: subgrid; /* will take the grid-template-columns from the maingrid */
}

.main-grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 10px;
}
.subgrid {
  grid-column: 1/-1; /* span over all columns */
  display: grid;
  grid-template-columns: subgrid; /* will take the grid-template-columns from the maingrid */
}

Vandana•5w ago

Thanks for the idea @MarkBoots subgrid idea doesnt work in my example could you please check it out https://assortedgrid.netlify.app/ this looks perfect for mobile devices but then the layout changes for large screen size

Vandana•5w ago

given design for large screen size https://codepen.io/abcretrograde/pen/rKOgWw

Stephen Lee

CodePen

Assorted cards & images (CSS Grid + BEM)

A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent)....

Vandana•4w ago

unable to implement for large screen size how can the existing code be modified? @MarkBoots could you pls figure out with this

Gaming

Programming

Nested grid