Hi everyone, I've been having a real good play with SD3 and loving the CSS Grid videos from Bob. (The accent and the way he says CSS is sooo cool, sounds like caesar as in a great emperor). When are the next episodes ready Julius I mean Bob!!!
What I am not sure of is this.
I have some repeating containers with content of an image, header 3 and 4 and a paragraph. I understand using the Grid layout to shape the overall parent container which is working incredibly well especially when changing screen sizes. What I am not so sure of is the child containers with the content of an image, header 3 and 4 and a paragraph in. Do I use grid or flex or even good old block, margins, padding etc to get the design I want?
As for styling, do I design for "fallback first" so I then do not keep having to repeat for "Display Grid" etc.
Kind regards, and well done coffeecup. SD3 is brilliant.

Hello Phillip,

These are good questions. My logic tells me to keep nesting using grid. That may or may not be the correct answer as all this is so new to all of us. I would like to see next videos coming in the series also.

https://developer.mozilla.org/en-US/doc … rid_Layout

We need a "Grid Expert" to teach us the how and why.....

you're not likely to find such an expert amongst "the powers that be" -- they've got their business agenda to push, heavily dependent on CSS Grid, currently, but I, at least, like looking around more broadly, so appreciate links to material offsite, thanks

Hi
For me the main reason to choose Flex or Grid is the browser used by reader.
IOS9 (e.g. iPad2) can't read Grid but can Flex, so here is the hard choice:
I make a page rapidly with Grid and lost ios9 users
(they need to change those too old iPad to read my perfect page)
or I work a bit more with Flex and keep ios9 users
(chance they can keep those good old iPad to read my perfect page)

To be fair, in my thinking, unless you have a really complicated design then to only use grid for the larger screen sizes that change the main container layouts and use flexbox for the elements inside a content container? For the main layout then use fallback first queries too to accommodate ie11 as iPad 2? Thanks phil
Regards Phil

Twinstream mentioned this free course which is a series of short videos. The tutor seems pretty expert to me. Video 23 covers the issue of Flexbox v. CSS Grid.

Frank

With some further investigation I believe SD3 can support a wide range of browsers and OS if one wanted to. You would use fallback first design for only browsers that do not support flex. Since my Bootstrap menu Navbar component is built using flex and will not display or work correctly on a Ipad 1 OS 5.1.1, I could include a menu that works for that OS like one built using Menu Builder. By creating a @supports query for flex, I could then add my Bootstrap menu component, but hide (display none) the Menu Builder one when display is set to @supports flex. If the browser does not support flex it gets the Menu Builder menu. If a browser supports flex it gets the Bootstrap Flex Menu. Tested....works. Seems that @supports covers almost all Flex capable browsers when comparing the two in Caniuse.

https://www.youtube.com/watch?v=dQHtT47eH0M

Here's a nice video by Jen Simmons that gives an example of flex for some content inside some grid items for the main layout.

By the way her channel has some really great content - a lot of it related to Grid.

Seems one could use a redirect with @supports and a little javascript.

Now I can provide a redirect to a user friendly site that does not support display:flex.

I guess I will firing up ol' Bootstrap 3 for a simple landing page for those folks.....since it does not use flex.

https://stackoverflow.com/questions/333 … ir-browser

I can still add my display:grid enhancements too on my regular site ! What a great feature !

A simple example of using @ supports for a redirect to a different landing page for older browsers or browsers that do not fully support flex specifications.

https://gluexp.coffeecup.com/sd3/project7/index.html

Bootstrap 4 - Flex and Grid
Bootstrap 3 - No Flex