I'm learning about CSS-Grid and CSS-Flex. I wasn't able to discover if a CSS Grid can be built with elements (IDs/selectors/classes) that are children, alongside parents.
I want to totally disregard the class "div#foo" and only use its children, #foo_alice and #foo_bob. I would like them to be peers in a CSS grid with #logo and #bar.
Is this possible?
HTML Code:
<body><div id="wrapper"><div id="logo"><p>LOGO</p></div><div id="foo"><ul id="foo_alice"><li>alice1</li></ul><ul id="foo_bob"><li>bob1</li></ul><ul id="foo_carl"><li>carl1</li></ul></div><div id="bar"><p>BAR</p></div></div> ...Desired CSS:
#wrapper { display: grid; grid-template-areas:"logo alice carl""logo bob bar"; grid-template-columns: auto; grid-template-rows: auto;}#logo { grid-area: logo;}#foo_bob { grid-area: bob;}#foo_alice { grid-area: alice;}#foo_carl { grid-area: carl;}#bar { grid-area: bar;}In this example, all of the #foo_* elements were rendered in the same box, instead of where they were placed by grid-template-areas.
Are the elements required to be peers, in order to be used in Grid? How about in Flex?
Why don't I just do a flex on #foo?
I'd like to mix foo_carl and #bar in the same grid, as you can see in column 3.
Why don't I just change the HTML?
I'm limited to a CSS only solution and want to understand if CSS can handle this.