Subgrid What is it? - Post ID 255838

User 7433 Photo


Registered User
42 posts

Could you please tell me what a subgrid is and why I would use it?

TKS
User 2088758 Photo


Senior Advisor
2,740 posts

Hi Greg,

A subgrid is just that. It allows you to have more positioning control with in the main grid.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 434929 Photo


Ambassador
937 posts

A container allows you to group elements together and control the positioning, like for example, centering them within your layout. By applying boundaries, a width limit, to the container you can, for example, have a row with a different background that extends the full width of the screen while constraining the content elements to a certain size. Containers can be used in many ways .

A subgrid element is a group of containers where you can add rows and columns within an existing column. Using a subgrid allows for more responsive flexibility at smaller screen sizes. Once you position the subgrid you can add content elements to the subgrid columns and set the span width to accommodate for the different display sizes.

Read More Here
http://www.coffeecup.com/help/articles/ … -elements/
Guys at coffeecup are awesometacular.
User 2088758 Photo


Senior Advisor
2,740 posts

Thanks Mansour... was typing from my phone lol... didn't want to type that much detail. Great Explanation.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 434929 Photo


Ambassador
937 posts

We all trying to help each other here Steve :)

Lots of users seem confusing this, In simple language I always say It's a div inside another div in container case.

And for subgrid it's multi divs inside another div and used for element or group of elements to control their positioning.


If you have done hand coding, following code very easy to understand.

============================================
container
============================================
<div class="row">
<div class=" column">
<div class=" container"></div>
</div>
</div>

============================================
subgrid
============================================

<div class="row">
<div class="column">
<div class="subgrid">
<div class="row">
<div class="subgrid"></div>
</div>
<div class="row">
<div class="subgrid"></div>
<div class="subgrid"></div>
</div>
</div>
</div>
</div>
Guys at coffeecup are awesometacular.
User 7433 Photo


Registered User
42 posts

Thank you Mansour.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.