from Flex to Grid

User 2706435 Photo


Ambassador
443 posts

I have not done much coding with Grid, except hand coding demos and examples. But now, I am working on and redoing layout that I once made using Flex css. Before I dive deep into grid, I just want to make sure I can do this with grids. I believe I can.

Layouts always just looked bad for a group of cards. So I split them up into different containers. One container of cards on top of the other. I am decluttering the page of cards and I want the remaining cards to keep their current positions (row of two cards, row of two cards), except on the widest breakpoint, I just want them all on one row.

I should be able to do with with grids correct? Just create a grid, name the cells (areas?), then assign the elements to the cells for each breakpoint, correct? So, two rows of cards, are combined into ONE grid, and I assign areas to the elements?
User 122279 Photo


Senior Advisor
12,982 posts

Yes, that should work.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 10077 Photo


Senior Advisor
1,065 posts

One thing you might want to keep in mind is the Fallback First setting. I create my sites in Fallback First as very basic sites using Flex wherever needed.

I then change to Display Grid and change the Flex areas to Grid as you described. Doing this ensures that my sites are good for older browsers as well as newer ones.
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2088758 Photo


Senior Advisor
2,766 posts

Yes very good point. Please note that if you design in Grid first you will have to go back and set all your styles again. This was a major pain in the butt! Here is my workflow:

0. Sketch out on paper the sections I will need for the page. This will be important on later steps.
1. Start new project, pick what framework you want to use. My favorite is Foundation.
2. Set up basic structure of website in Fallback First. This is selected by default.
3. Create main wrapping container. Remember to set a defining class name for it.
4. Create a section container within the main. I mark with class of "section" and give it default paddings of 10, 10, 10, 10 and any other styles you want to see as default on your sections.
5. Duplicate it for as many sections you need for you page that was decided on step 0.
6. Add another class name defining it more to each of those sections. For example: header, navigation, banner, section one, section two, footer.
7. Once created I will go back to the main container and add a display grid and set up each section in your grid.
8. Once grid is set up make sure you switch back to fallback first before you do any styling of any kind.
9. Once all basic design is setup then I switch back to Grid and do the minor tweaking I want done. I can't stress this enough, if you do it the opposite way by designing in Grid first then switch to fallback first you will have to style the entire website again.

I have created a basic theme for myself that has all this done with many sections in it that way when I start the design on a new website I don't have to do all this over and over again.

Hope this helps.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Senior Advisor
12,982 posts

This seems a very good workflow, Steve. After having modified two themes that had been done without the fallback first (not by me, though!) I can confirm that it is quite some work to add in the 'fallback last'.
I still regard myself as a novice with CSS grid, and will make a note of your advice next time I venture at it.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2706435 Photo


Ambassador
443 posts

Thanks for the suggestions

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.