Nested grid

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

11 Replies

VandanaOP•8mo ago

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•8mo 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.

VandanaOP•8mo 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)....

VandanaOP•8mo ago

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

VandanaOP•8mo 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•8mo ago

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

VandanaOP•8mo ago

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

MarkBoots•8mo 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 */
}

VandanaOP•7mo 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

VandanaOP•7mo 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)....

VandanaOP•7mo 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

Did you find this page helpful?