from Flex to Grid
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?
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.
http://usconsumernet.net/help-for-coffe … -users.php
Personal & Specialized Help for Coffeecup Users
Email me at email@example.com or call 865-687-7698
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.
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
I still regard myself as a novice with CSS grid, and will make a note of your advice next time I venture at it.
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.