Playing with new SubGrid commands. -...

User 176817 Photo


Registered User
61 posts

Decided to play with some real Subgrid since it is now useable in Firefox now.
Subgrid is a feature of the CSS Grid Layout Module Level 2 that allows a grid-item with its own grid to align in one or both dimensions with its parent grid. It adds 2 commands to the Grid lineup.
grid-template-rows: subgrid
grid-template-columns: subgrid
Here is a link to s a article “CSS Grid Level 2: Here Comes Subgrid”
https://www.smashingmagazine.com/2018/07/css-grid-2/
Here is my playing with Subgrid in SD. Warning - Although viewable in Chrome and Edge, it uses the subgrid command and features can only be viewed in the Firefox brower, non-tablet version. The SD viewer and all other browsers will only show the broken version of the cards , showing the alignment issues with normal grid controls.
Hopefully the subgrid commads will come to the other browsers soon.. Also it has not been placed as a function in Site Designer as of yet. I used the new element function to manually place it in my page, but since it is only 2 commands is pretty easy.

I made a Card grid, witch works in all browsers, but veiw the cards while changing the wideness of the browser to see some of the issues with normal grid, and then do the same in Firefox and the rows will all line up since the subgrid command is recongnized. Site address below.
https://cardsubgrid.jshrimplin.com/
My site only needed “grid-template-rows: subgrid” for the site to control the cards rows using the wrapper grid setup. More fantastic uses are being tested now, and new uses will be found as it is being introduced to the world.

Jay Shrimplin


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Interesting, Jay. I will try to replicate it, just for fun. Are you dependent on Firefox Nightly for that?

Have you tried the new 'masonry' style in CSS grid? Here is a link: https://css-tricks.com/native-css-mason … -css-grid/

I tried it, but I'm only able to achieve a result with the HTML Editor so far, see https://arendal.coffeecup.com/
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 176817 Photo


Registered User
61 posts

Subgrid got turned on in the latest FireFox so nightly is not needed.
https://caniuse.com/?search=Subgrid
I will have to try the masonry command as it can be turned on in the latest version according to can I use. Can be enabled by setting layout.css.grid-template-masonry-value.enabled to true.
https://caniuse.com/?search=Masonry

I was able to use the subgrid by just adding that command to my card container after I found it was named .container.card as SD will throw in its own prefix to your container name. The bottom of my web page shows how I placed the command into the SD created div I called card.
Pic enclosed.

Jay
User 176817 Photo


Registered User
61 posts

I took a look at the Grid Masonry command to take pics and grids and combine them brick like on the screen with no spaces. This is a Level 3 Grid command and is not availible in any browser by default, but can go to FireFox and turn it on in the development configuration. I looked at the examples then opened up SD and created a container and placed 12 or so grid pics or items to the grid and then turned the container into a grid and manually placed the Masonry command "grid-template-rows: masonry;". and it works great in SD. My site is only viewable in a version of FireFox with the Masonry command enabled.
https://masonry.jshrimplin.com/
Or if you wish you wish to see it without installing I made a YouTube Video of my screen showing the function in the FireFox browser.
https://www.youtube.com/watch?v=bZZYtJv9Q9s&t=2s.
Do not expect this Level 3 spec command to come to browsers real soon, but may mean that the Level 2 Level sub grid may be coming to more than just FireFox soon.

Jay Shrimplin
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Looks very good, Jay! There is a js script that can make the masonry viewable in other browsers too. I just have to find it, then I'll post it.
I have too many commitments at the moment, but I'll get back to trying out the subgrid as soon as I can.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Here is the link to the other article I mentioned, which also has a js script to make the masonry grid work in all modern browsers: https://css-tricks.com/a-lightweight-masonry-solution/
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



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.